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.