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

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

<article>
  <section class="markdown"><h1>Menu 导航菜单</h1>
    <section class="markdown"><p>为页面和功能提供导航的菜单列表。</p>
      <h2 id="何时使用"><span>何时使用</span>
        <a  class="anchor">#</a>
      </h2>
      <p>导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。</p>
      <p>更多布局和导航的范例可以参考：<a routerLink="/components/layout">通用布局</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-menu-demo-basic" [nzCode]="NzDemoMenuBasicCode">
        <nz-demo-menu-basic demo></nz-demo-menu-basic>
        <div intro>
          <p>水平的顶部导航菜单。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'内嵌菜单'" id="components-menu-demo-inline" [nzCode]="NzDemoMenuInlineCode">
        <nz-demo-menu-inline demo></nz-demo-menu-inline>
        <div intro>
          <p>垂直菜单，子菜单内嵌在菜单区域。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'缩起内嵌菜单'" id="components-menu-demo-collapsed" [nzCode]="NzDemoMenuCollapsedCode">
        <nz-demo-menu-collapsed demo></nz-demo-menu-collapsed>
        <div intro>
          <p>内嵌菜单可以被缩起/展开。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'只展开当前父级菜单'" id="components-menu-demo-expand" [nzCode]="NzDemoMenuExpandCode">
        <nz-demo-menu-expand demo></nz-demo-menu-expand>
        <div intro>
          <p>控制菜单开合，点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'垂直菜单'" id="components-menu-demo-vertical" [nzCode]="NzDemoMenuVerticalCode">
        <nz-demo-menu-vertical demo></nz-demo-menu-vertical>
        <div intro>
          <p>子菜单是弹出的形式。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'主题'" id="components-menu-demo-theme" [nzCode]="NzDemoMenuThemeCode">
        <nz-demo-menu-theme demo></nz-demo-menu-theme>
        <div intro>
          <p>内建了两套主题 <code>light|dark</code>默认 <code>light</code></p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'切换菜单类型'" id="components-menu-demo-dynamic" [nzCode]="NzDemoMenuDynamicCode">
        <nz-demo-menu-dynamic demo></nz-demo-menu-dynamic>
        <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><span>nz-menu</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzTheme</td>
          <td>主题颜色</td>
          <td>string: <code>light</code> <code>dark</code></td>
          <td></td>
          <td><code>light</code></td>
        </tr>
        <tr>
          <td>nzMode</td>
          <td>菜单类型，现在支持垂直、水平、和内嵌模式三种</td>
          <td>string: <code>vertical</code> <code>horizontal</code> <code>inline</code></td>
          <td></td>
          <td><code>vertical</code></td>
        </tr>
        <tr>
          <td>nzInlineCollapsed</td>
          <td>控制内嵌菜单的缩起/展开。</td>
          <td>Boolean</td>
          <td></td>
          <td><code>false</code></td>
        </tr>
        <tr>
          <td>nzClickActive</td>
          <td>点击后是否选中子菜单</td>
          <td>Boolean</td>
          <td></td>
          <td>true</td>
        </tr>
      </tbody>
    </table>
    <h3><span>nz-menu-submenu</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzOpen</td>
          <td>submenu是否展开，可双向绑定</td>
          <td>Boolean</td>
          <td></td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzOpenChange</td>
          <td>submenu展开关闭回调</td>
          <td>Func</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>[title]</td>
          <td>ng-content标示，用于放置submenu title内容</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
    <h3><span>nz-menu-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>[title]</td>
          <td>ng-content标示，用于放置menu-group title内容</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
    <h3><span>nz-menu-item</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzSelected</td>
          <td>当前菜单项是否被选中</td>
          <td>Boolean</td>
          <td></td>
          <td>false</td>
        </tr>
      </tbody>
    </table>
    <h3><span>nz-menu-item-divider</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <p>菜单子项目分隔线</p>
  </section>
</article>