Блог

Используя angular dart, у меня есть диалоговое окно материала с основным списком в нем. Когда появится диалоговое окно, я хочу, чтобы конечный пользователь мог перемещаться по списку с помощью клавиш со стрелками (вверх / вниз).

 <modal *ngIf="visible" [visible]="visible">
    <material-dialog headered class="headered-dialog">
        <div header>
            <h1>List Demo</h1>
        </div>

        <form (ngSubmit)="onSubmit()" #heroForm="ngForm">
            <div class="list-body form-control">
                <ul>
                    <li *ngFor="let item of items; let i=index">
                        <div>{{item.name}}</div>
                    </li>
                </ul>
            </div>
        </form>

    </material-dialog>
</modal>
  

пакет: angular_components предоставляет MaterialListComponent и FocusListDirective , которые поддерживают навигацию вверх / вниз

https://dart-lang.github.io/angular_components/#/material_list

Вы можете использовать их вместе следующим образом

 <material-list focusList>
  <material-list-item *ngFor="let item of items; let i=index">
    <div>{{item.name}}</div>
  </material-list-item>
</material-list>
  

Никогда не пробовал, но вы также должны иметь возможность использовать FocusListDirective для любого элемента.

 <ul focusList>
  <li *ngFor="let item of items; let i=index">
    <div>{{item.name}}</div>
  </li>
</ul>