ng-ytl-zorro-antd/src/showcase/nz-demo-radio/nz-demo-radio.html

An enterprise-class UI components based on Ant Design and Angular

<article>
  <section class="markdown"><h1>Radio 单选框</h1>
    <section class="markdown"><p>单选框。</p>
      <h2 id="何时使用"><span>何时使用</span><a  class="anchor">#</a></h2>
      <ul>
        <li><p>用于在多个备选项中选中单个状态。</p></li>
        <li><p>和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。</p></li>
      </ul>
    </section>
    <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2>
  </section>
  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'RadioGroup组合'" id="components-radio-demo-radio-group" [nzCode]="NzDemoRadioGroupCode">
        <nz-demo-radio-group demo></nz-demo-radio-group>
        <div intro>
          <p>一组互斥的 Radio 配合使用。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'按钮样式'" id="components-radio-demo-radio-button-group" [nzCode]="NzDemoRadioButtonGroupCode">
        <nz-demo-radio-button-group demo></nz-demo-radio-button-group>
        <div intro>
          <p>按钮样式的单选组合。</p>
        </div>
      </nz-code-box>
    </div>
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'不可用'" id="components-radio-demo-radiogroup-disabled" [nzCode]="NzDemoRadioGroupDisabledCode">
        <nz-demo-radio-group-disabled demo></nz-demo-radio-group-disabled>
        <div intro>
          <p>Radio不可用</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'大小'" id="components-radio-demo-radio-button-group-size" [nzCode]="NzDemoRadioButtonGroupSizeCode">
        <nz-demo-radio-button-group-size demo></nz-demo-radio-button-group-size>
        <div intro>
          <p>大中小三种组合，可以和表单输入框进行对应配合。</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <section class="markdown api-container"><h2 id="API"><span>API</span><!-- <a class="anchor">#</a> --></h2>
    <h3 id="RadioGroup"><span>nz-radio-group</span><!-- <a class="anchor">#</a> --></h3>
    <p>单选框组合，用于包裹一组 <code>nz-radio/nz-radio-button</code>。</p>
    <table>
      <thead>
      <tr>
        <th>参数</th>
        <th>说明</th>
        <th>类型</th>
        <th>介绍</th>
        <th>默认值</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>ngModel</td>
        <td>用于设置当前选中的值</td>
        <td>String</td>
        <td>可以双向绑定</td>
        <td>无</td>
      </tr>
      <tr>
        <td>nzSize</td>
        <td>大小，只对按钮样式生效</td>
        <td>String</td>
        <td>可选<code>large</code> <code>default</code> <code>small</code></td>
        <td><code>default</code></td>
      </tr>
      </tbody>
    </table>
    <h3 id="Radio"><span>[nz-radio]/[nz-radio-button](必须配合nz-radio-group使用)</span><!-- <a class="anchor">#</a> --></h3>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzValue</td>
          <td>当前Radio标示</td>
          <td>String</td>
          <td></td>
        </tr>
        <tr>
          <td>nzDisabled</td>
          <td>当前Radio是否不可选</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
      </tbody>
    </table>
  </section>
</article>