文档章节

AmazeUI HTML元素

开源中国小卖部店员
 开源中国小卖部店员
发布于 2016/10/26 15:40
字数 1153
阅读 51
收藏 0

 按钮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

© 著作权归作者所有

上一篇: string
下一篇: AmazeUI基本样式
开源中国小卖部店员
粉丝 18
博文 52
码字总数 15073
作品 0
苏州
后端工程师
私信 提问
中国首个开源HTML5 跨屏前端框架Amaze UI

云适配,这是一家能以一行代码将你的网站移动化,实现网址不变且内容实时自动同步的服务提供商。云适配所采用的技术是一项基于云计算、利用html5进行网站跨屏适配,它为目标网站开发一行JS代...

panpanhtai
2014/06/26
19
0
Amaze UI——可能是最好用的 HTML5 前端框架

Amaze UI 是一个针对 HTML 5 开发的轻量级、模块化、移动优先的跨屏前端框架,通过拆分、封装了一些常用的网页组件,比如轮播图框、文字框等等组件,让前端开发者只用复制代码便可以将这些跨...

oschina
2014/09/17
40K
39
bingoJS 2.x | AmazeUI 后台 SPA 管理框架

AmazeUI - admin 基于AmazeUI - admin 模板。 bingoJS 2.x 使用bingoJS 2.x 前端MV开始。 demo 在线demo PS:基于 AmazeUI(amdin) + bingoJS 2.x 实现模块化单页面(SPA)快速开发后台管理框架...

front-Y
2016/08/01
1K
0
开发时间缩短90% Amaze UI助H5梦工场响应式网站快速上线

近日,HTML5梦工场使用云适配开源HTML5跨屏前端框架Amaze UI对自身网站进行了重新开发。开发完成的新网站,用户无论通过任何终端访问,网站内容都能保持实时同步,并能以最佳的展现方式呈现出...

云适配
2016/05/17
3
0
极速开发网站CMS后台管理系统框架

该cms后台管理网站模版,能够适应电脑和手机两种设备,采用自适应进行设计。同时页面的操作采用的是iframe进行框架的搭建,能够动态无刷新的进行页面切换,可以存在多个tab页面进行切换,框架...

半张一块
2016/10/09
19
1

没有更多内容

加载失败,请刷新页面

加载更多

arcgis arcpy 克里金插值 掩膜 配置符号系统 自动生成图片

整体思路,最后要加载到mxd文件中,然后导出图片 首先加载mxd文件 mxd = mapping.MapDocument(r"./11.mxd") 然后读取数据 并加载到图层中 sr = arcpy.SpatialReference(4326) # 读取csv...

可达鸭Go
55分钟前
4
0
漂亮有创意的思维导图模板分享

相信很多人使用在绘制思维导图时很喜欢使用模板进行编辑,它能够让你在短时间内快速创造出一个风格明显好看的思维导图,对绘制时间以及使用够感受影响都是较为深刻的,下面为大家分享几款漂亮...

干货趣分享
今天
4
0
使用js实现对cookie的增删改查

简单的操作cookie 存储cookie(key为test;value为testValue): document.cookie = "test=testValue"; 存储多个cookie: document.cookie = "test1=testValue1";document.cookie = "test2=te......

被毒打的程序猿_先瑞
今天
4
0
ApacheCN 公众号文章汇总 2019.9

ApacheCN 优质博文推荐计划正式启动 接受以下主题的博文: 人工智能(论文解读,比赛心得,面经,知识点讲解) 环材化生劝退 CS 留学申请,IT 外企求职 每日从所有投稿中精选两篇,在 Apache...

ApacheCN_飞龙
今天
5
0
Intellij Idea显示回退和前进按钮的方法

方法1:使用快捷键: 回到上一步 ctrl + alt + <-(左方向键) 回到下一步 ctrl + alt + ->(右方向键) 方法2:在界面显示: View -> 勾选ToolBar 方法3(推荐): (1)Preferences -> Ap...

孟飞阳
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部