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

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

<article>
  <section class="markdown">
    <h1>Dropdown 下拉菜单</h1>
    <section class="markdown">
      <p>向下弹出的列表。</p>
      <h2 id="何时使用"><span>何时使用</span>
      </h2>
      <p>当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。</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]="12">
      <nz-code-box [nzTitle]="'基本'" id="components-dropdown-demo-basic" [nzCode]="NzDemoDropDownBasicCode">
        <nz-demo-dropdown-basic demo></nz-demo-dropdown-basic>
        <div intro>
          <p>最简单的下拉菜单。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'其他元素'" id="components-dropdown-demo-other" [nzCode]="NzDemoDropDownOtherCode">
        <nz-demo-dropdown-other demo></nz-demo-dropdown-other>
        <div intro>
          <p>分割线和不可用菜单项。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'触发事件'" id="components-dropdown-demo-trigger" [nzCode]="NzDemoDropDownTriggerCode">
        <nz-demo-dropdown-trigger demo></nz-demo-dropdown-trigger>
        <div intro>
          <p>点击菜单项后会触发事件。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'多级菜单'" id="components-dropdown-demo-cascading" [nzCode]="NzDemoDropDownCascadingCode">
        <nz-demo-dropdown-cascading demo></nz-demo-dropdown-cascading>
        <div intro>
          <p>传入的菜单里有多个层级。</p>
        </div>
      </nz-code-box>
    </div>
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'弹出位置'" id="components-dropdown-demo-position" [nzCode]="NzDemoDropDownPositionCode">
        <nz-demo-dropdown-position demo></nz-demo-dropdown-position>
        <div intro>
          <p>支持 6 个弹出位置。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'触发方式'" id="components-dropdown-demo-click" [nzCode]="NzDemoDropDownClickCode">
        <nz-demo-dropdown-click demo></nz-demo-dropdown-click>
        <div intro>
          <p>默认是移入触发菜单，可以点击触发。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'带下拉框的按钮'" id="components-dropdown-demo-button" [nzCode]="NzDemoDropDownButtonCode">
        <nz-demo-dropdown-button demo></nz-demo-dropdown-button>
        <div intro>
          <p>左边是按钮，右边是额外的相关功能菜单。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'菜单隐藏方式'" id="components-dropdown-demo-hide" [nzCode]="NzDemoDropDownHideCode">
        <nz-demo-dropdown-hide demo></nz-demo-dropdown-hide>
        <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="nz-dropdown"><span>nz-dropdown</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <div class="markdown">
      <blockquote>
        <b>注意：</b>需要在触发下拉菜单的元素上加入[nz-dropdown]的directive标记用于定位元素位置，属性如下
      </blockquote>
    </div>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>[nz-dropdown]</td>
          <td>用于定位触发下拉菜单的元素</td>
          <td>Directive</td>
          <td>-</td>
        </tr>
        <tr>
          <td>[nz-dropdown-custom]</td>
          <td>自定义下拉菜单内容，不可与menu混用</td>
          <td>ng-content</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzTrigger</td>
          <td>触发下拉的行为</td>
          <td>'click'|'hover'</td>
          <td>'hover'</td>
        </tr>
        <tr>
          <td>nzClickHide</td>
          <td>点击后是否隐藏菜单</td>
          <td>Boolean</td>
          <td>true</td>
        </tr>
        <tr>
          <td>nzVisible</td>
          <td>菜单是否显示</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzVisibleChange</td>
          <td>菜单显示状态改变时调用，参数为 nzVisible</td>
          <td>Function(visible)</td>
          <td></td>
        </tr>
        <tr>
          <td>nzPlacement</td>
          <td>菜单弹出位置：<code>bottomLeft</code><code>bottomCenter</code><code>bottomRight</code><code>topLeft</code><code>topCenter</code><code>topRight</code>
          </td>
          <td>String</td>
          <td><code>bottomLeft</code></td>
        </tr>
      </tbody>
    </table>
    <h3 id="nz-dropdown-button"><span>nz-dropdown-button</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzType</td>
          <td>按钮类型</td>
          <td>String</td>
          <td>'default'</td>
        </tr>
        <tr>
          <td>nzSize</td>
          <td>按钮大小</td>
          <td>String</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzClick</td>
          <td>点击左侧按钮的回调</td>
          <td>Function</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzTrigger</td>
          <td>触发下拉的行为</td>
          <td>'click'|'hover'</td>
          <td>'hover'</td>
        </tr>
        <tr>
          <td>nzClickHide</td>
          <td>点击后是否隐藏菜单</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzVisible</td>
          <td>菜单是否显示</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzVisibleChange</td>
          <td>菜单显示状态改变时调用，参数为 nzVisible</td>
          <td>Function</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzPlacement</td>
          <td>菜单弹出位置：<code>bottomLeft</code><code>bottomCenter</code><code>bottomRight</code><code>topLeft</code><code>topCenter</code><code>topRight</code>
          </td>
          <td>String</td>
          <td><code>bottomLeft</code></td>
        </tr>
      </tbody>
    </table>
    <p>菜单可由 <code>nz-menu</code>取得，菜单还包括菜单项 <code>nz-menu-item</code>分割线
      <code>nz-menu-divider</code>和 子菜单<code>nz-submenu</code></p>
  </section>

</article>