Button Groups

在 Button Groups 中所有元件都以 .btn-grp為開頭,並且搭配 .btn

將多個按鈕同時放在一個 <div> 內,並且加上 .btn-grp

<div class="btn-grp">
    <a class="btn">按鈕</a>
    <a class="btn">按鈕</a>
    <a class="btn">按鈕</a>
</div>

如果要同時放多個 .btn-grp 時,請放置到 <div class="btn-grps"> 內。

<div class="btn-grps">
    <div class="btn-grp">
        <a class="btn">按鈕</a>
        <a class="btn">按鈕</a>
        <a class="btn">按鈕</a>
    </div>
    <div class="btn-grp">
        <a class="btn">按鈕</a>
        <a class="btn">按鈕</a>
    </div>
</div>

設定顏色

Button Group 裡的 Button 要設定顏色時,如果是一整個群組同時更改顏色,不需要在 Button 上設定,只要在 .btn-grp 加上 .color-*即可。如果是單一 Button 設定顏色,才到 .btn 加上 .color-*

<div class="btn-grp color-primary">~略~</div>
<div class="btn-grp color-secondary">~略~</div>
<div class="btn-grp color-focus">~略~</div>
<div class="btn-grp color-common">~略~</div>
<div class="btn-grp color-success">~略~</div>
<div class="btn-grp color-warning">~略~</div>
<div class="btn-grp color-error">~略~</div>

設定尺寸

Button Group 裡的 Button 要設定尺寸時,不需要在 Button 上設定,只要在 .btn-grp 加上 .size-*即可。

<div class="btn-grp size-xs">~略~</div>
<div class="btn-grp size-sm">~略~</div>
<div class="btn-grp">~略~</div>
<div class="btn-grp size-lg">~略~</div>
<div class="btn-grp size-xl">~略~</div>

Vertical Button Groups

垂直的 Button Group 是為了有時需要在畫面的左側或右側放置快速按鈕,使用方式與 .btn-grp相同,只要改為 .btn-grp-vertical即可。

<div class="btn-grp-vertical">
    <a class="btn">按鈕</a>
    <a class="btn">按鈕</a>
    <a class="btn">按鈕</a>
</div>

如果要放上多個垂直按鈕群組,只要放置 <div class="btn-grps-vertical"> 即可。

<div class="btn-grps-vertical">
    <div class="btn-grp-vertical">
        <a class="btn">按鈕</a>
        <a class="btn">按鈕</a>
        <a class="btn">按鈕</a>
    </div>
    <div class="btn-grp-vertical">
        <a class="btn">按鈕</a>
        <a class="btn">按鈕</a>
    </div>
</div>

顏色與尺寸

設定 .btn-grp-vertical 的顏色與尺寸,方法跟 .btn-grp 相同。

<div class="btn-grp-vertical color-primary">~略~</div>
<div class="btn-grp-vertical size-lg">~略~</div>

Button Group 與 Drops

如果要在 .btn-grp 中加入 Drops 是可行的,只要直接在放入 .drop 不需要額外做設定。另外,同時也能使用 color-*.size-*

<div class="btn-grp">
    <a class="btn">按鈕</a>
    <a class="btn">按鈕</a>
    <div class="drop drop-hover">
        <a class="btn">按鈕</a>
        <ul class="drop-box menu">
            <li class="menu-item"><a class="menu-link">Item1</a></li>
            <li class="menu-item"><a class="menu-link">Item2</a></li>
            <li class="menu-item"><a class="menu-link">Item3</a></li>
        </ul>
    </div>
</div>