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>

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

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

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

普通标签按钮

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

<label>标签按钮

<label type="error" class="ui-button" tabindex="0" role="button">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 UI 的 Keyboard.cssKeyboard.js 来实现体验优化。

本页贡献者:

zhangxinxu