LuLu UI Edge版中文文档 » Button 按钮

安装与调用

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

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

<script type="module" src="https://qidian.gtimg.com/lulu/hope/ui/Button/index.js"></script>

<script type="module">
    import 'https://qidian.gtimg.com/lulu/hope/ui/Button/index.js';
</script>

推荐使用语法

本组件按钮支持几乎任意的 HTML 标签，不过推荐使用 <button> 标签作为按钮，如果按钮的交互行为是链接跳转，可以使用 <a> 链接元素。

支持类名和属性名定义按钮，在这里推荐使用 is 属性进行设置，因为可以和 JS 代码配合进行更好的功能增强。

按钮的类型推荐使用 type 属性进行设置，如果 type 属性被占用，可以使用 data-type 属性进行按钮类型的设置。

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

按钮类型概览

按钮分为 5 种颜色状态，常规默认按钮、主色按钮、成功按钮、警告按钮和危险按钮，各自的使用和效果如下所示。

基本按钮

不设置 type 类型，或者是无法匹配的 type 类型，都会使用网站的主色作为按钮背景色。

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

常规按钮

常规按钮的 type 类型是 'normal' 或 'default'。

<button type="normal" is="ui-button">正常状态按钮</button>
<button type="default" is="ui-button">默认状态按钮</button>

主按钮

主按钮使用 type="primary" 属性进行定义。

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

状态按钮

Hope 主题内置了 3 种状态按钮，其中：

• 绿色的按钮使用 'safe' 或 'success'
• 橙色的按钮使用 'warn' 或 'warning'
• 红色的按钮使用 'danger' 或 'error'。

<button type="safe" is="ui-button">安全</button>
<button type="success" is="ui-button">或者成功</button>
<button type="warn" is="ui-button">警告</button>
<button type="warning" is="ui-button">或者醒目</button>
<button type="danger" is="ui-button">危险</button>
<button type="error" is="ui-button">或者出错</button>

线框按钮

通过设置 plain 属性实现线框按钮效果。

<button is="ui-button" plain>正常</button>
<button type="primary" is="ui-button" plain>安全</button>
<button type="safe" is="ui-button" plain>安全</button>
<button type="warn" is="ui-button" plain>警告</button>
<button type="danger" is="ui-button" plain>危险</button>

无框按钮

通过设置 blank 属性实现无框按钮效果，无背景色，无边框色。

<button is="ui-button" blank>默认</button>
<button type="primary" is="ui-button" blank>安全</button>
<button type="safe" is="ui-button" blank>安全</button>
<button type="warn" is="ui-button" blank>警告</button>
<button type="danger" is="ui-button" blank>危险</button>

颜色设置

快捷语法

如果引入了对应的组件 JS，则颜色设置可以直接使用 color 属性，例如：

<button is="ui-button" color="deepskyblue">深天蓝</button>
<button is="ui-button" color="deepskyblue" plain>线框深天蓝按钮</button>

<button is="ui-button" color="var(--ui-purple)">高贵紫色</button>
<button is="ui-button" color="var(--ui-purple)" plain>线框紫色按钮</button>

支持 <image> 图像类型作为按钮的背景，例如 CSS 渐变图像：

<button is="ui-button" color="linear-gradient(deepskyblue, var(--ui-blue))">深天蓝到主题蓝渐变</button>
<!-- 流光溢彩背景按钮 -->
<button is="ui-button" color="radial-gradient(closest-side, var(--ui-blue), transparent), conic-gradient(var(--ui-red), var(--ui-blue), var(--ui-green), var(--ui-purple), var(--ui-orange), var(--ui-red))">流光溢彩背景按钮</button>

底层实现

如果没有引入对应的组件 JS，则可以使用 --ui-button-color 这个自定义属性进行设置。

<button is="ui-button" style="--ui-button-color: rebeccapurple">蕾贝卡紫色</button>
<button is="ui-button" style="--ui-button-color: var(--ui-purple)">高贵按钮</button>
<button is="ui-button" plain style="--ui-button-color: var(--ui-purple)">高贵线框按钮</button>

尺寸和形状设置

内置尺寸

本组件内置了三种尺寸，可以使用 size 属性进行设置，值分别是 'small'、'mini'和'tiny'，语法示意：

<button is="ui-button">默认尺寸</button>
<button is="ui-button" size="small">小尺寸</button>
<button is="ui-button" size="small" plain>小尺寸线框按钮</button>
<button is="ui-button" size="mini">微小尺寸</button>
<button is="ui-button" size="tiny">极小尺寸</button>

不同 size 值对应的按钮高度见下表：

自定义尺寸

