@acpaas-ui/ngx-selectable-list 中文文档教程

Question

@acpaas-ui/ngx-selectable-list

该模块包含一个组件和一个指令。 该组件允许用户从列表中选择一个项目，可以通过单击选择该项目。 可以通过将 auiSelectableActions 指令添加到可聚焦元素来扩展该功能。 该指令让用户使用箭头键选择一个项目并使用回车键完成选择或使用转义键取消。

Usage

import { SelectableListModule } from '@acpaas-ui/ngx-selectable-list';

Documentation

访问我们的文档站点，获取完整的操作文档和指南

Selectable list module

API

Name	Default value	Description
@Input() items: any[];	null	Array of objects or flat array of strings (see label) to fill the selectable list.
@Input() index	0	The index of the active item in the list (note that the selectable list is not responsible for toggling through the list).
@Input() search: string;	''	String to highlight in all selectable list items.
@Input() label: string;	''	The selector when data is an array of objects (see items).
@Input() itemTemplate: TemplateRef<any>;	-	Pass in a template to give the list items of the selectable list a custom look.
@Output() selected: EventEmitter<any>;	-	Emits an event when the user has selected an item in the selectable list. The parameter of the function is the selected item.

Example

import { SelectableListModule } from '@acpaas-ui/ngx-selectable-list';

@NgModule({
    imports: [
        SelectableListModule
    ]
});

export class AppModule {};`

```
public index = 0;

public heroes = [
    { name: 'Spiderman' },
    { name: 'Wolverine' },
    { name: 'Iron man' }
];

public activeHero = this.heroes[this.index];

public onSelect(item) {
    this.index = this.heroes.findIndex(hero => hero.name === item.name);
    this.activeHero = item;
}

<h4>Select your hero</h4>
<aui-selectable-list [items]="heroes" [index]="index" (selected)="onSelect($event)">
   <ng-template let-item="item">
       Template for: <strong>{{ item.name }}</strong>
   </ng-template>
</aui-selectable-list>
<p><strong>Active hero</strong>: {{ activeHero.name }}</p>

auiSelectableActions directive

API

。将此指令绑定到可聚焦元素。

Name	Default value	Description
@Output() keyArrowUp: EventEmitter<any>;	-	Callback for the arrow up key
@Output() keyArrowDown: EventEmitter<any>;	-	Callback for the arrow down key
@Output() keyEnter: EventEmitter<any>;	-	Callback for the enter key
@Output() keyEscape: EventEmitter<any>;	-	Callback for the escape key

Example

在下面的示例中，我们将 auiSelectableActions 指令绑定到一个按钮（可聚焦元素）。 keyArrowDown 和 keyArrowUp 的回调让我们可以操纵 index 的值，这样我们就可以使用箭头键在可选列表中导航。 使用 keyEnter 我们定义所选值，使用 keyEscape 确保操作也可以取消。

要使此示例正常运行，您需要了解如何使用 Antwerp UI Flyout。 另请参阅 Antwerp UI 自动完成。

import { SelectableListModule } from '@acpaas-ui/ngx-selectable-list';
import { FlyoutModule } from '@acpaas-ui/ngx-flyout';

@NgModule({
    imports: [
        SelectableListModule,
        FlyoutModule
    ]
});

export class AppModule {};

public onKeyArrowUp() {
    this.index += -1; // Don't forget to check the minimum value (probably 0 or -1)
}

public onKeyArrowDown() {
    this.index += 1; // Don't forget to check the maximum value (probably the length of the heroes array - 1)
}

public onKeyEnter() {
    this.onSelect(this.heroes[this.index]);
}

public onKeyEscape() {
    console.log('Cancelled');
}

<div auiFlyout>
    <button type="button" class="button" auiFlyoutAction auiSelectableActions (keyArrowUp)="onKeyArrowUp()" (keyArrowDown)="onKeyArrowDown()" (keyEnter)="onKeyEnter()" (keyEscape)="onKeyEscape()">Heroes</button>
    <div auiFlyoutZone>
        <aui-selectable-list [items]="heroes" [index]="index" label="name" (selected)="onSelect($event)"></aui-selectable-list>
    </div>
</div>

Contributing

请访问我们的贡献指南，了解有关如何贡献的更多信息。