Ngx-Bootstrap - Dropdown
ngx-bootstrap komponen dropdown dapat diubah dan menyediakan overlay kontekstual untuk menampilkan daftar link dll. Dengan perintah dropdown kita dapat membuat dropdown menjadi interaktif.
BsDropdownDirective
pemilih
[bsDropdown],[dropdown]
Masukan
autoClose - boolean, Menunjukkan bahwa dropdown akan ditutup pada item atau klik dokumen, dan setelah menekan ESC
container - string, selektor yang menentukan elemen popover yang harus ditambahkan.
dropup - boolean, Atribut ini menunjukkan bahwa dropdown harus dibuka ke atas.
insideClick - boolean, Atribut ini menunjukkan bahwa dropdown seharusnya tidak menutup di dalam klik ketika autoClose disetel ke true.
isAnimated - boolean, Menunjukkan bahwa dropdown akan dianimasikan
isDisabled - boolean, Nonaktifkan toggle dropdown dan sembunyikan menu dropdown jika dibuka
isOpen - boolean, Mengembalikan apakah popover sedang ditampilkan atau tidak
placement- string, Penempatan popover. Menerima: "top", "bottom", "left", "right"
triggers- string, Menentukan peristiwa yang harus dipicu. Mendukung daftar nama acara yang dipisahkan spasi.
Keluaran
isOpenChange - Memancarkan acara saat perubahan isOpen
onHidden - Memancarkan acara saat popover disembunyikan
onShown - Memancarkan acara saat popover ditampilkan
Metode
show()- Membuka popover elemen. Ini dianggap sebagai pemicu 'manual' dari popover.
hide()- Menutup popover elemen. Ini dianggap sebagai pemicu 'manual' dari popover.
toggle()- Mengalihkan popover elemen. Ini dianggap sebagai pemicu 'manual' dari popover.
setConfig() - Atur konfigurasi untuk popover
Contoh
Karena kita akan menggunakan dropdown, Kami telah memperbarui app.module.ts yang digunakan dalam ngx-bootstrap chapter DatePicker untuk digunakan.BsDropdownModule dan BsDropdownConfig.
Perbarui app.module.ts untuk menggunakan BsDropdownModule dan 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 { }
Perbarui test.component.html untuk menggunakan dropdown.
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>
Perbarui test.component.ts untuk variabel dan metode yang sesuai.
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 {}
}
Bangun dan Sajikan
Jalankan perintah berikut untuk memulai server sudut.
ng serve
Setelah server aktif dan berjalan. Buka http: // localhost: 4200 dan verifikasi keluaran berikut.