Inputs

Inputs 提供的是自訂的表單元件,包含 Input, Select, Checkbox 以及 Radio 等等。

KUI Input

使用自訂的 Input 請使用 .kui-input,然後將表單元件置入。

<div class="kui-input">
    <input type="text" class="ctrl-input" />
</div>

實際上當然不只是為了這樣,有時設計版面時,會需要搭配圖示或是更多種可能性,所以才會有自訂的表單元件。如果你想要放圖示到裡面的時候,可以在 .kui-input 加上 .has-icon,接著你可以在表單前後放置 Icon。

<div class="kui-input has-icon">
    <span class="icon prepend"></span>
    <input type="text" class="ctrl-input" />
    <span class="icon append"></span>
</div>

.icon.prepend 適合用在說明性圖示,例如:帳號。.icon.append 適合使用狀態圖示,例如:成功。


KUI Input 與 Input Groups

KUI Input 可以放置 Input Groups 內,使用方式相同。

OK
<div class="input-grp">
    <div class="kui-input has-icon">
        <i class="icon prepend"></i>
        <input type="text" class="ctrl-input" />
        <i class="icon append"></i>
    </div>
    <span class="input-grp-btn">
        <a href="" class="btn">OK</a>
    </span>
</div>

設定狀態顏色

表單元件的狀態配色,在這一樣可以使用並且方法相同。

OK
<div class="kui-input has-icon has-success">~略~</div>
<div class="kui-input has-icon has-warning">~略~</div>
<div class="kui-input has-icon has-error">~略~</div>
<div class="input-grp has-success">~略~</div>

KUI Select

KUI Select 是自訂的 Select 組件。可以將取得的值存放在 <input type="hidden"> 內,.select-text 可以存放預設文字,當透過 Javascript 選取之後,可以將 .default 移除。

Select...
  • Male
  • Female
<div class="kui-select">
    <input type="hidden" />
    <span class="select-text default">Select...</span>
    <ul class="select-options">
        <li class="opt-item" value="1">Male</li>
        <li class="opt-item" value="2">Female</li>
    </ul>
</div>

跟 KUI Input 一樣都能設定 .has-icon與狀態顏色。

Select...
  • Male
  • Female
Select...
  • Male
  • Female
Select...
  • Male
  • Female
<div class="kui-input has-icon has-success">~略~</div>
<div class="kui-input has-icon has-warning">~略~</div>
<div class="kui-input has-icon has-error">~略~</div>
<div class="input-grp has-success">~略~</div>

KUI Checkbox / Radio

KUI Checkbox 與 KUI Radio 全都是使用 .kui-opts,而樣式取決於你使用的是 [type="checkbox"] 或是 [type="radio"]


<div class="kui-opts">
    <label class="kui-opt">
        <input type="checkbox" checked />
        <span class="kui-opt-input">~略~</span>
    </label>
    <label class="kui-opt">
        <input type="checkbox" />
        <span class="kui-opt-input">~略~</span>
    </label>
</div>

<div class="kui-opts">
    <label class="kui-opt">
        <input type="radio" name="radio" checked>
        <span class="kui-opt-input">Option1</span>
    </label>
    <label class="kui-opt">
        <input type="radio" name="radio">
        <span class="kui-opt-input">Option2</span>
    </label>
    <label class="kui-opt">
        <input type="radio" name="radio">
        <span class="kui-opt-input">Option3</span>
    </label>
    <label class="kui-opt">
        <input type="radio" name="radio">
        <span class="kui-opt-input">Option4</span>
    </label>
</div>

.kui-opts 一樣也能設定狀態顏色,可以設定在 .kui-opts 或是 .kui-opts label 上,只要點選之後就會取消狀態顏色。

<div class="kui-opts">
    <label class="kui-opt has-error">
        <input type="checkbox" />
        <span class="kui-opt-input">~略~</span>
    </label>
    <label class="kui-opt has-warning">
        <input type="checkbox" />
        <span class="kui-opt-input">~略~</span>
    </label>
</div>

Choices

這是另一種 Radio 的樣式模組,適合用在購物網站上點選尺寸或是顏色。

<div class="choice">
    <label class="choice-item">
        <input class="choice-input" type="radio" name="size" checked />
        <span class="choice-label">XS</span>
    </label>
    <label class="choice-item">
        <input class="choice-input" type="radio" name="size" />
        <span class="choice-label">S</span>
    </label>
    <label class="choice-item">
        <input class="choice-input" type="radio" name="size" />
        <span class="choice-label">M</span>
    </label>
    <label class="choice-item">
        <input class="choice-input" type="radio" name="size" />
        <span class="choice-label">L</span>
    </label>
</div>

你也可以用顏色讓使用者選擇。

<div class="choice">
    <label class="choice-item">
        <input class="choice-input" type="radio" name="color" checked />
        <span class="choice-label" style="background: #45a7b9;"></span>
    </label>
    <label class="choice-item">
        <input class="choice-input" type="radio" name="color" />
        <span class="choice-label" style="background: #55b3e9;"></span>
    </label>
    <label class="choice-item">
        <input class="choice-input" type="radio" name="color" />
        <span class="choice-label" style="background: #f45b8a;"></span>
    </label>
    <label class="choice-item">
        <input class="choice-input" type="radio" name="color" />
        <span class="choice-label" style="background: #374e52;"></span>
    </label>
</div>

Switches

Switches 可使用 [input="checkbox"] 或是 [type="radio"]。

使用 Checkbox 的 Switch

<div class="switches">
    <label class="switch">
        <input class="switch-input" type="checkbox" name="demo1" checked />
        <span class="switch-label"></span>
    </label>
    <label class="switch">
        <input class="switch-input" type="checkbox" name="demo2" />
        <span class="switch-label"></span>
    </label>
    <label class="switch">
        <input class="switch-input" type="checkbox" name="demo3" />
        <span class="switch-label"></span>
    </label>
</div>

使用 Radio 的 Switch

<div class="switches">
    <label class="switch">
        <input class="switch-input" type="eadio" name="demo4" checked />
        <span class="switch-label"></span>
    </label>
    <label class="switch">
        <input class="switch-input" type="eadio" name="demo4" />
        <span class="switch-label"></span>
    </label>
    <label class="switch">
        <input class="switch-input" type="eadio" name="demo4" />
        <span class="switch-label"></span>
    </label>
</div>

Rounded

Switches 有另外提供 Rounded 的樣式,只要在 .switch 加上 .switch-rounded 即可。

<label class="switch switch-rounded">
    <input class="switch-input" type="checkbox" name="demo5" />
    <span class="switch-label"></span>
</label>

說明文字

如果你需要在 Switches 上標註開關的字樣,可以在 .switch 加上 .switch-text,另外並需要在 .switch-label 上增加 [data-on="ON"] 以及 [data-off="OFF"]

<label class="switch switch-text">
    <input class="switch-input" type="checkbox" name="demo6" />
    <span class="switch-label" data-on="ON" data-off="OFF"></span>
</label>