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

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

<article>
  <section class="markdown"><h1>Checkbox 多选框</h1>
    <section class="markdown"><p>多选框。</p>
      <h2 id="何时使用"><span>何时使用</span>
        <a  class="anchor">#</a>
      </h2>
      <ul>
        <li><p>在一组可选项中进行多项选择时；</p></li>
        <li><p>单独使用可以表示两种状态之间的切换，和 <code>switch</code> 类似。区别在于切换 <code>switch</code> 会直接触发状态改变，而<code>checkbox</code>一般用于状态标记，需要和提交操作配合。
        </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]="'基本用法'" id="components-checkbox-demo-basic" [nzCode]="NzDemoCheckboxBasicCode">
        <nz-demo-checkbox-basic demo></nz-demo-checkbox-basic>
        <div intro>
          <p>简单的checkbox</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'和外部组件通信'" id="components-checkbox-demo-controller" [nzCode]="NzDemoCheckboxControllerCode">
        <nz-demo-checkbox-controller demo></nz-demo-checkbox-controller>
        <div intro>
          <p>联动 checkbox。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'全选'" id="components-checkbox-demo-indeterminate" [nzCode]="NzDemoCheckboxIndeterminateCode">
        <nz-demo-checkbox-indeterminate demo></nz-demo-checkbox-indeterminate>
        <div intro>
          <p>在实现全选效果时，你可能会用到 <code>nzIndeterminate</code> 属性。</p>
        </div>
      </nz-code-box>
    </div>
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'不可用'" id="components-checkbox-demo-disable" [nzCode]="NzDemoCheckboxDisabledCode">
        <nz-demo-checkbox-disabled demo></nz-demo-checkbox-disabled>
        <div intro>
          <p>checkbox不可用</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'Checkbox 组'" id="components-checkbox-demo-group" [nzCode]="NzDemoCheckboxGroupCode">
        <nz-demo-checkbox-group demo></nz-demo-checkbox-group>
        <div intro>
          <p>方便的从数组生成 Checkbox 组。</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="Checkbox"><span>[nz-checkbox]</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <p>[nz-checkbox]一般配合label一起使用，具体见demo</p>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>双向绑定</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>ngModel</td>
          <td>指定当前是否选中</td>
          <td>Boolean</td>
          <td>是</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzIndeterminate</td>
          <td>设置 indeterminate 状态，只负责样式控制</td>
          <td>Boolean</td>
          <td>否</td>
          <td>false</td>
        </tr>
      </tbody>
    </table>
    <h3 id="Checkbox Group"><span>nz-checkbox-group</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>双向绑定</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>ngModel</td>
          <td>所有选项</td>
          <td>array</td>
          <td>是</td>
          <td>[]</td>
        </tr>
        <tr>
          <td>nzDisabled</td>
          <td>是否可选</td>
          <td>Boolean</td>
          <td>否</td>
          <td>false</td>
        </tr>
      </tbody>
    </table>
  </section>
</article>