Ngx-Bootstrap - Các nút
Các nút ngx-bootstrap có hai lệnh cụ thể làm cho một nhóm các nút hoạt động như hộp kiểm hoặc các nút radio hoặc kết hợp nơi có thể bỏ chọn một nút radio.
ButtonCheckboxDirective
Thêm chức năng hộp kiểm vào bất kỳ phần tử nào.
bộ chọn
[btnCheckbox]
Đầu vào
btnCheckboxFalse - boolean, giá trị Falsy, sẽ được đặt thành ngModel, mặc định: false
btnCheckboxTrue - boolean, giá trị Truthy, sẽ được đặt thành ngModel, mặc định: true
ButtonRadioDirective
Tạo nút radio hoặc nhóm nút. Giá trị của một nút đã chọn được liên kết với một biến được chỉ định qua ngModel.
bộ chọn
[btnRadio]
Đầu vào
btnRadio - string, giá trị nút Radio, sẽ được đặt thành ngModel
disabled - boolean, Nếu đúng - nút radio bị tắt
uncheckable - boolean, If true - có thể bỏ chọn nút radio
value - chuỗi, Giá trị hiện tại của thành phần hoặc nhóm radio
ButtonRadioGroupDirective
Một nhóm các nút radio. Giá trị của một nút đã chọn được liên kết với một biến được chỉ định qua ngModel.
bộ chọn
[btnRadioGroup]
Thí dụ
Vì chúng ta sẽ sử dụng các nút, Chúng ta phải cập nhật app.module.ts được sử dụng trong chương Cảnh báo ngx-bootstrap để sử dụngButtonsModule. Chúng tôi cũng đang bổ sung hỗ trợ cho các điều khiển đầu vào bằng FormModule.
Cập nhật app.module.ts để sử dụng AlertModule và AlertConfig.
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';
@NgModule({
declarations: [
AppComponent,
TestComponent
],
imports: [
BrowserAnimationsModule,
BrowserModule,
AccordionModule,
AlertModule,
ButtonsModule,
FormsModule
],
providers: [AlertConfig],
bootstrap: [AppComponent]
})
export class AppModule { }
Cập nhật test.component.html để sử dụng các nút.
test.component.html
<button type="button" class="btn btn-primary" (click)="clicked()">
Single Button
</button>
<pre class="card card-block card-header">
{{clickCounter}}
</pre>
<p>Button as Checkbox</p>
<div class="btn-group">
<label class="btn btn-primary" [(ngModel)]="checkModel.left"
btnCheckbox tabindex="0" role="button">Left</label>
<label class="btn btn-primary" [(ngModel)]="checkModel.right"
btnCheckbox tabindex="0" role="button">Right</label>
</div>
<pre class="card card-block card-header">
{{checkModel | json}}
</pre>
<p>Button as RadionButton</p>
<div class="form-inline">
<div class="btn-group" btnRadioGroup [(ngModel)]="radioModel">
<label class="btn btn-success" btnRadio="Left">Left</label>
<label class="btn btn-success" btnRadio="Right">Right</label>
</div>
</div>
<pre class="card card-block card-header">
{{radioModel}}
</pre>
Cập nhật test.component.ts cho các biến và phương thức tương ứng.
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 {
checkModel = { left: false, right: false };
radioModel = 'Left';
clickCounter = 0;
constructor() { }
ngOnInit(): void {
}
clicked(): void {
this.clickCounter++;
}
}
Xây dựng và Phục vụ
Chạy lệnh sau để khởi động máy chủ góc.
ng serve
Sau khi máy chủ hoạt động. Mở http: // localhost: 4200 và xác minh kết quả sau.