ion-radio
單選按鈕應在單選按鈕群組中使用。按下單選按鈕將選取它，並取消選取先前選取的單選按鈕（如果有的話）。也可以透過將父單選按鈕群組的 value 屬性設定為單選按鈕的值來以程式方式選取它們。
當單選按鈕在單選按鈕群組內時，任何時候只會選取一個單選按鈕。如果應選取多個項目，則應改用核取方塊。可以在群組內停用單選按鈕，以防止與它們互動。
基本用法
標籤放置
開發人員可以使用 labelPlacement 屬性來控制標籤相對於控制項的放置方式。此屬性會鏡像 flexbox flex-direction 屬性。
物件值參照
預設情況下，單選按鈕群組會使用嚴格相等 (===) 來判斷是否已選取選項。可以透過將屬性名稱或函式提供給 compareWith 屬性來覆寫此設定。
主控台從上述範例記錄時，主控台訊息將會顯示在此處。對齊
開發人員可以使用 alignment 屬性來控制標籤和控制項在交叉軸上的對齊方式。此屬性會鏡像 flexbox align-items 屬性。
堆疊的單選按鈕可以使用 alignment 屬性對齊。當標籤和控制項需要在水平方向上置中時，這可能會很有用。
對齊方式
開發人員可以使用 justify 屬性來控制標籤和控制項在一行上的包裝方式。此屬性會鏡像 flexbox justify-content 屬性。
ion-item 只會在示範中用於強調 justify 的運作方式。它不是 justify 正常運作所必需的。
取消選取單選按鈕
預設情況下，一旦選取單選按鈕，就無法取消選取；再次按下它會保持選取狀態。可以使用父單選按鈕群組上的 allowEmptySelection 屬性修改此行為，這會啟用取消選取單選按鈕。
主題設定
色彩
CSS 自訂屬性
CSS 陰影部分
從舊版單選按鈕語法移轉
Ionic 7.0 中引入了更簡單的單選按鈕語法。此新語法減少了設定單選按鈕所需的樣板程式碼、解決了協助工具問題，並改善了開發人員體驗。
開發人員可以一次執行一個單選按鈕的移轉。雖然開發人員可以繼續使用舊版語法，但我們建議盡快移轉。
使用現代語法
使用現代語法包括移除 ion-label 並將標籤直接傳遞到 ion-radio 內部。可以使用 ion-radio 上的 labelPlacement 屬性來設定標籤的放置位置。可以使用 ion-radio 上的 justify 屬性來控制標籤和控制項在一行上的包裝方式。
- JavaScript
- Angular
- React
- Vue
<!-- Basic -->
<!-- Before -->
<ion-item>
<ion-label>Radio Label</ion-label>
<ion-radio></ion-radio>
</ion-item>
<!-- After -->
<ion-item>
<ion-radio>Radio Label</ion-radio>
</ion-item>
<!-- Fixed Labels -->
<!-- Before -->
<ion-item>
<ion-label position="fixed">Radio Label</ion-label>
<ion-radio></ion-radio>
</ion-item>
<!-- After -->
<ion-item>
<ion-radio label-placement="fixed">Radio Label</ion-radio>
</ion-item>
<!-- Radio at the start of line, Label at the end of line -->
<!-- Before -->
<ion-item>
<ion-label slot="end">Radio Label</ion-label>
<ion-radio></ion-radio>
</ion-item>
<!-- After -->
<ion-item>
<ion-radio label-placement="end">Radio Label</ion-radio>
</ion-item>
<!-- Basic -->
<!-- Before -->
<ion-item>
<ion-label>Radio Label</ion-label>
<ion-radio></ion-radio>
</ion-item>
<!-- After -->
<ion-item>
<ion-radio>Radio Label</ion-radio>
</ion-item>
<!-- Fixed Labels -->
<!-- Before -->
<ion-item>
<ion-label position="fixed">Radio Label</ion-label>
<ion-radio></ion-radio>
</ion-item>
<!-- After -->
<ion-item>
<ion-radio labelPlacement="fixed">Radio Label</ion-radio>
</ion-item>
<!-- Radio at the start of line, Label at the end of line -->
<!-- Before -->
<ion-item>
<ion-label slot="end">Radio Label</ion-label>
<ion-radio></ion-radio>
</ion-item>
<!-- After -->
<ion-item>
<ion-radio labelPlacement="end">Radio Label</ion-radio>
</ion-item>
{/* Basic */}
{/* Before */}
<IonItem>
<IonLabel>Radio Label</IonLabel>
<IonRadio></IonRadio>
</IonItem>
{/* After */}
<IonItem>
<IonRadio>Radio Label</IonRadio>
</IonItem>
{/* Fixed Labels */}
{/* Before */}
<IonItem>
<IonLabel position="fixed">Radio Label</IonLabel>
<IonRadio></IonRadio>
</IonItem>
{/* After */}
<IonItem>
<IonRadio labelPlacement="fixed">Radio Label</IonRadio>
</IonItem>
{/* Radio at the start of line, Label at the end of line */}
{/* Before */}
<IonItem>
<IonLabel slot="end">Radio Label</IonLabel>
<IonRadio></IonRadio>
</IonItem>
{/* After */}
<IonItem>
<IonRadio labelPlacement="end">Radio Label</IonRadio>
</IonItem>
<!-- Basic -->
<!-- Before -->
<ion-item>
<ion-label>Radio Label</ion-label>
<ion-radio></ion-radio>
</ion-item>
<!-- After -->
<ion-item>
<ion-radio>Radio Label</ion-radio>
</ion-item>
<!-- Fixed Labels -->
<!-- Before -->
<ion-item>
<ion-label position="fixed">Radio Label</ion-label>
<ion-radio></ion-radio>
</ion-item>
<!-- After -->
<ion-item>
<ion-radio label-placement="fixed">Radio Label</ion-radio>
</ion-item>
<!-- Radio at the start of line, Label at the end of line -->
<!-- Before -->
<ion-item>
<ion-label slot="end">Radio Label</ion-label>
<ion-radio></ion-radio>
</ion-item>
<!-- After -->
<ion-item>
<ion-radio label-placement="end">Radio Label</ion-radio>
</ion-item>
在過去版本的 Ionic 中，ion-item 是 ion-radio 正常運作所必需的。從 Ionic 7.0 開始，只有當項目放置在 ion-list 中時，才應在 ion-item 中使用 ion-radio。此外，ion-item 不再是 ion-radio 正常運作所必需的。
使用舊版語法
Ionic 使用啟發法來偵測應用程式是否使用現代單選按鈕語法。在某些情況下，最好繼續使用舊版語法。開發人員可以將 ion-radio 上的 legacy 屬性設定為 true，以強制該單選按鈕實例使用舊版語法。
屬性
alignment
| 描述 | 如何控制單選按鈕和標籤在交叉軸上的對齊方式。"start"：標籤和控制項將會顯示在 LTR 中交叉軸的左側，而在 RTL 中則顯示在右側。"center"：標籤和控制項將會顯示在 LTR 和 RTL 中交叉軸的中心。設定此屬性會將單選按鈕的 display 變更為 block。 |
| 屬性 | alignment |
| 類型 | "center" ｜ "start" ｜ undefined |
| 預設 | undefined |
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 |
justify
| 描述 | 如何在同一行中包裝標籤和單選按鈕。"start"：標籤和單選按鈕會顯示在 LTR 中的左側，而在 RTL 中顯示在右側。"end"：標籤和單選按鈕會顯示在 LTR 中的右側，而在 RTL 中顯示在左側。"space-between"：標籤和單選按鈕會顯示在行的相反兩端，且兩個元素之間有空格。設定此屬性會將單選按鈕的 display 變更為 block。 |
| 屬性 | justify |
| 類型 | "end" ｜ "space-between" ｜ "start" ｜ undefined |
| 預設 | undefined |
labelPlacement
| 描述 | 標籤相對於單選按鈕的放置位置。"start"：標籤會顯示在 LTR 中單選按鈕的左側，而在 RTL 中則顯示在右側。"end"：標籤會顯示在 LTR 中單選按鈕的右側，而在 RTL 中則顯示在左側。"fixed"：標籤的行為與 "start" 相同，但它也具有固定寬度。長文字會使用省略符號 ("...") 截斷。"stacked"：標籤將會顯示在單選按鈕上方，無論方向為何。可以使用 alignment 屬性來控制標籤的對齊方式。 |
| 屬性 | label-placement |
| 類型 | "end" ｜ "fixed" ｜ "stacked" ｜ "start" |
| 預設 | 'start' |
mode
| 描述 | 模式決定要使用的平台樣式。 |
| 屬性 | mode |
| 類型 | "ios" ｜ "md" |
| 預設 | undefined |
名稱
| 描述 | 控制元件的名稱，將會與表單資料一同提交。 |
| 屬性 | 名稱 |
| 類型 | 字串 |
| 預設 | this.inputId |
值
| 描述 | 單選按鈕的值。 |
| 屬性 | 值 |
| 類型 | 任何 |
| 預設 | undefined |
事件
| 名稱 | 描述 | 冒泡 |
|---|---|---|
ionBlur | 當單選按鈕失去焦點時觸發。 | true |
ionFocus | 當單選按鈕獲得焦點時觸發。 | true |
方法
此元件沒有可用的公開方法。
CSS 陰影部分
| 名稱 | 描述 |
|---|---|
容器 | 單選標記的容器。 |
標籤 | 描述單選按鈕的標籤文字。 |
標記 | 用於指示選取狀態的勾選記號或圓點。 |
CSS 自訂屬性
- iOS
- MD
| 名稱 | 描述 |
|---|---|
--border-radius | 單選按鈕的邊框圓角 |
--color | 單選按鈕的顏色 |
--color-checked | 已選取單選按鈕的顏色 |
--inner-border-radius | 內部已選取單選按鈕的邊框圓角 |
| 名稱 | 描述 |
|---|---|
--border-radius | 單選按鈕的邊框圓角 |
--color | 單選按鈕的顏色 |
--color-checked | 已選取單選按鈕的顏色 |
--inner-border-radius | 內部已選取單選按鈕的邊框圓角 |
插槽
| 名稱 | 描述 |
|---|---|
| `` | 與單選按鈕相關聯的標籤文字。使用 "labelPlacement" 屬性來控制標籤相對於單選按鈕的放置位置。 |