Tìm hiều Material Expansion Panel

Expansion Panel
Cung cấp một panel có khả năng thu gọn và mở rộng.


Nội dung trong Expansion Panel 
Mỗi Expansion Panel phải bao gồm một header và có hoặc không một action bar
<mat-expansion-panel-header> hiển thị tóm tắt nội dung panel và đóng vai trò kiểm soát mở rộng và thu gọn. Header có thể có thêm thẻ <mat-panel-title> và thẻ <mat-panel-description>, chúng format lại nội dung của header để phù hợp với thiết kế chung của Material.



Mặc định, expansion-panel header bao gồm toogle icon ở cuối header để biểu thị trạng thái mở rộng. Biểu tượng này có thể được ẩn thông qua thuộc tính hideToggle.

<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-panel-title>
      This is the expansion title
    </mat-panel-title>
    <mat-panel-description>
      This is a summary of the content
    </mat-panel-description>
  </mat-expansion-panel-header>

  <p>This is the primary content of the panel.</p>

</mat-expansion-panel>
Các hành động có thể được thêm vào ở dưới cùng của panel, chỉ hiển thị khi trạng thái là mở rộng.

<mat-expansion-panel>
  <mat-expansion-panel-header>
    This is the expansion title
  </mat-expansion-panel-header>

  <p>This is the primary content of the panel.</p>

  <mat-action-row>
    <button mat-button>Click me</button>
  </mat-action-row>
</mat-expansion-panel>
Expansion panel có thể disabled bằng cách sử dụng thuộc tính disabled. Một expansion panel bị disabled không thể được mở rộng bởi người dùng, nhưng vẫn có thể được thao tác bằng lập trình.

<mat-expansion-panel [disabled]="isDisabled">
  <mat-expansion-panel-header>
    This is the expansion title
  </mat-expansion-panel-header>
  <mat-panel-description>
    This is a summary of the content
  </mat-panel-description>
</mat-expansion-panel>
Nhiều expansion panel có thể được kết hợp thành một accordion. Đầu vào multi = "true" cho phép trạng thái mở rộng được đặt độc lập với nhau. Khi multi = "false" (mặc định), chỉ có thể mở rộng một bảng điều khiển tại một thời điểm nhất định:

<mat-accordion>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      This is the expansion 1 title
    </mat-expansion-panel-header>

    This the expansion 1 content

  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      This is the expansion 2 title
    </mat-expansion-panel-header>

    This the expansion 2 content

  </mat-expansion-panel>

</mat-accordion>
Theo mặc định, nội dung expansion panel sẽ được khởi tạo ngay cả khi đóng panel. Thay vào đó, trì hoãn khởi tạo cho đến khi bảng điều khiển được mở, nội dung phải được cung cấp dưới dạng ng-template:

<mat-expansion-panel>
  <mat-expansion-panel-header>
    This is the expansion title
  </mat-expansion-panel-header>

  <ng-template matExpansionPanelContent>
    Some deferred content
  </ng-template>
</mat-expansion-panel>
Expansion panel nhằm bắt chước trải nghiệm của các thẻ <details> và <summary> gốc. Tiêu đề của expansion panel có role = "button" và cả các aria-controls thuộc tính với id là giá trị của panel.

Các tiêu đề bảng mở rộng là các buttons. Người dùng có thể sử dụng bàn phím để chuyển giữa trạng thái mở rộng và trạng thái thu gọn. Vì tiêu đề hoạt động như một button, các yếu tố tương tác bổ sung không nên được đặt bên trong tiêu đề.

> ng g c mat-expansion-panel

Thay đổi nội dung của file mat-expansion-panel.component.ts như sau:
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-mat-expansion-panel',
templateUrl: './mat-expansion-panel.component.html',
styleUrls: ['./mat-expansion-panel.component.css']
})
export class MatExpansionPanelComponent implements OnInit {
step = 0;
constructor() { }

ngOnInit() {
}

setStep(index: number) {
this.step = index;
}

nextStep() {
this.step++;
}

prevStep() {
this.step--;
}
}
Thay đổi nội dung của file mat-expansion-panel.component.html như sau:
<mat-accordion class="example-headers-align">
<mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)">
<mat-expansion-panel-header>
<mat-panel-title>
Thông tin cá nhân
</mat-panel-title>
<mat-panel-description>
Nhập tên và tuổi của bạn
</mat-panel-description>
</mat-expansion-panel-header>

<mat-form-field>
<input matInput placeholder="Name">
</mat-form-field>

<mat-form-field>
<input matInput type="number" min="1" placeholder="Age">
</mat-form-field>

<mat-action-row>
<button mat-button color="primary" (click)="nextStep()">Next</button>
</mat-action-row>
</mat-expansion-panel>

<mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)">
<mat-expansion-panel-header>
<mat-panel-title>
Điểm đến
</mat-panel-title>
<mat-panel-description>
Nhập điểm đến
</mat-panel-description>
</mat-expansion-panel-header>

