ion-breadcrumbs
麵包屑是導覽項目,用於指示使用者在應用程式或網站上的位置。它們應用於具有階層式排列頁面的大型網站和應用程式。麵包屑可以根據可以顯示的最大數量來折疊,並且可以點擊折疊指示器來顯示具有更多資訊的浮動視窗或展開折疊的麵包屑。
基本用法
使用圖示
項目上的圖示
自訂分隔符號
折疊項目
最大項目數
如果項目多於 maxItems
的值,則麵包屑會被折疊。預設情況下,只會顯示第一個和最後一個項目。
折疊前或後的項目
一旦項目被折疊,可以透過 itemsBeforeCollapse
和 itemsAfterCollapse
屬性來控制要顯示的項目數量。
點擊折疊指示器 -- 展開麵包屑
點擊折疊指示器將觸發 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 自訂屬性。
插槽
此元件沒有可用的插槽。