Ngx-Bootstrap - Thu gọn

ngx-bootstrap Chỉ thị thu gọn giúp hiển thị / ẩn nội dung vùng chứa.

CollapseDirective

bộ chọn

  • [collapse]

Đầu vào

  • collapse - boolean, Cờ biểu thị khả năng hiển thị của nội dung (hiển thị hoặc ẩn)

  • display - chuỗi

  • isAnimated- boolean, bật / tắt hoạt ảnh. default: false

Kết quả đầu ra

  • collapsed - Sự kiện này kích hoạt ngay khi nội dung bị sập

  • collapses - Sự kiện này xảy ra khi bắt đầu thu gọn

  • expanded - Sự kiện này kích hoạt ngay khi hiển thị nội dung

  • expands - Sự kiện này xảy ra khi bắt đầu mở rộng

Phương pháp

  • toggle() - cho phép chuyển đổi chế độ hiển thị nội dung theo cách thủ công

  • hide - cho phép ẩn nội dung theo cách thủ công

  • show - cho phép hiển thị nội dung thu gọn theo cách thủ công

Thí dụ

Vì chúng ta sẽ sử dụng tính năng thu gọn, chúng ta phải cập nhật app.module.ts được sử dụng trong chương Băng chuyền ngx-bootstrap để sử dụngCollapseModule.

Cập nhật app.module.ts để sử dụng CollapseModule.

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';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule
   ],
   providers: [AlertConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Cập nhật test.component.html để sử dụng Thu gọn.

test.component.html

<div>
   <div class="checkbox">
      <label><input type="checkbox" [(ngModel)]="isCollapsed">Collapse</label>
   </div>
</div>
<div [collapse]="isCollapsed" [isAnimated]="true">
   <div class="well well-lg card card-block card-header">Welcome to Tutorialspoint.</div>
</div>

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 {
   isCollapsed: boolean = false;
   constructor() { }

   ngOnInit(): void {
   }
}

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.

Chọn hộp kiểm thu gọn và sau đó nội dung sẽ được thu gọn.