跳至主要內容
版本:v8

ion-breadcrumbs

陰影

麵包屑是導覽項目,用於指示使用者在應用程式或網站上的位置。它們應用於具有階層式排列頁面的大型網站和應用程式。麵包屑可以根據可以顯示的最大數量來折疊,並且可以點擊折疊指示器來顯示具有更多資訊的浮動視窗或展開折疊的麵包屑。

基本用法

使用圖示

項目上的圖示

自訂分隔符號

折疊項目

最大項目數

如果項目多於 maxItems 的值,則麵包屑會被折疊。預設情況下,只會顯示第一個和最後一個項目。

折疊前或後的項目

一旦項目被折疊,可以透過 itemsBeforeCollapseitemsAfterCollapse 屬性來控制要顯示的項目數量。

點擊折疊指示器 -- 展開麵包屑

點擊折疊指示器將觸發 ionCollapsedClick 事件。這可以用於,例如,展開麵包屑。

點擊折疊指示器 -- 顯示浮動視窗

ionCollapsedClick 事件也可以用來顯示覆蓋層(在此情況下為 ion-popover),顯示隱藏的麵包屑。

主題化

色彩

CSS 自訂屬性

屬性

color

描述要從應用程式的調色盤中使用的顏色。預設選項為:"primary""secondary""tertiary""success""warning""danger""light""medium""dark"。有關顏色的更多資訊,請參閱 主題化
屬性color
類型"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined
預設undefined

itemsAfterCollapse

描述在折疊指示器之後要顯示的麵包屑數量。如果 itemsBeforeCollapse + itemsAfterCollapse 大於 maxItems,則麵包屑將不會被折疊。
屬性items-after-collapse
類型number
預設1

itemsBeforeCollapse

描述在折疊指示器之前要顯示的麵包屑數量。如果 itemsBeforeCollapse + itemsAfterCollapse 大於 maxItems,則麵包屑將不會被折疊。
屬性items-before-collapse
類型number
預設1

maxItems

描述在折疊之前要顯示的最大麵包屑數量。
屬性max-items
類型number | undefined
預設undefined

mode

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

事件

名稱描述冒泡
ionCollapsedClick當點擊折疊指示器時發出。true

方法

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

CSS 陰影部分

此元件沒有可用的 CSS 陰影部分。

CSS 自訂屬性

此元件沒有可用的 CSS 自訂屬性。

插槽

此元件沒有可用的插槽。