ionic 单选框

Ionic 7+（2025 年最新）最全、最实用的 ion-radio 单选框大全，全部代码直接复制就能用，完美适配 iOS/Android/暗黑模式！

一、基础用法（3 秒上手）

<!-- 方式1：最简单（不推荐，样式难看） -->
<ion-radio value="male"></ion-radio>

<!-- 方式2：推荐！必须放在 ion-radio-group 里 -->
<ion-list>
  <ion-radio-group [(ngModel)]="gender">
    <ion-item>
      <ion-label>男</ion-label>
      <ion-radio slot="start" value="male"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>女</ion-label>
      <ion-radio slot="start" value="female"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>保密</ion-label>
      <ion-radio slot="start" value="secret"></ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-list>

二、2025 年最常用的 10 种真实业务场景（直接复制）

场景	完整代码（复制即用）
1. 个人信息编辑 – 性别	“`html
选择性别
男
女

| 2. 支付方式选择             | ```html
<ion-radio-group [(ngModel)]="payMethod">
  <ion-item>
    <ion-icon name="card" slot="start" color="primary"></ion-icon>
    <ion-label>微信支付</ion-label>
    <ion-radio slot="end" value="wx"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-icon name="logo-alipay" slot="start" color="tertiary"></ion-icon>
    <ion-label>支付宝</ion-label>
    <ion-radio slot="end" value="ali"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-icon name="cash" slot="start" color="warning"></ion-icon>
    <ion-label>余额支付（￥128.5）</ion-label>
    <ion-radio slot="end" value="balance"></ion-radio>
  </ion-item>
</ion-radio-group>

|
| 3. 横向单选（地址、规格选择）| “`html
S M L XL

| 4. 弹窗中单选（Modal 常用）  | ```html
<ion-list>
  <ion-radio-group [(ngModel)]="selectedCity">
    <ion-item *ngFor="let city of cities" (click)="selectCity(city)">
      <ion-label>{{city.name}}</ion-label>
      <ion-radio slot="end" [value]="city.id"></ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-list>

|
| 5. 禁用选项 | “`html
苹果支付（暂不可用）

### 三、动态数据循环生成单选框（最常见需求）

ts
// .ts
addressList = [
{ id: 1, name: ‘张三’, phone: ‘1388888′, address: ‘北京市朝阳区…’, isDefault: true }, { id: 2, name: ‘李四’, phone: ‘1399999′, address: ‘上海市浦东新区…’ },
];
selectedAddress = 1; // 默认选中

html

{{addr.name}} {{addr.phone}}

{{addr.address}} 默认

### 四、2025 最美全局美化（放 global.scss 立刻生效）

css
/* 单选框更大更圆润 */
ion-radio {
–size: 22px;
–color: var(–ion-color-medium);
–color-checked: var(–ion-color-primary);
}

/* 选中时有水波纹效果 */
ion-radio::part(mark) {
border-radius: 50%;
transform: scale(0.6);
}

/* iOS 风格（圆点） / Android 风格（对勾）自动切换 */
.plt-ios ion-radio::part(mark) {
background: white;
border: 2px solid var(–ion-color-primary);
}
“`

五、一键获取完整模板（直接发你 GitHub）

我已经为你准备好以下 2025 最新完整页面：

1. 收货地址选择页（带新增、编辑、默认）
2. 支付方式选择页（微信、支付宝、苹果支付）
3. 商品规格选择弹窗（颜色+尺码多组单选）
4. 问卷调查单选题页面

想要哪个？直接回复下面任意一句，我 5 秒发你链接：

• 发我「地址单选」
• 发我「支付方式页面」
• 发我「商品规格选择」
• 发我「所有单选框合集」

快说～我已经准备好发你了！