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
页面元素规范与说明

wui 提倡返璞归真,遵循于原生态的元素书写规则,所以通常而言,你仍然是在写基本的 HTML 和 CSS 代码,不同的是,在 HTML 结构上及 CSS 定义上需要小小遵循一定的规范。
类名(class) 说明
布局 / 容器
wui-main 用于设置一个不固定宽度的水平居中块(无响应式),支持以下固定宽度:
wui-main-768 宽度为 768px
wui-main-960 宽度为 960px
wui-main-980 宽度为 980px
wui-main-1190 宽度为 1190px
wui-main-1210 宽度为 1120px
wui-inline 用于将标签设为内联块状元素
wui-box 用于排除一些UI框架(如Bootstrap)强制将全部元素设为box-sizing: border-box所引发的尺寸偏差
wui-clear 用于消除浮动(一般不怎么常用,因为wui几乎没用到浮动)
wui-btn-container 用于定义按钮的父容器。
辅助
wui-icon 用于图标
wui-elip 用于单行文本溢出省略
wui-unselect 用于屏蔽选中
wui-disabled 用于设置元素不可点击状态
wui-circle 用于设置元素为圆形
wui-show 用于显示块状元素
wui-hide 用于隐藏元素
文本
wui-text 定义一段文本区域(如文章),该区域内的特殊标签(如a、li、em等)将会进行相应处理
wui-normal 去掉文字样式,包括字体、字号、颜色等
wui-word-aux 灰色标注性文字,左右会有间隔
背景色
wui-bg-red 用于设置元素赤色背景
wui-bg-orange 用于设置元素橙色背景
wui-bg-green 用于设置元素墨绿色背景(主色调)
wui-bg-cyan 用于设置元素藏青色背景
wui-bg-blue 用于设置元素蓝色背景
wui-bg-black 用于设置元素经典黑色背景
wui-bg-gray 用于设置元素经典灰色背景

class命名前缀:wui,连接符:-,如:class="wui-form"

命名格式一般分为两种:一:wui-模块名-状态或类型,二:wui-状态或类型。因为有些类并非是某个模块所特有,他们通常会是一些公共类。如:一(定义按钮的原始风格):class="wui-btn wui-btn-primary"、二(定义内联块状元素):class="wui-inline"

大致记住这些简单的规则,会让你在填充HTML的时候显得更加得心应手。另外,如果你是开发wui拓展(模块),你最好也要遵循于类似的规则,并且请勿占用wui已经命名好的类,假设你是在帮wui开发一个markdown编辑器,你的css书写规则应该如下:

.wui-markdown{border: 1px solid #e2e2e2;}
.wui-markdown-tools{}
.wui-markdown-text{}

wui在解析HTML元素时,必须充分确保其结构是被支持的。以Tab选项卡为例:

<div class="wui-tab">
  <ul class="wui-tab-title">
    <li class="wui-this">标题一</li>
    <li>标题二</li>
    <li>标题三</li>
  </ul>
  <div class="wui-tab-content">
    <div class="wui-tab-item wui-show">内容1</div>
    <div class="wui-tab-item">内容2</div>
    <div class="wui-tab-item">内容3</div>
  </div>
</div>

你如果改变了结构,极有可能会导致Tab功能失效。所以在嵌套HTML的时候,你应该细读各个元素模块的相关文档(如果你不是拿来主义)

很多时候,元素的基本交互行为,都是由模块自动开启。但不同的区域可能需要触发不同的动作,这就需要你设定我们所支持的自定义属性来作为区分。如下面的 w-submitw-filter即为公共属性(即以 w- 作为前缀的自定义属性):

<button class="wui-btn" w-submit w-filter="login">登入</button>

目前我们的公共属性如下所示(即普遍运用于所有元素上的属性)

属性 描述
skin=" " 定义相同元素的不同风格,如checkbox的开关风格
w-filter=" " 事件过滤器。你可能会在很多地方看到他,他一般是用于监听特定的自定义事件。你可以把它看作是一个ID选择器
w-submit 定义一个触发表单提交的button,不用填写值

额,好像有点少的样子(反正你也基本不会看文档。。(づ╥﹏╥)づ)。其它的自定义属性基本都在各自模块的文档中有所介绍。

© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile