组件
面包屑
用于带有层次的导航,active状态表明当前页面的位置
如何使用
给父元素添加.u-breadcrumb
,自定义导航结构的分隔符
基础
“/“为分隔符
|
图标面包屑
“/“为分隔符,并添加Home icon
|
|
其他分隔符
|
|
按钮组
样式为u-button-group
的父元素,包裹多个样式为u-button
的button元素
基础
|
嵌套
按钮组里嵌套下拉菜单
|
多尺寸
.u-button-group-xg
- 特大尺寸.u-button-group-lg
- 大尺寸.u-button-group-xs
- 小尺寸- 不添加样式代表默认尺寸
|
|
dropdown
左边menu
- 新增
- 修改
- 删除
- 审核
- 新增
- 修改
- 删除
- 审核
|
|
不同颜色的下拉
按钮配色,不同的色彩代表不同的情感和状态。添加颜色样式类分别为.u-button-success
、u-button-info
、u-button-danger
、u-button-warning
。
|
分割下拉
分割下拉由一个文字和一个图标组成。
- 创建一个含有
u-button-group
、u-split
的div容器 - 在第一步中的div容器中创建含有
u-split-pre
的button - 接着在第一步中的div容器中创建含有
u-button-group
、u-split-sub
的div容器。在容器此div中创建菜单按钮
|
|
基本菜单按钮
菜单按钮包括一个普通的button按钮和一个下拉内容ul元素。显示效果有4种,
分别为:显示在按钮下方,左对齐、显示在按钮下方,右对齐、显示在按钮上方,左对齐、显示在按钮上方,右对齐。
具体使用
创建button元素,添加id属性,属性值可以自己定义 点击它时,菜单会进行隐藏或者显示。
创建样式为“u-menu”的ul下拉列表,用于包括菜单内容。ul上定义for属性,属性值与第一步创建button中的id对应。菜单的样式还可以选择
u-menu-bottom-left
、u-menu-bottom-right
、u-menu-top-left
、u-menu-top-right
中的一个来表示菜单相对于按钮的显示位置。在ul标签内,使用样式为
u-menu-item
的li标签定义菜单的具体内容,当li标签不可用时,可以添加disabled
属性。
|
输入框组
由input和按钮组成,按钮里可以是单纯的字体或者是checkbox、radio,还可以是下拉框
如何使用
添加含有u-button-group
样式的父元素,然后包裹一个以上的类为u-button
button元素
|
|
|
|
|
列表组
多个列表条目的无序列表,我们提供了一些预定义的样式
基础
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
|
带图标
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
|
列表是链接
|
媒体对象
允许在一个内容块的左边或右边展示一个多媒体内容(图像、视频、音频)
默认样式
|
嵌套
媒体对象里嵌套媒体对象,只要整要嵌套的媒体对象放在父的media-body
标签里
u-Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
对齐
默认上对齐media-middle
: 中对齐media-bottom
: 底对齐
u-Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.u-Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.u-Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
|
|
message控件
用于即时信息的提示,添加.u-message即可实现一个基本的消息提示。其他效果的消息实现只需添加相应的样式即可。
基础message
.u-mesnews
- 新闻类提示.u-mesinfo
- 普通信息提示.u-messuccess
- 成功信息提示.u-mesdanger
- 错误信息提示.u-meswarning
- 警告信息提示
|
|
带icon
的加深颜色版message
背景色加深 .dark
类提供了选择
消息类型对应相应的icon
|
|
|
导航条
提供了几条常用的导航,包括基础导航、工具导航、图片导航、不同颜色导航。具体代码在webIDE进行在线测试。
|
|
|
分页控件
分页控件提供了无border分页、有间距的分页、多尺寸分页。
如何使用
分页通过添加u-pagination
的样式来实现基本的分页效果
基础
|
|
无边框
在含有u-pagination
的div元素中添加u-pagination-no-border
样式即可
|
|
有间距
添加样式pagination-gap
可以增加页码之间的间距
|
|
多尺寸
添加pagination-lg
、pagination-sm
样式可以使分页变大、变小
大尺寸
默认尺寸
小尺寸
|
|
面板
基础
Heading With Desc Panel Description Here..
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. pellentesque.ipiscing elit. Fusce velit tortor.
|
带标题和注脚
Panel Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. pellentesque.ipiscing elit. Fusce velit tortor.
|
带注脚的面板
Body Heading
Wrap buttons or secondary text in .panel-footer
. Note
that panel footers do not inherit colors and borders when using
contextual variations as they are not meant to be in the foreground.
|
带标题的面板
Panel Heading
Body Heading
Easily add a heading container to your panel with .u-panel-heading
.
You may also include any <h1>
-<h6>
with a .panel-title
class to add a pre-styled heading.
For proper link coloring, be sure to place links in headings within
.u-panel-title
.
|
tooltip控件
当您想要描述一个链接的时候,提示工具(Tooltip)就显得非常有用。
方向
|
|
预定义样式
|
|