类名(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-submit、w-filter即为公共属性(即以 w- 作为前缀的自定义属性):
<button class="wui-btn" w-submit w-filter="login">登入</button>
目前我们的公共属性如下所示(即普遍运用于所有元素上的属性)
属性 | 描述 |
---|---|
skin=" " | 定义相同元素的不同风格,如checkbox的开关风格 |
w-filter=" " | 事件过滤器。你可能会在很多地方看到他,他一般是用于监听特定的自定义事件。你可以把它看作是一个ID选择器 |
w-submit | 定义一个触发表单提交的button,不用填写值 |
额,好像有点少的样子(反正你也基本不会看文档。。(づ╥﹏╥)づ)。其它的自定义属性基本都在各自模块的文档中有所介绍。