Button Group
將數個 Button 元件群組化。使用類別名稱為 .btn-grp
,並且將 Button 放置其中,每個 Button 的區間為 10 pixel 的間距。
<div class="btn-grp">
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
</div>
合併
在 .btn-grp
加上 .:united
後,所有 Button 組件的間格將會消失。
<div class="btn-grp :united"></div>
配色
在 .btn-grp
加上 .clr:{color}
後,Button 元件的顏色都會改變。
<div class="btn-grp clr:{color}"></div>
圓角樣式
可在 .btn-grp
加上 .:rounded
後,Button 元件將會顯示圓角樣式。
<div class="btn-grp :rounded"></div>
正方形樣式
可在 .btn-grp
加上 .:square
後,Button 元件將會顯示正方形尺寸。
<div class="btn-grp :rounded"></div>
尺寸
與配色相同,在 .btn-grp
加上 .sz:{size}
後,Button 元件的尺寸都會改變。
<div class="btn-grp sz:{size}"></div>