WUI v1.1.0

基础说明

开始使用 Getting Started
底层方法 基础支撑
页面元素 规范 / 公共类
模块规范 使用 / 扩展
常见问题 FAQ
更新日志

页面元素

布局 容器 / 栅格 / 后台布局
颜色 主题色 / 内置背景色
图标 字体图标
动画 内置 CSS3 动画
按钮 button 组
表单 form 元素集合
导航 菜单 / 面包屑
选项卡 Tabs 切换
进度条 progress
面板 折叠 / 手风琴
表格 静态 table
徽章 小圆点 / 小边框
时间线 timeline
区块 引用 / 字段集
文字 颜色 / 链接 / 位置
辅助 边距 / 填充 / 横线等

内置模块

弹出层 layer
日期与时间选择 wdate
分页 wpage
模板引擎 wtpl
数据表格 table
表单 form
文件上传 upload
穿梭框 transfer
树形组件 tree
颜色选择器 colorpicker
常用元素操作 element
滑块 slider
评分 rate
轮播 carousel
流加载 flow
工具集 util
简单编辑器 wedit
富文本编辑器 tinymce
下拉菜单 menu
拖动排序 dragsort
自动完成 autocomplete
代码修饰器 code
通知控件 notice
下拉多选控件 xmSelect
滑块验证 sliderVerify
无限级联选择器 cascader
按钮 - 页面元素

向任意HTML元素设定class="wui-btn",建立一个基础按钮。通过追加格式为 wui-btn-* 的class来定义其它按钮风格。内置的按钮class可以进行任意组合,从而形成更多种按钮风格。
<button type="button" class="wui-btn">一个标准的按钮</button>
<a href="#" class="wui-btn">一个可跳转的按钮</a>
<span class="wui-btn">一个无操作的按钮</span>
原始按钮 默认按钮 百搭按钮 暖色按钮 警告按钮 禁用按钮
名称 组合
原始 class="wui-btn wui-btn-primary"
默认 class="wui-btn"
百搭 class="wui-btn wui-btn-normal"
暖色 class="wui-btn wui-btn-warm"
警告 class="wui-btn wui-btn-danger"
禁用 class="wui-btn wui-btn-disabled"
属性名 属性值 备注
size='属性值' lg (大型按钮)
sm (小型按钮)
xs (迷你按钮)
默认按钮可以不用设置
skin='属性值' radius (圆角按钮)
block (块状按钮)
可选
尺寸
大型按钮 默认按钮 小型按钮 迷你按钮
风格
原始按钮 默认按钮 百搭按钮 暖色按钮 警告按钮 禁用按钮
块状按钮(占据整个水平宽度)
<span class="wui-btn" size="lg">大号</span>
<span class="wui-btn">默认</span>
<span class="wui-btn" size="sm">小号</span>
<span class="wui-btn" size="xs">超小号</span>

<span class="wui-btn" skin="radius" size="lg">圆角按钮</span>

<span class="wui-btn" skin="block">块状按钮(占据整个水平宽度)</span>
添加 添加 添加 添加 添加 添加10
<span class="wui-btn" size="lg" skin="radius">
    <i class="wui-icon wui-icon-addhao"></i> 添加
</span>

<span class="wui-btn wui-btn-warning">
    <i class="wui-icon wui-icon-right"></i>
</span>

将按钮放入一个class="wui-btn-group"元素中,即可形成按钮组,按钮本身仍然可以随意搭配
<div class="wui-btn-group">
   <button type="button" class="wui-btn">增加</button>
   <button type="button" class="wui-btn">编辑</button>
   <button type="button" class="wui-btn">删除</button>
</div>
尽管按钮在同节点并排时会自动拉开间距,但在按钮太多的情况,效果并不是很美好。因为你需要用到按钮容器
<div class="wui-btn-container">
   <button class="wui-btn">按钮一</button>
   <button class="wui-btn">按钮一</button>
   <button class="wui-btn">按钮一</button>
</div>
你是否发现,主题、尺寸、图标、圆角的交叉组合,可以形成难以计算的按钮种类。另外,你可能最关注的是配色,wui 内置的六种主题的按钮颜色都是业界常用的标准配色,如果他们仍然无法与你的网站契合,那么请先允许我“噗”一声。。。然后你就大胆地自撸一个颜色吧!比如:粉红色或者菊花色(一个有味道的颜色)
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile