Ngx-Bootstrap - Dropdown
Il componente a discesa ngx-bootstrap è attivabile e fornisce una sovrapposizione contestuale per visualizzare l'elenco di collegamenti, ecc. Con le direttive a discesa possiamo rendere interattivi i menu a discesa.
BsDropdownDirective
selettore
[bsDropdown],[dropdown]
Ingressi
autoClose - booleano, indica che il menu a discesa verrà chiuso al clic su un elemento o un documento e dopo aver premuto ESC
container - string, un selettore che specifica l'elemento a cui aggiungere il popover.
dropup - booleano, questo attributo indica che il menu a discesa deve essere aperto verso l'alto.
insideClick - booleano, questo attributo indica che il menu a discesa non deve chiudersi al clic interno quando autoClose è impostato su true.
isAnimated - booleano, indica che il menu a discesa sarà animato
isDisabled - booleano, Disabilita l'interruttore a discesa e nasconde il menu a discesa se aperto
isOpen - boolean, Restituisce se il popover è attualmente visualizzato o meno
placement- stringa, posizionamento di un popover. Accetta: "top", "bottom", "left", "right"
triggers- stringa, specifica gli eventi che dovrebbero attivarsi. Supporta un elenco di nomi di eventi separati da spazi.
Uscite
isOpenChange - Emette un evento quando isOpen cambia
onHidden - Emette un evento quando il popover è nascosto
onShown - Emette un evento quando viene mostrato il popover
Metodi
show()- Apre il popover di un elemento. Questo è considerato un trigger "manuale" del popover.
hide()- Chiude il popover di un elemento. Questo è considerato un trigger "manuale" del popover.
toggle()- Attiva o disattiva il popover di un elemento. Questo è considerato un trigger "manuale" del popover.
setConfig() - Imposta la configurazione per il popover
Esempio
Poiché utilizzeremo i menu a discesa, dobbiamo aggiornare app.module.ts utilizzato nel capitolo DatePicker di ngx-bootstrap da utilizzareBsDropdownModule e BsDropdownConfig.
Aggiorna app.module.ts per utilizzare BsDropdownModule e 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 { }
Aggiorna test.component.html per utilizzare i menu a discesa.
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>
Aggiorna test.component.ts per le variabili e i metodi corrispondenti.
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 {}
}
Costruisci e servi
Eseguire il seguente comando per avviare il server angolare.
ng serve
Una volta che il server è attivo e funzionante. Apri http: // localhost: 4200 e verifica il seguente output.