AmazeUI 框架知識點-元素


1、按鈕  .am-btn

  圓角按鈕 .am-radius

  橢圓形按鈕 .am-round

  按鈕激活狀態 .am-active

  禁用狀態 .am-disabled

2、按鈕尺寸.am-btn-xl

  .am-btn-lg

  .am-btn-default

 

  .am-btn-sm

  .am-btn-xs

3、塊級顯示按鈕

  .am-btn-block

4、按鈕 Icon(使用 Icon 之前需先引入 Icon 組件

  am-icon-{}

5、代碼

  使用 <code> 標簽的代碼。

  放在 <pre> 里面的代碼片段

  添加 .am-pre-scrollable 限制代碼塊高度,默認為 24rem

6、表單

  <select> 是一個比較奇葩的元素,長得丑還不讓人給它打扮。

  <input type="file"> 也是 CSS 啃不動的一塊骨頭,如果實在看不慣原生的樣式,一般的做法是把文件選擇域設為透明那個,覆蓋在其他元素。存在的問題是不會顯示已經選擇的文件,對用戶不夠友好,需要配合 JS 使用(文檔)

 

  在容器上添加 .am-form ,容器里的子元素才會應用 Amaze UI 定義的樣式

  fieldset表單分塊

  針對fieldset表單分塊的<legend>表單標題</legend>

7、表單樣式:am-form-field

  表單形狀:am-radius、am-round

  給 <input> 添加 disabled 屬性以禁用表單元素。或:<fieldset disabled>

  am-form-group 表單分組

  <a> 元素設置禁用狀態需要加上 .am-disabled class。

8、表單排列

  水平排列:在 <form> 添加 .am-form-horizontal class 並結合網格系統使用。

  行內排列:在外圍容器上添加 .am-form-inline。 注意: 行內排列的元素並沒有設置右邊距,默認使用 inline-block 元素的間距,壓縮 HTML 后行內表單元素的右邊距會消失,需要自行處理。

9、表單icon

  表單 group 元素上添加 .am-form-icon,依賴 icon 組件。

  <div class="am-form-group am-form-icon">

    <i class="am-icon-calendar"></i>

      <input type="text" class="am-form-field" placeholder="日期">

10、單個域的大小 適用於沒有 <label> 的表單

  am-input-lg

  am-input-sm

  在 .am-form-group 的基礎上添加以下 class,也可以實現對表單大小的設置

  .am-form-group-sm

  .am-form-group-lg

  可輸入類型的 input 元素上需要添加 .am-form-field,不需要再添加 .am-input-sm 此類的 class。

11、輸入框組

  使用 .am-form-set 嵌套一系列 <input> 元素

12、圖片

  基礎樣式中取消了圖片最大寬度設置,新增了 .am-img-responsive class。

  為<img>元素設置不同的 class,增強其樣式。.am-radius 圓角 .am-round 橢圓 .am-circle 圓形

  .am-img-thumbnail 邊框


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM