ion-segment
分段會在水平列中顯示一組相關的按鈕，有時稱為分段控制項。它們可以顯示在工具列或主要內容中。
它們的功能類似於分頁，選擇一個分段會取消選擇所有其他分段。當點擊控制項應在頁面之間導覽時，應使用分頁而不是分段。分段適用於在內容中切換不同檢視。
基本用法
分段包含分段按鈕，每個按鈕都有 value 屬性。設定分段上的 value 屬性以符合按鈕的值，即可選取該按鈕。分段也可以停用，以防止使用者與它們互動。
可捲動分段
預設情況下，分段不可捲動。每個分段按鈕都有固定的寬度，寬度由分段按鈕的數量除以螢幕寬度來決定。這可確保每個分段按鈕都能顯示在螢幕上，而無需捲動。因此，某些標籤較長的分段按鈕可能會被截斷。為了避免這種情況，我們建議使用較短的標籤，或將 scrollable 屬性設定為 true 來切換到可捲動分段。這將使分段水平捲動，但允許每個分段按鈕具有可變的寬度。
工具列中的分段
可滑動分段
每個分段按鈕都可以與一個分段內容元素相關聯，該元素會在分段處於活動狀態時顯示。透過這種方法，每個分段的內容都可以在分段之間滑動或捲動，並且分段將會更新以反映目前可見的內容。
如果在使用可滑動分段時，未將初始 value 指派給 ion-segment，則分段預設為第一個分段按鈕的值。
當與可滑動分段一起使用時，無法停用分段按鈕。
佈景主題
顏色
CSS 自訂屬性
協助工具
鍵盤互動
此元件具有完整的鍵盤支援，可在 ion-segment-button 元素之間導覽和選取。預設情況下，鍵盤導覽只會聚焦 ion-segment-button 元素，但您可以使用 selectOnFocus 屬性，以確保它們在聚焦時也會被選取。下表詳細說明了每個按鍵的作用
| 按鍵 | 描述 |
|---|---|
| 向右箭頭 | 聚焦下一個可聚焦的元素。 |
| 向左箭頭 | 聚焦上一個可聚焦的元素。 |
| Home | 聚焦第一個可聚焦的元素。 |
| End | 聚焦最後一個可聚焦的元素。 |
| 空格鍵 或 Enter 鍵 | 選取目前已聚焦的元素。 |
介面
SegmentChangeEventDetail
interface SegmentChangeEventDetail {
value?: string;
}
SegmentCustomEvent
雖然不是必需的，但可以使用此介面代替 CustomEvent 介面，以便更強類型化由此元件發出的 Ionic 事件。
interface SegmentCustomEvent extends CustomEvent {
target: HTMLIonSegmentElement;
detail: SegmentChangeEventDetail;
}
屬性
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 |
mode
| 描述 | 模式決定要使用哪個平台樣式。 |
| 屬性 | mode |
| 類型 | "ios" ｜ "md" |
| 預設值 | undefined |
scrollable
| 描述 | 如果為 true，則分段按鈕將會溢位，並且使用者可以滑動來查看它們。此外，這將會停用在按鈕之間拖曳指示器的手勢，以便滑動查看隱藏的按鈕。 |
| 屬性 | scrollable |
| 類型 | boolean |
| 預設值 | false |
selectOnFocus
| 描述 | 如果為 true，則使用鍵盤導覽到 ion-segment-button 會聚焦並選取元素。如果為 false，則鍵盤導覽只會聚焦 ion-segment-button 元素。 |
| 屬性 | select-on-focus |
| 類型 | boolean |
| 預設值 | false |
swipeGesture
| 描述 | 如果為 true，則使用者將能夠在分段按鈕之間滑動以啟用它們。 |
| 屬性 | swipe-gesture |
| 類型 | boolean |
| 預設值 | true |
value
| 描述 | 分段的值。 |
| 屬性 | value |
| 類型 | number ｜ string ｜ undefined |
| 預設值 | undefined |
事件
| 名稱 | 描述 | 冒泡 |
|---|---|---|
ionChange | 當值屬性已變更，且任何拖曳指標已從 ion-segment 釋放時發出。以程式設計方式設定 value 屬性時，不會發出此事件。 | true |
方法
此元件沒有可用的公用方法。
CSS 陰影部分
此元件沒有可用的 CSS 陰影部分。
CSS 自訂屬性
- iOS
- MD
| 名稱 | 描述 |
|---|---|
--background | 分段按鈕的背景 |
| 名稱 | 描述 |
|---|---|
--background | 分段按鈕的背景 |
插槽
此元件沒有可用的插槽。