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>