Input Groups

將表單元件與其他元件群組化之後產生新的組件。在 <div> 內,並且加上 .input-grp

Adorn

Adorn 是用來做裝飾的元件,可放置文字與圖示,可搭配 Input Groups 使用。你可以選擇一個 <span> 並且加上 .adorn,你可以將 .adorn 放置在任何一處,沒有順序的差別。

NTD
@gmail.com
$ .00
@
<div class="input-grp">
    <span class="adorn">NTD</span>
    <input type="text" class="ctrl-input" />
</div>

<div class="input-grp">
    <input type="text" class="ctrl-input" />
    <span class="adorn">@gmail.com</span>
</div>

<div class="input-grp">
    <span class="adorn">$</span>
    <input type="text" class="ctrl-input" />
    <span class="adorn">.00</span>
</div>

<div class="input-grp">
    <input type="text" class="ctrl-input" />
    <span class="adorn">@</span>
    <input type="text" class="ctrl-input" />
</div>

Select, Checkbox, Radio

除了 <input /><.adorn> 之外,你也可以放置 <select> , radiocheckbox 等其他元件。

@
<div class="input-grp">
    <span class="adorn">@</span>
    <select class="ctrl-input">
        <option>台北市</option>
        <option>新北市</option>
    </select>
</div>

<div class="input-grp">
    <span class="adorn">
        <input type="checkbox" />
    </span>
    <input type="text" class="ctrl-input" />
</div>

<div class="input-grp">
    <span class="adorn">
        <input type="radio" />
    </span>
    <input type="text" class="ctrl-input" />
</div>

Button

Input Group 可以放置 .btn,但為了排版美觀以及彈性調整,必須加一層 .input-grp-btn

<div class="input-grp">
    <span class="input-grp-btn">
        <a class="btn">Button</a>
    </span>
    <input type="text" class="ctrl-input" />
</div>

<div class="input-grp">
    <input type="text" class="ctrl-input" />
    <span class="input-grp-btn">
        <a class="btn">Search</a>
    </span>
</div>

<div class="input-grp">
    <input type="text" class="ctrl-input" />
    <span class="input-grp-btn">
        <a class="btn">Button</a>
        <a class="btn">Button</a>
    </span>
</div>

Input Group 與 Drops

和 Btton Group 相同,都能置入 Drops,跟 .btn 相同,都必須放置 .input-grp-btn 內。

<div class="input-grp">
    <input type="text" class="ctrl-input" />
    <span class="input-grp-btn">
        <a class="btn">Button</a>
        <div class="drop drop-hover">
            <a class="btn">
                <span class="caret"></span>
            </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>
    </span>
</div>