LuLu UI Edge版中文文档 » 静态控件之按钮

安装与调用

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

<link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/ui/Button.css">

import导入语法：

import 'lu2/theme/edge/css/common/ui/Button.css';

原生<button>按钮

推荐使用<button>标签按钮。

基本状态

默认按钮

<button class="ui-button">默认按钮</button>

<button type="normal" class="ui-button">正常按钮</button>

宽度100%按钮

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

主按钮 主按钮文字很多

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

绿色系 绿色系按钮文字很多

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

橙色 橙色文字很多

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

红色 红色文字很多

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

is 属性语法

支持 is="ui-button" 设置。

基本按钮 正常按钮

<button is="ui-button">基本按钮</button>
<button type="primary" is="ui-button">主按钮</button>

<button> 默认为 submit 类型，如果在表单中，会触发表单的提交行为，此时需要使用 type 进行设置，这个时候，按钮的类型可以使用 data-type 属性进行设置。

<button type="button" data-type="primary" is="ui-button">主按钮</button>
<button type="button" data-type="danger" is="ui-button">危险按钮</button>

效果为：主按钮 危险按钮

禁用状态

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

例如：

button按钮禁用 button按钮禁用

<button type="normal" class="ui-button" disabled>button按钮禁用</button>
<button type="primary" is="ui-button" disabled>button按钮禁用</button>

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

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

loading状态

button 标签 button 标签 button 标签

button 标签 button 标签

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

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

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

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

<a> 标签按钮们

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

基本状态

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

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

按钮禁用

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

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

HTML代码示意：

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

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

按钮loading

点击loading绽放 点击loading绽 点击loading 点loading button标签loading

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

如果引入了Loading.js，也可以使用dom.loading=true和dom.loading=false语句来增加和移除loading效果。

普通标签按钮

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

<label>标签按钮

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

span标签

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

div标签

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

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

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