<mat-form-field>
<input matInput placeholder="Country">
</mat-form-field>

<mat-action-row>
<button mat-button color="warn" (click)="prevStep()">Previous</button>
<button mat-button color="primary" (click)="nextStep()">Next</button>
</mat-action-row>
</mat-expansion-panel>

<mat-expansion-panel [expanded]="step === 2" (opened)="setStep(2)">
<mat-expansion-panel-header>
<mat-panel-title>
Ngày cho chuyến đi
</mat-panel-title>
<mat-panel-description>
Xác định ngày đi
<!-- <mat-icon>date_range</mat-icon> -->
</mat-panel-description>
</mat-expansion-panel-header>

<mat-form-field>
<input matInput placeholder="Date" [matDatepicker]="picker" (focus)="picker.open()" readonly>
</mat-form-field>
<mat-datepicker #picker></mat-datepicker>

<mat-action-row>
<button mat-button color="warn" (click)="prevStep()">Previous</button>
<button mat-button color="primary" (click)="nextStep()">End</button>
</mat-action-row>
</mat-expansion-panel>

</mat-accordion>

Thay đổi nội dung của file mat-expansion-panel.component.css như sau:
.example-headers-align .mat-expansion-panel-header-title,
.example-headers-align .mat-expansion-panel-header-description {
flex-basis: 0;
}

.example-headers-align .mat-expansion-panel-header-description {
justify-content: space-between;
align-items: center;
}

mat-form-field {
margin-right: 12px;
}
=======================Kết quả====================



Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

Material Tree

Hình ảnh
Material tree Overview Mat-tree được thiết kế theo material design style sử dụng để hiển thị dữ liệu phân cấp Có hai loại tree - Flat tree - Nested tree  Cấu trúc DOM sẽ khác tùy thuộc vào loại tree. Flat tree Trong một flat tree, hệ thống phân cấp được làm phẳng; các node không được thiết kế lồng bên trong nhau, mà thay vào đó được viết dưới dạng anh chị em theo trình tự. Sử dụng thuộc tính TreeFlattener   sử dụng để tạo danh sách phẳng các phần từ dữ liệu phân cấp. "Level" của mỗi node tree được đọc thông qua phương thức getLevel của TreeControl ; level này có thể được sử dụng để định kiểu node sao cho nó được hiện thị theo cấp thích hợp. < mat-tree >    < mat-tree-node >  parent node </ mat-tree-node >    < mat-tree-node >  -- child node1 </ mat-tree-node >    < mat-tree-node >  -- child node2 </ mat-tree-node > </ mat-tree > Flat trees are gene...
Đọc thêm

.Net secure coding guidelines

Hướng dẫn code .Net an toàn Tổng quan      Trong .Net  Evidence Based Security và Code access security cung cấp các cơ chế rõ ràng, mạnh mẽ để thực hiện bảo mật. Hầu hết các các ứng dụng có thể chỉ đơn giản là sử dụng cơ chế được triển khai bởi .NET. Nhưng trong một số trường hợp, việc tăng khả năng bảo mật dành riêng cho ứng dụng là bắt buộc, được xây dựng bằng cách mở rộng hệ thống bảo mật hoặc bằng cách sử dụng các phương pháp mới.      Khi sử dụng các quyền để thực thi trong code của bạn, bạn nên dựng lớp bảo vệ để ngăn chặn mã độc truy cập thông tin mà bạn không muốn nó có được hay thực hiện các hành động không mong muốn khác. Ngoài ra, bạn phải đạt được sự cân bằng giữa bảo mật và khả năng sử dụng trong tất cả các tình huống khi ​​sử dụng code tin cậy.      Tổng quan này mô tả các cách khác nhau mà việc viết code có thể thiết kế để làm việc với hệ thống bảo mật. Bảo mật truy cập tài nguyên (Resource) ...
Đọc thêm

Tìm hiểm Checkbox Angular Material

Hình ảnh
Mat - Checkbox <mat-checkbox> cung cấp chức năng như checkbox thuần html <input type="checkbox"> được cải tiến với Material Design styling và animations. Label checkbox Label checkbox được cung cấp dưới dạng nội dung cho phần tử <mat-checkbox>. Label có thể được cấu hình ở trước hoặc sau checkbox bằng cách đặt thuộc tính labelPosition thành 'before' hoặc ‘after’. Nếu bạn không muốn label xuất hiện bên cạnh checkbox, bạn có thể sử dụng ‘aria-label’ hoặc ‘aria-labelledby’ để chỉ định label phù hợp. Use with @angular/forms <mat-checkbox> tương thích với @angular/forms và hỗ trở cả FormsModule lẫn ReactiveFormsModule. Indeterminate state <mat-checkbox> hỗ trợ trạng thái không xác định (indeterminate), giống với thẻ html thuần <input type="checkbox">. Khi mà trạng thái indeterminate  của checkbox là true, nó sẽ thể hiện trạng thái không xác định bất kể giá trị đang là checked. Các tương tác với checkb...
Đọc thêm