LuLu UI pure版中文文档 »

Fork Me

静态控件之按钮

作为插件单独使用

如果只想以插件形式单独使用按钮的UI,可以直接引入:

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Button.css">

原生<button>按钮

在Pure主题下,LuLu UI推荐使用<button>标签按钮。

基本状态

<button class="ui-button">基本按钮</button>
<!-- 或者 -->
<button class="ui-button" data-type="normal">基本按钮</button>

<button class="ui-button" width="100%">宽度100%按钮</button>

<button class="ui-button" data-type="primary">主按钮</button>

<button class="ui-button" data-type="success">绿色系</button>

<button class="ui-button" data-type="warning">橙色</button>

<button class="ui-button" data-type="danger">红色</button>

禁用状态

对于原生按钮,禁用按钮只需要添加disabled属性即可,不仅样式处于禁用态,且元素的原生行为(如表单提交行为,键盘focus行为)也都会被禁止。

例如:

<button class="ui-button" disabled>button按钮禁用</button>

对于<input>标签按钮同样适用,但更推荐使用<button>标签按钮,因为loading效果更好。

<input type="button" class="ui-button" value="input标签" disabled>

loading状态

<button class="ui-button loading">button标签</button>
<button class="ui-button loading" data-type="primary">button标签</button>

由于<input>按钮不支持伪元素,因此,<input>按钮的loading效果只能使用背景图模拟,效果如下:

<input class="ui-button loading" value="input标签">
<input class="ui-button loading" value="input标签" data-type="primary">

Tips: 所有按钮的loading效果在IE9浏览器下是静态的三个点。

<a>标签按钮们

<a>标签按钮的优点是可以作为链接使用,如果是纯按钮,推荐使用<button>标签。

基本状态

基本按钮 主按钮 绿色系 橙色-警示 红色-危险

<a href="javascript:" class="ui-button" role="button">基本按钮</a>
<a href="javascript:" class="ui-button" data-type="primary" role="button">主按钮</a>
<a href="javascript:" class="ui-button" data-type="success" role="button">绿色系</a>
<a href="javascript:" class="ui-button" data-type="warning" role="button">橙色</a>
<a href="javascript:" class="ui-button" data-type="danger" role="button">红色</a>

按钮禁用

<button>标签按钮相比有两点变化:一是需要移除href属性(使元素无法被键盘focus),二是使用disabled类名而非属性(视觉上表现为禁用态)。

白色按钮禁用 蓝色按钮禁用 绿色按钮禁用 橙色按钮禁用 红色按钮禁用

HTML代码示意:

<a class="ui-button disabled">白色按钮禁用</a>
<a class="ui-button disabled" data-type="primary">蓝色按钮禁用</a>
<a class="ui-button disabled" data-type="success">绿色按钮禁用</a>
<a class="ui-button disabled" data-type="warning">橙色按钮禁用</a>
<a class="ui-button disabled" data-type="danger">红色按钮禁用</a>

另外,<a>标签按钮的禁用态仅仅是视觉上表现为禁用,实际上依然可以响应点击事件,所以还是需要JS在逻辑中增加按钮是否可用的判断,因此推荐使用<button>标签按钮。

按钮loading

点击loading绽放 点击loading绽 点击loading 点loading loading

<a href="javascript:" class="ui-button loading" role="button">点击loading绽放</a>

如果引入了Loading.js,也可以使用dom.loading()dom.unloading()语句来增加和移除loading效果。相比直接使用classList API添加删除会有更好的无障碍访问体验。

<label>标签按钮

实际开发时候,<label>标签按钮都是与原生表单按钮组合使用,例如提交按钮在表单外部(更推荐在提交按钮上使用form属性)。

基本使用

没有关联,纯标签,白色,自身语义为按钮:

<label class="ui-button" tabindex="0" role="button">label标签按钮</label>

和原生按钮相关联:

此时,点击按钮可以触发表单提交行为。

<input id="someId" type="submit">
<label class="ui-button" for="someId" data-type="primary" role="button">关联的label标签按钮</label>

LuLu UI的Keyborad.js对outline的交互做了优化,如果对这方面要求较高,可以考虑引入。

按钮禁用

<input id="someId2" type="submit" disabled>
<label class="ui-button disabled" for="someId2" data-type="primary">关联的label标签按钮</label>

普通标签按钮

使用场景有限,不推荐使用,毕竟语义和可访问性都需要额外处理,除非你的项目对这些并不在意,如内部项目。

span标签

span标签同时红色文字很多
<span class="ui-button" data-type="danger" role="button" tabindex="0">span标签同时红色文字很多</span>

div标签

有时候,我们希望按钮是自适应外部容器宽度的,此时,可以使用div标签,为了保证按钮的可访问性,需要设置role="button"以及tabindex="0"

div标签为块状按钮
<div class="ui-button" data-type="danger" role="button" tabindex="0">div标签为块状按钮</div>

普通标签设置tabindex属性会有outline轮廓,Button.css默认去除了,但是影响了键盘无障碍访问。此时可以引入LuLu的Keyboard.css和Keyboard.js实现体验优化。

本页贡献者:

zhangxinxu