Ngx-Bootstrap - listy rozwijane

Składnik rozwijany ngx-bootstrap jest przełączalny i zapewnia kontekstową nakładkę do wyświetlania listy linków itp. Za pomocą dyrektyw rozwijanych możemy tworzyć interaktywne listy rozwijane.

BsDropdownDirective

selektor

• [bsDropdown],[dropdown]

Wejścia

• autoClose - boolean, wskazuje, że lista rozwijana zostanie zamknięta po kliknięciu elementu lub dokumentu i naciśnięciu klawisza ESC

• container - string, Selektor określający element, do którego ma zostać dołączone popover.

• dropup - boolean, ten atrybut wskazuje, że lista rozwijana powinna być otwarta w górę.

• insideClick - boolean, ten atrybut wskazuje, że lista rozwijana nie powinna zamykać się po kliknięciu wewnętrznym, gdy autoClose jest ustawione na true.

• isAnimated - boolean, wskazuje, że lista rozwijana będzie animowana

• isDisabled - boolean, wyłącza przełącznik rozwijany i ukrywa menu rozwijane, jeśli jest otwarte

• isOpen - boolean, Zwraca informację, czy popover jest aktualnie pokazywany

• placement- ciąg, Umieszczenie popovera. Akceptuje: „góra”, „dół”, „lewo”, „prawo”

• triggers- ciąg, określa zdarzenia, które powinny zostać wywołane. Obsługuje listę nazw zdarzeń oddzielonych spacjami.

Wyjścia

• isOpenChange - Emituje zdarzenie, gdy isOpen zmienia

• onHidden - Emituje zdarzenie, gdy popover jest ukryty

• onShown - Emituje zdarzenie po wyświetleniu okna podręcznego

Metody

• show()- Otwiera okno popover elementu. Jest to uważane za „ręczne” wyzwalanie popover.

• hide()- zamyka popover elementu. Jest to uważane za „ręczne” wyzwalanie popover.

• toggle()- Przełącza popover elementu. Jest to uważane za „ręczne” wyzwalanie popover.

• setConfig() - Ustaw konfigurację dla popover

Przykład

Ponieważ zamierzamy korzystać z menu rozwijanych, musimy zaktualizować plik app.module.ts używany w rozdziale ngx-bootstrap DatePicker do użyciaBsDropdownModule i BsDropdownConfig.

Zaktualizuj app.module.ts, aby używał BsDropdownModule i 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 { }

Zaktualizuj test.component.html, aby korzystać z list rozwijanych.

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>

Zaktualizuj test.component.ts pod kątem odpowiednich zmiennych i metod.

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 {}
}

Buduj i służ

Uruchom następujące polecenie, aby uruchomić serwer kątowy.

ng serve

Gdy serwer jest już uruchomiony. Otwórz http: // localhost: 4200 i sprawdź następujące dane wyjściowe.