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

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

<article>

  <section class="markdown">
    <h1>Tabs 标签页</h1>
    <section class="markdown"><p>选项卡切换组件。</p>
      <h2 id="何时使用"><span>何时使用</span>
        <a  class="anchor">#</a>
      </h2>
      <p>提供平级的区域将大块内容进行收纳和展现，保持界面整洁。</p>
      <p>借鉴了Material Design中
        <a href="https://material.angular.io/components/tabs/api" target="_blank">Tabs</a>
        的代码设计
      </p>
    </section>
    <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2>
  </section>

  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="24">
      <nz-code-box [nzTitle]="'基本'" id="components-tabs-demo-basic" [nzCode]="NzDemoTabsBasicCode">
        <nz-demo-tabs-basic demo></nz-demo-tabs-basic>
        <div intro>
          <p>默认选中第一项。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'禁用'" id="components-tabs-demo-disabled" [nzCode]="NzDemoTabsDisabledCode">
        <nz-demo-tabs-disabled demo></nz-demo-tabs-disabled>
        <div intro>
          <p>禁用某一项。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'图标'" id="components-tabs-demo-icon" [nzCode]="NzDemoTabsIconCode">
        <nz-demo-tabs-icon demo></nz-demo-tabs-icon>
        <div intro>
          <p>有图标的标签。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'滑动'" id="components-tabs-demo-move" [nzCode]="NzDemoTabsMoveCode">
        <nz-demo-tabs-move demo></nz-demo-tabs-move>
        <div intro>
          <p>可以左右、上下滑动，容纳更多标签。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'附加内容'" id="components-tabs-demo-extra" [nzCode]="NzDemoTabsExtraCode">
        <nz-demo-tabs-extra demo></nz-demo-tabs-extra>
        <div intro>
          <p>可以在页签右边添加附加操作。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'迷你型'" id="components-tabs-demo-mini" [nzCode]="NzDemoTabsMiniCode">
        <nz-demo-tabs-mini demo></nz-demo-tabs-mini>
        <div intro>
          <p>用在弹出框等较狭窄的容器内。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'Tab位置'" id="components-tabs-demo-position" [nzCode]="NzDemoTabsPositionCode">
        <nz-demo-tabs-position demo></nz-demo-tabs-position>
        <div intro>
          <p>改变Tab位置。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'卡片式页签'" id="components-tabs-demo-card" [nzCode]="NzDemoTabsCardCode">
        <nz-demo-tabs-card demo></nz-demo-tabs-card>
        <div intro>
          <p>另一种样式的页签，不提供对应的垂直样式。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'新增和关闭页签'" id="components-tabs-demo-operation" [nzCode]="NzDemoTabsOperationCode">
        <nz-demo-tabs-operation demo></nz-demo-tabs-operation>
        <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="Tabs"><span>nz-tabset</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzSelectedIndex</td>
          <td>当前激活的Tab Index，支持双向绑定</td>
          <td>Number</td>
          <td>0</td>
        </tr>
        <tr>
          <td>nzSelectedIndexChange</td>
          <td>当前激活的Tab Index回调</td>
          <td>Func</td>
          <td></td>
        </tr>
        <tr>
          <td>nzSelectChange</td>
          <td>当前激活的Tab与Index值回调</td>
          <td>Func</td>
          <td></td>
        </tr>
        <tr>
          <td>nzShowPagination</td>
          <td>超出高度或宽度后是否显示滑动按钮</td>
          <td>Boolean</td>
          <td>true</td>
        </tr>
        <tr>
          <td>nzTabBarExtraTemplate</td>
          <td>用于指定 tab bar 上特定的额外的元素</td>
          <td>TemplateRef</td>
          <td>无</td>
        </tr>
        <tr>
          <td>#nzTabBarExtraContent</td>
          <td>tab bar 上额外的元素</td>
          <td>ng-template</td>
          <td>无</td>
        </tr>
        <tr>
          <td>nzType</td>
          <td>页签的基本样式，可选 <code>line</code>、<code>card</code> 类型
          </td>
          <td>String</td>
          <td>'line'</td>
        </tr>
        <tr>
          <td>nzSize</td>
          <td>大小，提供 <code>default</code> 和 <code>small</code> 两种大小
          </td>
          <td>String</td>
          <td>'default'</td>
        </tr>
        <tr>
          <td>nzAnimated</td>
          <td>是否使用动画切换 Tabs，在 <code>nzTabPosition=top|bottom</code> 时有效
          </td>
          <td>boolean | {{ '{' }}inkBar:boolean, tabPane:boolean{{ '}' }}</td>
          <td>true</td>
        </tr>
        <tr>
          <td>nzTabPosition</td>
          <td>页签位置，可选值有 <code>top</code> <code>right</code> <code>bottom</code> <code>left</code>
          </td>
          <td>String</td>
          <td>'top'</td>
        </tr>
      </tbody>
    </table>
    <h3 id="Tabs.TabPane"><span>nz-tab</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>#nzTabHeading</td>
          <td>选项卡头显示内容</td>
          <td>ng-template</td>
          <td>无</td>
        </tr>
        <tr>
          <td>nzDisabled</td>
          <td>是否可被选中</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzClick</td>
          <td>点击选中事件回调</td>
          <td>EventEmitter</td>
          <td></td>
        </tr>
        <tr>
          <td>nzSelect</td>
          <td>被选中后事件回调</td>
          <td>EventEmitter</td>
          <td></td>
        </tr>
        <tr>
          <td>nzDeselect</td>
          <td>不被选中事件回调</td>
          <td>EventEmitter</td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </section>
</article>