如果引入了对应的组件 JS，自定义的任意尺寸可以直接通过 height 属性设置，本组件会自动基于这个高度值使用合适的内间距和字号大小，支持任意类型的合法 CSS 数值，包括计算函数，CSS变量函数等。

如果 height 属性值是数值，则会被认为是单位 px。

button is="ui-button" height="44">44px高度按钮</button>
<button is="ui-button" height="3em">3em高度按钮</button>
<button is="ui-button" height="calc(var(--ui-basic-height) * 2)">CSS 计算兼变量值尺寸</button>

如果没有引入对应的组件 JS，则可以使用 CSS 自定义属性 --ui-button-height 进行设置，例如：

<button is="ui-button" style="--ui-button-height: 44px;">44px 高度按钮</button>
<button is="ui-button" style="--ui-button-height: 2rem;">2rem 高度按钮</button>

宽度设置

如果希望按钮宽度 100% 显示，可以设置 HTML 属性 width:100%，此方法适用于任意的标签元素，或者使用类名 .ui-button 设置的按钮。

<button type="primary" is="ui-button" width="100%">宽度 100% 自适应</button>

如果希望可以设置任意的宽度，需要 引入了对应的组件 JS，同时按钮本身是自定义元素语法，例如：

<button is="ui-button" width="300">宽度 300px</button>

支持任意的长度单位，支持 CSS 变量和其他 CSS 数学函数。

<button is="ui-button" width="300">宽度 300px</button>
<button is="ui-button" width="min(100%, 400px)">范围宽度</button>

不使用 width 属性，直接可以使用 CSS 变量 --ui-button-width 进行宽度设置也是可以的。

形状设置

如果引入了对应的组件 JS，可以使用 radius 属性设置按钮的形状。例如下面的直角按钮和圆形按钮：

<button type="primary" is="ui-button" radius="0">直角按钮</button>
<button is="ui-button" radius="50%" width="64" height="64" aria-label="圆形图标按钮">
    <svg viewBox="0 0 1024 1024" width="24" height="24"><path d="M848 474H550V152h-76v322H176c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h298v322h76V550h298c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg>
</button>

不使用 radius 属性，直接可以使用 CSS 变量 --ui-button-radius 进行圆角设置也是可以的。

禁用状态

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

例如：

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

Loading 状态

按钮的加载状态通过类名 loading 进行设置，例如：

<button type="primary" class="loading" is="ui-button">按钮</button>
<button type="primary" class="loading" is="ui-button" plain>按钮</button>

如果引入了 Loading/index.js，也可以使用下面的语句控制按钮的 loading 状态。

// loading 显示
button.loading = true;
// loading 隐藏
button.loading = false;

自定义 loading 效果

可以使用 CSS 自定义属性 --ui-button-loading-img 进行加载效果的替换，例如：

.some-element {
    --ui-button-loading-img: url(/loading.svg);
    /* 动画函数自定义，如果需要 */
    /* --ui-timing-function: steps(8); */
}

<ui-contents style="--ui-button-loading-img: url(https://imgservices-1252317822.image.myqcloud.com/image/012420220164525/34c03e57.svg);">
    <button class="loading" is="ui-button">自定义 loading</button>
</ui-contents>
<ui-contents style="--ui-button-loading-img: url(https://imgservices-1252317822.image.myqcloud.com/image/012420220171237/f8549a4e.svg); --ui-timing-function: steps(8);">
    <button class="loading" is="ui-button">自定义 loading</button>
</ui-contents>

传统标签和语法

除了使用 <button> 标签和 is 属性语法，我们还可以使用类似 <a>、<label> 甚至是 <div> 等元素进行按钮设置。

语法和 <button> 标签按钮几乎一致，不过建议使用类名 .ui-button 进行设置，以便和自定义元素区分开来，因为非 <button> 标签即使设置 is="ui-button" 也不会有组件行为（例如 color、size 等属性）。

按钮的样式设置和 <button> 按钮一致，可以使用 type 或者 data-type 进行设置，线框按钮使用 plain 属性。

<a>标签按钮

<a>标签按钮的优点是可以作为链接使用，可以使用内置的 ping 等属性进行简易的数据上报。

基本状态

<a href="javascript:" class="ui-button" role="button">基本按钮</a>
<a href="/login" type="primary" class="ui-button">主色-去登录</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>
<a href class="ui-button" plain>朴素按钮</a>

按钮禁用

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

<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 进行设置。

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

非语义标签按钮

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

<label>标签

没有关联，纯标签，白色，自身语义为按钮：label 标签按钮

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

<span> 标签

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

<div> 标签

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

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