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

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

<article>
  <section class="markdown"><h1>Breadcrumb 面包屑</h1>
    <section class="markdown"><p>显示当前页面在系统层级结构中的位置，并能向上返回。</p>
      <h2 id="何时使用"><span>何时使用</span>
        <a  class="anchor">#</a>
      </h2>
      <ul>
        <li><p>当系统拥有超过两级以上的层级结构时；</p></li>
        <li><p>当需要告知用户『你在哪里』时；</p></li>
        <li><p>当需要向上导航的功能时。</p></li>
        <li><p>breadcrumb中的a标签可以与<a href="https://v2.angular.cn/docs/ts/latest/api/router/index/RouterLinkActive-directive.html" target="_blank">RouterLinkActive</a>结合使用</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-breadcrumb-demo-basic" [nzCode]="NzDemoBreadCrumbBasicCode">
        <nz-demo-breadcrumb-basic demo></nz-demo-breadcrumb-basic>
        <div intro>
          <p>最简单的用法。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'分隔符'" id="components-breadcrumb-demo-separator" [nzCode]="NzDemoBreadCrumbSeparatorCode">
        <nz-demo-breadcrumb-separator demo></nz-demo-breadcrumb-separator>
        <div intro>
          <p>使用 <code>nzSeparator="'&gt;'"</code>可以自定义分隔符。</p>
        </div>
      </nz-code-box>
    </div>
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'带有图标的'" id="components-breadcrumb-demo-icon" [nzCode]="NzDemoBreadCrumbIconCode">
        <nz-demo-breadcrumb-icon demo></nz-demo-breadcrumb-icon>
        <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>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzSeparator</td>
          <td>分隔符自定义</td>
          <td>String</td>
          <td></td>
          <td>'/'</td>
        </tr>
      </tbody>
    </table>
  </section>
</article>