AmazeUI HTML元素

　按鈕Button

　　am-btn-xx(default、primary、secondary、success、warning、danger、link)

　　am-radius 圓角按鈕

　　am-round 橢圓形按鈕

　　am-active 激活狀態

　　am-disabled 禁用狀態

　　按鈕尺寸 am-btn-xl  am-btn-lg  am-btn-default  am-btn-sm  am-btn-xs

　　am-btn-block 塊級顯示

　　按鈕Icon

　　am-icon-cog設置  am-icon-shopping-cart購物車  am-icon-spinner am-icon-spi加載中  am-icon-cloud-download下載

 

 

　　　　Code

　　行內代碼<code></code>

　　代碼片斷<pre></pre>

　　代碼塊高度<pre  class="am-pre-scrollable"> </pre>

　　

 

　　　　Form

　　塊級顯示時在容器上添加am-checkbox、am-radio 

　　行內顯示時在容器上添加am-checkbox-inline、am-radio-inline　　

　　

　　<div class="am-form-group am-form-file">
　　　　<button type="button" class="am-btn am-btn-default am-btn-sm">
　　　　<i class="am-icon-cloud-upload"></i> 選擇要上傳的文件</button>
　　　　<input type="file" multiple>
　　</div>

　　

　　<div class="am-form-group am-form-file">
　　　　<i class="am-icon-cloud-upload"></i> 選擇要上傳的文件
　　　　<input type="file" multiple>
　　</div>

　　

　　在容器上添加.am-form class，容器裏的子元素纔會應用Amaze UI定義的樣式。　　

　　圓角表單域 am-form-filed am-radius am-radius

　　橢圓表單域 am-form-filed am-round

　　給<fieldset>元素添加disabled屬性，禁用全部的子元素

　　禁用連接 am-disabled

　　水平表單 am-form-horizontal

　　行內排列 am-form-inline  行內排列的元素並無設置右邊距，默認使用inline-blcok元素的間距，壓縮HTML後行內表單元素的右邊距會消失，需自行處理。

　　表單group元素加上am-form-icon，依賴icon組件

　　<form action="" class="am-form am-form-inline">
　　　　<div class="am-form-group am-form-icon">
　　　　　　<i class="am-icon-calendar"></i>
　　　　　　<input type="text" class="am-form-field" placeholder="日期">
　　　　</div>

　　　　<div class="am-form-group am-form-icon">
　　　　　　<i class="am-icon-clock-o"></i>
　　　　　　<input type="text" class="am-form-field" placeholder="時間">
　　　　</div>
　　</form>

 

　　驗證狀態　

　　<form action="" class="am-form">
　　　　<div class="am-form-group am-form-success am-form-icon am-form-feedback">
　　　　　　<label class="am-form-label" for="doc-ipt-success">驗證成功</label>
　　　　　　<input type="text" id="doc-ipt-success" class="am-form-field">
　　　　　　<span class="am-icon-check"></span>
　　　　</div>
　　　　<div class="am-form-group am-form-warning">
　　　　　　<label class="am-form-label" for="doc-ipt-warning">驗證警告</label>
　　　　　　<input type="text" id="doc-ipt-warning" class="am-form-field">
　　　　</div>
　　　　<div class="am-form-group am-form-error">
　　　　　　<label class="am-form-label" for="doc-ipt-error">驗證失敗</label>
　　　　　　<input type="text" id="doc-ipt-error" class="am-form-field">
　　　　</div>
　　</form>

　　帶圖標的驗證：添加am-form-icon和am-form-feedback　　

　　<form class="am-form">
　　　　<div class="am-form-group am-form-success am-form-icon am-form-feedback">
　　　　　　<input type="text" class="am-form-field" placeholder="驗證成功">
　　　　　　<span class="am-icon-check"></span>
　　　　</div>
　　　　<div class="am-form-group am-form-warning am-form-icon am-form-feedback">
　　　　　　<input type="text" class="am-form-field" placeholder="驗證警告">
　　　　　　<span class="am-icon-warning"></span>
　　　　</div>
　　　　<div class="am-form-group am-form-error am-form-icon am-form-feedback">
　　　　　　<input type="text" class="am-form-field" placeholder="驗證失敗">
　　　　　　<span class="am-icon-times"></span>
　　　　</div>
　　</form>

　　單個域的大小：am-input-lg、am-input-sm

　　組大小 在am-form-group的基礎上添加了am-form-group-sm和am-form-group-lg，能夠實現對錶達大小的設置。

　　使用am-form-set嵌套一些列<input>元素。

　　<div class="am-g">
　　　　<div class="am-u-md-8 am-u-sm-centered">
　　　　　　<form class="am-form">
　　　　　　　　<fieldset class="am-form-set">
　　　　　　　　　　<input type="text" placeholder="取個名字">
　　　　　　　　　　<input type="text" placeholder="設個密碼">
　　　　　　　　　　<input type="email" placeholder="填下郵箱">
　　　　　　　　</fieldset>
　　　　　　　　<button type="submit" class="am-btn am-btn-primary am-btn-block">註冊個帳號</button>
　　　　　　</form>
　　　　</div>
　　</div>

 

 

