TypeScript實現點選展開div的效果
阿新 • • 發佈:2019-02-01
在前端中,我們經常可以看到一個列表中,點選某一行的某個按鈕這一行就展開來,呈現一個div,本文來介紹一下這種效果的實現。
首先,我們在Student類中寫一個boolean型別的expand屬性,設預設值為false,也就是預設狀態下是不展開的。
然後我們寫一個expand函式,該函式的功能是將當前物件的expand屬性取反。
expand(student: Student){
student.expand=!student.expand;
if(student.expand){
//這裡可以寫一些當前為展開狀態時做的一些事情
}
}
在html中呼叫該函式:
(click)="expand(student)"
然後在div模組中判斷當前物件的expand值是否為true,只有在它為true時才顯示div模組:
<div *ngIf="student.expand">
這樣就成功啦~
我們經常可以看到像這樣的小箭頭,在展開與合上時會變方向,實現如下:
需要import以下這個css,官網請戳:https://fontawesome.com/
import 'font-awesome/css/font-awesome.css';
然後就可以使用fa-chevron-up與fa-chevron-down這兩個樣式啦:
[ngClass] ="student.expand ? 'fa fa-chevron-up': 'fa fa-chevron-down'"
這樣,就可以在合上的時候箭頭朝下,展開的時候箭頭朝上~