跳到主要內容
版本:v8

ion-back-button

陰影

返回按鈕在點擊時會返回應用程式的歷史記錄。除非設定了defaultHref,否則只有在導覽堆疊中有歷史記錄時才會顯示。返回按鈕會根據模式顯示不同的文字和圖示,但可以自訂。

基本用法

自訂返回按鈕

預設情況下,返回按鈕在 ios 上會顯示文字 "返回""chevron-back" 圖示,在 md 上則會顯示 "arrow-back-sharp" 圖示。可以透過設定 icontext 屬性來針對每個返回按鈕元件自訂。或者,可以使用全域設定中的 backButtonIconbackButtonText 屬性全域設定。如需更多資訊,請參閱設定文件

預設返回歷史記錄

有時,應用程式可能需要在沒有歷史記錄時顯示返回按鈕並返回。這可以透過將返回按鈕上的 defaultHref 設定為路徑來完成。若要使用 defaultHref,應用程式必須包含設定了路徑的路由器。

屬性

color

描述要從應用程式的調色盤使用的色彩。預設選項為:"primary""secondary""tertiary""success""warning""danger""light""medium""dark"。如需色彩的詳細資訊,請參閱主題
屬性color
類型"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined
預設未定義

defaultHref

描述當沒有歷史記錄時,預設導覽返回的 URL。
屬性default-href
類型string | undefined
預設未定義

disabled

描述如果為 true,則使用者無法與按鈕互動。
屬性disabled
類型boolean
預設false

icon

描述內建的具名 SVG 圖示名稱或要用於返回按鈕的 SVG 檔案的確切 src
屬性icon
類型null | string | undefined
預設未定義

mode

描述模式決定要使用哪個平台樣式。
屬性mode
類型"ios" | "md"
預設未定義

routerAnimation

描述使用路由器時,指定導覽至另一頁時的轉換動畫。
屬性未定義
類型((baseEl: any, opts?: any) => Animation) | undefined
預設未定義

text

描述要在返回按鈕中顯示的文字。
屬性text
類型null | string | undefined
預設未定義

type

描述按鈕的類型。
屬性type
類型"button" | "reset" | "submit"
預設'button'

事件

此元件沒有可用的事件。

方法

此元件沒有可用的公用方法。

CSS 陰影部分

名稱描述
icon返回按鈕圖示(使用 ion-icon)。
native包裝所有子元素的原生 HTML 按鈕元素。
text返回按鈕文字。

CSS 自訂屬性

名稱描述
--background按鈕的背景
--background-focused使用 Tab 鍵聚焦時按鈕的背景
--background-focused-opacity使用 Tab 鍵聚焦時按鈕背景的不透明度
--background-hover滑鼠懸停時按鈕的背景
--background-hover-opacity滑鼠懸停時背景的不透明度
--border-radius按鈕的邊框半徑
--color按鈕的文字顏色
--color-focused使用 Tab 鍵聚焦時按鈕的文字顏色
--color-hover滑鼠懸停時按鈕的文字顏色
--icon-font-size按鈕圖示的字型大小
--icon-font-weight按鈕圖示的字型粗細
--icon-margin-bottom按鈕圖示的下邊距
--icon-margin-end如果方向由左至右,則為按鈕圖示的右邊距;如果方向由右至左,則為按鈕圖示的左邊距
--icon-margin-start如果方向由左至右,則為按鈕圖示的左邊距;如果方向由右至左,則為按鈕圖示的右邊距
--icon-margin-top按鈕圖示的上邊距
--icon-padding-bottom按鈕圖示的下內距
--icon-padding-end如果方向由左至右,則為按鈕圖示的右內距;如果方向由右至左,則為按鈕圖示的左內距
--icon-padding-start如果方向由左至右,則為按鈕圖示的左內距;如果方向由右至左,則為按鈕圖示的右內距
--icon-padding-top按鈕圖示的上內距
--margin-bottom按鈕的下邊距
--margin-end如果方向由左至右,則為按鈕的右邊距;如果方向由右至左,則為按鈕的左邊距
--margin-start如果方向由左至右,則為按鈕的左邊距;如果方向由右至左,則為按鈕的右邊距
--margin-top按鈕的上邊距
--min-height按鈕的最小高度
--min-width按鈕的最小寬度
--opacity按鈕的不透明度
--padding-bottom按鈕的下內距
--padding-end如果方向由左至右,則為按鈕的右內距;如果方向由右至左,則為按鈕的左內距
--padding-start如果方向由左至右,則為按鈕的左內距;如果方向由右至左,則為按鈕的右內距
--padding-top按鈕的上內距
--ripple-color按鈕漣漪效果的顏色
--transition按鈕的轉場效果

插槽

此元件沒有可用的插槽。