　　demo

<form class="am-form">
　　<fieldset>
　　<legend>表單標題</legend>

　　<div class="am-form-group">
　　　　<label for="doc-ipt-email-1">郵件</label>
　　　　<input type="email" class="" id="doc-ipt-email-1" placeholder="輸入電子郵件">
　　</div>

　　<div class="am-form-group">
　　　　<label for="doc-ipt-pwd-1">密碼</label>
　　　　<input type="password" class="" id="doc-ipt-pwd-1" placeholder="設置個密碼吧">
　　</div>

　　<div class="am-form-group">
　　　　<label for="doc-ipt-file-1">原生文件上傳域</label>
　　　　<input type="file" id="doc-ipt-file-1">
　　　　<p class="am-form-help">請選擇要上傳的文件...</p>
　　</div>

　　<div class="am-form-group am-form-file">
　　　　<label for="doc-ipt-file-2">Amaze UI 文件上傳域</label>
　　　　<div>
　　　　　　<button type="button" class="am-btn am-btn-default am-btn-sm">
　　　　　　<i class="am-icon-cloud-upload"></i> 選擇要上傳的文件</button>
　　　　</div>
　　　　<input type="file" id="doc-ipt-file-2">
　　</div>

　　<div class="am-checkbox">
　　　　<label>
　　　　　　<input type="checkbox"> 複選框，選我選我選我
　　　　</label>
　　</div>　　

　　<div class="am-radio">
　　　　<label>
　　　　　　<input type="radio" name="doc-radio-1" value="option1" checked>
　　　　　　單選框 - 選項1
　　　　</label>
　　</div>

　　<div class="am-radio">
　　　　<label>
　　　　　　<input type="radio" name="doc-radio-1" value="option2">
　　　　　　　　單選框 - 選項2
　　　　</label>
　　</div>

　　<div class="am-form-group">
　　　　<label class="am-checkbox-inline">
　　　　　　<input type="checkbox" value="option1"> 選我
　　　　</label>
　　　　<label class="am-checkbox-inline">
　　　　　　<input type="checkbox" value="option2"> 同時能夠選我
　　　　</label>
　　　　<label class="am-checkbox-inline">
　　　　　　<input type="checkbox" value="option3"> 還能夠選我
　　　　</label>
　　　</div>

　　<div class="am-form-group">
　　　　<label class="am-radio-inline">
　　　　　　<input type="radio" value="" name="docInlineRadio"> 每一分
　　　　</label>
　　　　<label class="am-radio-inline">
　　　　　　<input type="radio" name="docInlineRadio"> 每一秒
　　　　</label>
　　　　<label class="am-radio-inline">
　　　　　　<input type="radio" name="docInlineRadio"> 多好
　　　　</label>
　　</div>

　　<div class="am-form-group">
　　　　<label for="doc-select-1">下拉多選框</label>
　　　　<select id="doc-select-1">
　　　　　　<option value="option1">選項一...</option>
　　　　　　<option value="option2">選項二.....</option>
　　　　　　<option value="option3">選項三........</option>
　　　　</select>
　　　　<span class="am-form-caret"></span>
　　</div>

　　<div class="am-form-group">
　　　　<label for="doc-select-2">多選框</label>
　　　　<select multiple class="" id="doc-select-2">
　　　　　　<option>1</option>
　　　　　　<option>2</option>
　　　　　　<option>3</option>
　　　　　　<option>4</option>
　　　　　　<option>5</option>
　　　　</select>
　　</div>

　　<div class="am-form-group">
　　　　<label for="doc-ta-1">文本域</label>
　　　　<textarea class="" rows="5" id="doc-ta-1"></textarea>
　　</div>

　　<p><button type="submit" class="am-btn am-btn-default">提交</button></p>
</fieldset>
</form>

 

 

　　　　圖片

　　響應式圖片 am-img-responsive

　　圓角圖片 am-radius

　　橢圓角圖片 am-round

　　圓形  am-cricle

　　邊框 am-img-thumbnail

　　

 

　　　　表格（am-table）

　　基本邊框 am-table-bordered

　　圓角邊框 am-table-bordered am-table-radius 外層圓角邊框經過box-shadow實現

　　單元格狀態 am-active（激活狀態） am-disabled（禁用） am-primary（藍色高亮） am-success（綠色高亮） am-warning（橙色高亮） am-danger（紅色高亮）

　　斑馬紋效果 am-table-striped

　　狀態 am-table-hover

　　緊湊 am-table-compact 調整padding顯得單元格更緊湊

　　響應式表格 am-text-nowrap(禁止文字換行)  am-scrollable-horizontal(內容超出容器寬度時顯示水平滾動條)

　　單元格水平居中對齊 am-table-centered

　　單元格中文字垂直居中對齊 am-text-middle