ng-ytl-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
216 lines (215 loc) • 7.82 kB
HTML
<article>
<section class="markdown"><h1>Select 选择器</h1>
<section class="markdown"><p>类似 Select2 的选择器。</p>
<h2 id="何时使用"><span>何时使用</span>
<a class="anchor">#</a>
</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-select-demo-basic" [nzCode]="NzDemoSelectBasicCode">
<nz-demo-select-basic demo></nz-demo-select-basic>
<div intro>
<p>基本使用。</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'带搜索框'" id="components-select-demo-search" [nzCode]="NzDemoSelectSearchCode">
<nz-demo-select-search demo></nz-demo-select-search>
<div intro>
<p>展开后可对选项进行搜索。</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'搜索框'" id="components-select-demo-search-change" [nzCode]="NzDemoSelectSearchChangeCode">
<nz-demo-select-search-change demo></nz-demo-select-search-change>
<div intro>
<p>搜索和远程数据结合，通过设置 <code>nzFilter</code>为 <code>false</code>关闭只显示匹配选项</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'标签'" id="components-select-demo-tag" [nzCode]="NzDemoSelectTagCode">
<nz-demo-select-tag demo></nz-demo-select-tag>
<div intro>
<p>tags select，随意输入的内容，回车键新增tag</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'下拉模板'" id="components-select-demo-template" [nzCode]="NzDemoSelectTemplateCode">
<nz-demo-select-template demo></nz-demo-select-template>
<div intro>
<p>可以通过 <code>#nzOptionTemplate</code> 来定制下拉选项模板</p>
</div>
</nz-code-box>
</div>
<div nz-col [nzSpan]="12">
<nz-code-box [nzTitle]="'三种大小'" id="components-select-demo-size" [nzCode]="NzDemoSelectSizeCode">
<nz-demo-select-size demo></nz-demo-select-size>
<div intro>
<p>种大小的选择框，当 nzSize 分别为 <code>large</code>和 <code>small</code>时，输入框高度为 <code>32px</code>和 <code>22px</code>，默认高度为
<code>28px</code></p></div>
</nz-code-box>
<nz-code-box [nzTitle]="'多选'" id="components-select-demo-multiple" [nzCode]="NzDemoSelectMultipleCode">
<nz-demo-select-multiple demo></nz-demo-select-multiple>
<div intro>
<p>多选，从已有条目中选择（scroll the menu）</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'多选搜索框'" id="components-select-demo-multiple-change" [nzCode]="NzDemoSelectMultipleChangeCode">
<nz-demo-select-multiple-change demo></nz-demo-select-multiple-change>
<div intro>
<p>多选搜索框和远程数据结合，注意此时需要保留未列在当前选项中但已被加入多选框中的数据，需要添加 <code>nzKeepUnListOptions</code>属性</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'滚动加载'" id="components-select-demo-pagination" [nzCode]="NzDemoSelectPaginationCode">
<nz-demo-select-pagination demo></nz-demo-select-pagination>
<div intro>
<p>利用 <code>nzScrollToBottom</code> 滚动到底部时动态加载选项</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="Select props"><span>nz-select</span>
<!-- <a class="anchor">#</a> -->
</h3>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>ngModel</td>
<td>指定当前选中的条目，支持双向绑定</td>
<td>
Array（多选）/String/Object（单选）
</td>
<td>无</td>
</tr>
<tr>
<td>nzSearchChange</td>
<td>搜索内容变化回调函数，参数为搜索内容</td>
<td>
Func
</td>
<td>无</td>
</tr>
<tr>
<td>nzMode</td>
<td>设置 Select 的模式</td>
<td>
'multiple' | 'tags'
</td>
<td>-</td>
</tr> <tr>
<td>nzOpenChange</td>
<td>下拉菜单打开关闭回调函数</td>
<td>
Func
</td>
<td>无</td>
</tr>
<!--<tr>-->
<!--<td>nzMultiple</td>-->
<!--<td>支持多选</td>-->
<!--<td>Boolean</td>-->
<!--<td>false</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>nzTags</td>-->
<!--<td>Tags模式</td>-->
<!--<td>Boolean</td>-->
<!--<td>false</td>-->
<!--</tr>-->
<tr>
<td>nzFilter</td>
<td>是否根据输入过滤选项</td>
<td>Boolean</td>
<td>true</td>
</tr>
<tr>
<td>nzKeepUnListOptions</td>
<td>当添加该属性时，将保留不在当前选项框但已被选择的数据，仅对多选有效</td>
<td>attribute</td>
<td>-</td>
</tr>
<tr>
<td>nzAllowClear</td>
<td>当添加该属性时，支持清除, 单选模式有效</td>
<td>attribute</td>
<td>-</td>
</tr>
<tr>
<td>nzScrollToBottom</td>
<td>下拉菜单滚动到底部回调，可用于作为动态加载的触发条件</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>nzPlaceHolder</td>
<td>选择框默认文字</td>
<td>String</td>
<td>无</td>
</tr>
<tr>
<td>nzShowSearch</td>
<td>是否启用搜索框</td>
<td>Boolean</td>
<td>false</td>
</tr>
<tr>
<td>nzNotFoundContent</td>
<td>当下拉列表为空时显示的内容</td>
<td>String</td>
<td>'Not Found'</td>
</tr>
</tbody>
</table>
<h3 id="Option props"><span>nz-option</span>
<!-- <a class="anchor">#</a> -->
</h3>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>nzLabel</td>
<td>用于显示展示的option内容</td>
<td>String</td>
<td></td>
</tr>
<tr>
<td>#nzOptionTemplate</td>
<td>用于定制下拉部分option的显示</td>
<td>ng-template</td>
<td></td>
</tr>
<tr>
<td>nzValue</td>
<td>option的value值，与nz-select选择option后的ngModel属性对应</td>
<td>String/Object</td>
<td>-</td>
</tr>
<tr>
<td>nzDisabled</td>
<td>是否禁用</td>
<td>Boolean</td>
<td>false</td>
</tr>
</tbody>
</table>
</section>
</article>