Ngx-Bootstrap - Выпадающие списки
Выпадающий компонент ngx-bootstrap является переключаемым и обеспечивает контекстное наложение для отображения списка ссылок и т. д. С помощью директив раскрывающегося списка мы можем сделать выпадающие списки интерактивными.
BsDropdownDirective
селектор
[bsDropdown],[dropdown]
Входы
autoClose - boolean, Указывает, что раскрывающийся список будет закрыт при щелчке по элементу или документу и после нажатия ESC
container - string, селектор, определяющий элемент, к которому должно быть добавлено всплывающее окно.
dropup - boolean, этот атрибут указывает, что раскрывающийся список должен открываться вверх.
insideClick - boolean, этот атрибут указывает, что раскрывающийся список не должен закрываться при нажатии кнопки мыши, если для параметра autoClose установлено значение true.
isAnimated - boolean, указывает, что выпадающий список будет анимирован
isDisabled - логическое, отключает раскрывающееся меню и скрывает раскрывающееся меню, если оно открыто
isOpen - boolean, Возвращает, отображается ли всплывающее окно в данный момент
placement- строка, размещение поповера. Принимает: «сверху», «снизу», «слева», «справа».
triggers- строка, указывает события, которые должны запускаться. Поддерживает список имен событий, разделенных пробелами.
Выходы
isOpenChange - Выдает событие при изменении isOpen
onHidden - Выдает событие, когда всплывающее окно скрыто
onShown - Выдает событие, когда отображается всплывающее окно
Методы
show()- Открывает всплывающее окно элемента. Это считается «ручным» запуском всплывающего окна.
hide()- Закрывает всплывающее окно элемента. Это считается «ручным» запуском всплывающего окна.
toggle()- Переключает всплывающее окно элемента. Это считается «ручным» запуском всплывающего окна.
setConfig() - Установить конфиг для поповера
пример
Поскольку мы собираемся использовать раскрывающиеся списки, нам нужно обновить app.module.ts, используемый в главе ngx-bootstrap DatePicker, чтобы использоватьBsDropdownModule и BsDropdownConfig.
Обновите app.module.ts, чтобы использовать BsDropdownModule и BsDropdownConfig.
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { BsDropdownModule,BsDropdownConfig } from 'ngx-bootstrap/dropdown';
@NgModule({
declarations: [
AppComponent,
TestComponent
],
imports: [
BrowserAnimationsModule,
BrowserModule,
AccordionModule,
AlertModule,
ButtonsModule,
FormsModule,
CarouselModule,
CollapseModule,
BsDatepickerModule.forRoot(),
BsDropdownModule
],
providers: [AlertConfig, BsDatepickerConfig, BsDropdownConfig],
bootstrap: [AppComponent]
})
export class AppModule { }
Обновите test.component.html, чтобы использовать раскрывающиеся списки.
test.component.html
<div class="btn-group" dropdown #dropdown="bs-dropdown" [autoClose]="false">
<button id="button-basic" dropdownToggle type="button"
class="btn btn-primary dropdown-toggle"
aria-controls="dropdown-basic">
Menu <span class="caret"></span>
</button>
<ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
role="menu" aria-labelledby="button-basic">
<li role="menuitem"><a class="dropdown-item" href="#">File</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Edit</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Search</a></li>
<li class="divider dropdown-divider"></li>
<li role="menuitem"><a class="dropdown-item" href="#">Recents</a>
</li>
</ul>
</div>
<button type="button" class="btn btn-primary"
(click)="dropdown.isOpen = !dropdown.isOpen">Show/Hide
</button>
Обновите test.component.ts для соответствующих переменных и методов.
test.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
constructor() {}
ngOnInit(): void {}
}
Создавайте и обслуживайте
Выполните следующую команду, чтобы запустить сервер angular.
ng serve
После того, как сервер запущен и работает. Откройте http: // localhost: 4200 и проверьте следующий вывод.