LuLu UI pure主题中文文档 » 静态控件之按钮

作为插件单独使用

如果只想以插件形式单独使用按钮的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="/login" class="ui-button" data-type="primary">主色-去登录</a>
<a href class="ui-button" data-type="success">绿色系</a>
<a href class="ui-button" data-type="warning">橙色</a>
<a href class="ui-button" data-type="danger">红色</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标签按钮

<label class="ui-button" tabindex="0" role="button">label标签按钮</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的交互做了优化，如果对这方面要求较高，可以考虑引入。

按钮禁用

关联的label标签按钮

<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