前言
為了美觀，美觀，美觀，沒了，效果大概是這樣
界面效果
使用一個list包裹著button和一個div，點擊button后才顯示div里面的內容，加了點特效（漸變）讓他變得像是出來一封信的樣子，這樣看起來好看點
準備步驟
本篇日記只牽扯到一個page
HTML頁面
<ion-list *ngFor="let d of data">
<button ion-item detail-none class="buttonscss" (click)="toggleDetails(d)">
<ion-icon item-left color="#444" name="{{d.icon}}"></ion-icon>
<h3>{{d.titlestart}}</h3>
<p item-right>{{d.titleend}}</p>
</button>
<div *ngIf="d.showDetails" class="divcard" padding #divcard>
<h3>休假類型：{{d.titlestart}}</h3>
<ion-row>
<p>休假原因</p>
<span>{{d.content}}</span>
</ion-row>
<ion-row>
<ion-col>
<p>生效日期</p>
<span>{{d.effectivedate}}</span>
</ion-col>
<ion-col>
<p>失效天數</p>
<span>{{d.expirydate}}</span>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<button ion-button icon-only clear full large>
<ion-icon name="md-create"></ion-icon>
</button>
</ion-col>
<ion-col>
<button ion-button icon-only clear full large>
<ion-icon name="md-trash"></ion-icon>
</button>
</ion-col>
</ion-row>
</div>
</ion-list>
先畫好大概的樣式，配合scss完成其中的效果，重點還是在*ngFor="let d of data"上，數據和判斷按鈕是否有展開div都是通過在ts當中寫好的后臺，而div里面的內容，我是通過格的方式來分區域，因為挺好看而且很搭的感覺
SCSS頁面
.buttonscss{
z-index:2;
background : linear-gradient(left,white 0%,rgba(68, 68, 68, 0.2) 80%,rgba(68, 68, 68, 0.3) 100%);
box-shadow : 0px 5px 3px -3px rgba(142, 136, 146, 0.75);//圖片地下的陰影
margin-top : 2%;
}
.divcard{
position: relative;
background:linear-gradient(bottom,#eeeef1,white 100%,white);
box-shadow: 0px 4px 3px -3px rgba(142, 136, 146, 1);
width: 90%;
left: 5%;
// height: 250px;
text-align: center;
h3{
color: rgba(68, 68, 68, 0.85)
}
p{
color: rgba(68, 68, 68, 0.75);
}
span{
color: rgba(68, 68, 68, 0.75);
font-weight: bold;
}
}
如何搭配看具體需要，我這邊只是代表我個人的設計想法，值得一提的是z-index:2，讓button位于div之上，不然button的陰影效果會被div擋住，這樣就看不出層次感
TS頁面
先創建一個集合
data: Array<{
titlestart: string,
titleend: string,
content: string,
effectivedate: string,
expirydate: string,
showDetails: boolean,
icon:string
}> = [];
重點是showDetails和icon，這兩個控制著判斷是否打開和顯示哪個圖標，其余不必特別在意，只是為了展示效果順便做的一點微小的工作。
在constructor中需要給data添加需要綁定的string值
this.data.push({
titlestart: '調休',
titleend: '2017-6-13' + '到' + '2017-6-20',
content: '頭暈發燒，去醫院檢查和回家休息一周，有醫生開的證明，休假時間是6月13號到6月20號，望批準//測試較長的顯示效果測試較長的顯示效果測試較長的顯示效果測試較長的顯示效果測試較長的顯示效果測試較長的顯示效果測試較長的顯示效果測試較長的顯示效果測試較長的顯示效果測試較長的顯示效果測試較長的顯示效果測試較長的顯示效果測試較長的顯示效果測試較長的顯示效果測試較長的顯示效果測試較長的顯示效果',
effectivedate: '2017-6-13',
expirydate: '2017-6-20',
showDetails: false,
icon:'ios-arrow-forward'
},
{
titlestart: '婚假',
titleend: '2017-10-25' + '到' + '2017-10-29',
content: '親戚結婚，需要陪同和參與，時間是10月25號到10月29號共4天，望批準',
effectivedate: '2017-10-25',
expirydate: '2017-10-29',
showDetails: false,
icon:'ios-arrow-forward'
}
);
接下來給html中的button附加點擊將調用的函數toggleDetails
toggleDetails(data) {
if (data.showDetails) {
data.showDetails = false;
data.icon='ios-arrow-forward'
} else {
data.showDetails = true;
data.icon='ios-arrow-down'
}
}
就算是大功告成了，使用起來還是很方便的，中間調試的時候出現了button圖標消失或者不顯示list的話，檢查一下代碼或者重新運行一下代碼，有些特別玄乎的問題都是重新運行一下代碼就解決了，ionic感覺還是有些不成熟的地方
