ion-breadcrumb

陰影

麵包屑是麵包屑元件的單一導覽項目子元件。麵包屑可以連結到應用程式中的其他位置，也可以是純文字。每個麵包屑之間都有分隔符號，而且可以選擇性地包含圖示。

如需更多資訊，請參閱麵包屑文件。

介面

BreadcrumbCollapsedClickEventDetail

interface BreadcrumbCollapsedClickEventDetail {
  collapsedBreadcrumbs?: HTMLIonBreadcrumbElement[];
}

BreadcrumbCustomEvent

雖然不是必需的，但此介面可以用來代替 CustomEvent 介面以獲得更強的型別。

interface BreadcrumbCustomEvent extends CustomEvent {
  detail: BreadcrumbCollapsedClickEventDetail;
  target: HTMLIonBreadcrumbElement;
}

屬性

active

說明	如果為 true，麵包屑會呈現不同的外觀，以顯示它是目前作用中的麵包屑。如果未在任何一個麵包屑上設定，則最後一個麵包屑的預設值為 true。
屬性	active
類型	boolean
預設值	false

color

說明	要從應用程式的調色盤中使用的顏色。預設選項為："primary"、"secondary"、"tertiary"、"success"、"warning"、"danger"、"light"、"medium" 和 "dark"。如需有關顏色的更多資訊，請參閱主題設定。
屬性	color
類型	"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined
預設值	undefined

disabled

說明	如果為 true，使用者無法與麵包屑互動。
屬性	disabled
類型	boolean
預設值	false

download

說明	此屬性會指示瀏覽器下載 URL，而不是導覽至該 URL，因此將提示使用者將其儲存為本機檔案。如果屬性具有值，則該值會用作「儲存」提示中的預先填入的檔案名稱（使用者仍然可以變更檔案名稱）。
屬性	download
類型	string ｜ undefined
預設值	undefined

href

說明	包含超連結指向的 URL 或 URL 片段。如果設定此屬性，則會呈現錨點標籤。
屬性	href
類型	string ｜ undefined
預設值	undefined

mode

說明	模式決定要使用哪個平台樣式。
屬性	mode
類型	"ios" ｜ "md"
預設值	undefined

rel

說明	指定目標物件與連結物件的關係。該值是以空格分隔的連結類型清單。
屬性	rel
類型	string ｜ undefined
預設值	undefined

routerAnimation

說明	使用路由器時，它會指定使用 href 導覽至另一個頁面時的轉換動畫。
屬性	undefined
類型	((baseEl: any, opts?: any) => Animation) ｜ undefined
預設值	undefined

routerDirection

說明	使用路由器時，它會指定使用 href 導覽至另一個頁面時的轉換方向。
屬性	router-direction
類型	"back" ｜ "forward" ｜ "root"
預設值	'forward'

separator

說明	如果為 true，則在此麵包屑與下一個麵包屑之間顯示分隔符號。除了最後一個麵包屑之外，所有麵包屑的預設值為 true。
屬性	separator
類型	boolean ｜ undefined
預設值	undefined

target

說明	指定要在何處顯示連結的 URL。僅在提供 href 時適用。特殊關鍵字："_blank"、"_self"、"_parent"、"_top"。
屬性	target
類型	string ｜ undefined
預設值	undefined

事件

名稱	說明	冒泡
ionBlur	當麵包屑失去焦點時發出。	true
ionFocus	當麵包屑取得焦點時發出。	true

方法

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

CSS 陰影部分

名稱	說明
collapsed-indicator	顯示麵包屑已摺疊的指示器元素。
native	包裝所有子元素的原生 HTML 錨點或 div 元素。
separator	每個麵包屑之間的分隔符號元素。

CSS 自訂屬性

iOS

名稱	說明
--background-focused	麵包屑取得焦點時的背景顏色
--color	麵包屑的文字顏色
--color-active	作用中麵包屑的文字顏色
--color-focused	麵包屑取得焦點時的文字顏色
--color-hover	滑鼠停留在麵包屑上的文字顏色

MD

名稱	說明
--background-focused	麵包屑取得焦點時的背景顏色
--color	麵包屑的文字顏色
--color-active	作用中麵包屑的文字顏色
--color-focused	麵包屑取得焦點時的文字顏色
--color-hover	滑鼠停留在麵包屑上的文字顏色

插槽

此元件沒有可用的插槽。