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
徽章

徽章是一个修饰性的元素,它们本身细小而并不显眼,但掺杂在其它元素中就显得尤为突出了。页面往往因徽章的陪衬,而显得十分和谐。
不妨先来看看 徽章 这个小小的大家族吧:
6 99 61728 绿 6 Hot $Code
小圆点,通过 wui-badge-dot 来定义,里面不能加文字
<span class="wui-badge-dot"></span>
<span class="wui-badge-dot wui-bg-orange"></span>
<span class="wui-badge-dot wui-bg-green"></span>
<span class="wui-badge-dot wui-bg-cyan"></span>
<span class="wui-badge-dot wui-bg-blue"></span>
<span class="wui-badge-dot wui-bg-black"></span>
<span class="wui-badge-dot wui-bg-gray"></span>

椭圆体,通过 wui-badge 来定义。事实上我们把这个视作为主要使用方式
<span class="wui-badge">6</span>
<span class="wui-badge">99</span>
<span class="wui-badge">61728</span>

<span class="wui-badge">赤</span>
<span class="wui-badge wui-bg-orange">橙</span>
<span class="wui-badge wui-bg-green">绿</span>
<span class="wui-badge wui-bg-cyan">青</span>
<span class="wui-badge wui-bg-blue">蓝</span>
<span class="wui-badge wui-bg-black">黑</span>
<span class="wui-badge wui-bg-gray">灰</span>

边框体,通过 wui-badge-rim 来定义
<span class="wui-badge-rim">6</span>
<span class="wui-badge-rim">Hot</span>

代码体,通过 wui-badge-code 来定义
<span class="wui-badge-code">$Code</span>
徽章主要是修饰作用,因此必不可少要与几乎所有的元素搭配。我们目前对以下元素内置了徽章的排版支持:
<button class="wui-btn">查看消息<span class="wui-badge wui-bg-gray">1</span></button>
<button class="wui-btn">动态<span class="wui-badge-dot wui-bg-orange"></span></button>
<ul class="wui-nav" style="text-align: right;">
  <-- 小Tips:这里有没有发现,设置导航靠右对齐(或居中对齐)其实非常简单 -->
  <li class="wui-nav-item">
    <a href="">控制台<span class="wui-badge">9</span></a>
  </li>
  <li class="wui-nav-item">
    <a href="">个人中心<span class="wui-badge-dot"></span></a>
  </li>
</ul>
  • 网站设置
  • 用户管理
  • 最新邮件99+
<div class="wui-tab wui-tab-brief">
  <ul class="wui-tab-title">
    <li class="wui-this">网站设置</li>
    <li>用户管理<span class="wui-badge-dot"></span></li>
    <li>最新邮件<span class="wui-badge">99+</span></li>
  </ul>
  <div class="wui-tab-content"></div>
</div>
其实,在与其它元素的搭配中,你要做的,无非就是合理运用这几点:边距 背景色,徽章必然大显神威!其它更多元素的搭配,就由你自由把控吧!
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile