Blaze UI 基础按钮

Blaze UI 是一套基于原子设计（Atomic Design）思想的 UI 库，提供了一系列现代化的 UI 组件供开发者使用。其中，基础按钮是其中一个最基本的组件，本文将介绍它的用法、样式以及如何自定义。

用法

在页面中引入 Blaze UI 的 CSS 文件：

<link rel="stylesheet" href="https://unpkg.com/@blazeui/css">

在需要使用基础按钮的地方，使用以下 HTML 代码：

<button class="btn">按钮</button>

此时，按钮会应用 Blaze UI 默认的样式，如下图所示：

样式

将 btn 类名应用在按钮元素上，即可使用 Blaze UI 默认的基础按钮样式，包括字体、颜色和边框等。此外，Blaze UI 也提供了其他的类名来实现其他的样式需求。

基础样式

使用 btn 类名，即可得到 Blaze UI 默认的基础按钮样式。

<button class="btn">按钮</button>

颜色样式

使用以下类名之一，即可改变背景颜色和文本颜色：

• btn-primary: 主色
• btn-secondary: 辅助色
• btn-success: 成功色
• btn-warning: 警告色
• btn-danger: 危险色

<button class="btn btn-primary">主色按钮</button>
<button class="btn btn-success">成功按钮</button>

尺寸样式

使用以下类名之一，即可改变按钮的大小：

• btn-xs: 超小
• btn-sm: 小
• btn-md: 中（默认）
• btn-lg: 大
• btn-xl: 超大

<button class="btn btn-sm">小按钮</button>
<button class="btn btn-lg">大按钮</button>

圆角样式

使用以下类名之一，即可改变按钮的边角弧度：

• btn-rounded: 圆形边角
• btn-rounded-lg: 大角度圆角
• btn-rounded-none: 直角

<button class="btn btn-rounded-lg">大圆角按钮</button>
<button class="btn btn-rounded-none">直角按钮</button>

自定义

Blaze UI 允许开发者自定义基础按钮的样式，只需要在按钮元素上增加自定义样式类名即可。

<button class="btn my-btn">自定义按钮</button>

.my-btn {
  border-radius: 8px;
  background-color: #ff5722;
  color: #fff;
}

结语

Blaze UI 基础按钮为开发者提供了快速开发常用 UI 元素的便捷方式，开发者可以根据需求快速选择并应用不同的样式类名。同时，通过自定义样式类名，开发者可以充分发挥其创意，实现更丰富的 UI 效果。