button是一组常用按钮控件，分别实现了以下分类：

• 主按钮：用于主行动点，一个操作区域只能有一个主按钮。
• 默认按钮：用于没有主次之分的一组行动点。
• 文本按钮：用于最次级的行动点。
• 链接按钮：一般用于链接，即导航至某位置。

依赖项

• styles/button.css
• styles/button-icon.css

使用方法

按钮通过在button元素添加class="btn"进行设置。默认按钮是所有按钮实现的基础。

按钮

所有按钮必须使用button元素。

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

按钮列表

<button class="btn">默认按钮</button>
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-text">文本按钮</button>
<button class="btn btn-link">链接按钮</button>
<button class="btn danger"><i class="icon icon-edit"></i>Danger</button>
<button class="btn btn-primary danger"><i class="icon icon-edit"></i>Danger</button>
<button class="btn btn-text danger">文本按钮</button>
<button class="btn btn-link danger">链接按钮</button>
<button class="btn btn-text danger"><i class="icon icon-edit"></i>文本按钮</button>
<button class="btn btn-link danger"><i class="icon icon-edit"></i>链接按钮</button>
<div style="width: 200px;">
    <button class="btn block" disabled>默认按钮(禁用)</button>
    <button class="btn btn-primary block" disabled>主要按钮(禁用)</button>
    <button class="btn btn-text block" disabled>文本按钮(禁用)</button>
    <button class="btn btn-link block" disabled>链接按钮(禁用)</button>
    <button class="btn block"><i class="icon icon-edit"></i>图标按钮</button>
    <button class="btn btn-primary block"><i class="icon icon-edit"></i>图标按钮</button>
    <button class="btn btn-text block"><i class="icon icon-edit"></i>图标按钮</button>
    <button class="btn btn-link block"><i class="icon icon-edit"></i>图标按钮</button>
    <button class="btn block" disabled><i class="icon icon-edit"></i>图标按钮(禁用)</button>
    <button class="btn btn-primary block" disabled><i class="icon icon-edit"></i>图标按钮(禁用)</button>
    <button class="btn btn-text block" disabled><i class="icon icon-edit"></i>图标按钮(禁用)</button>
    <button class="btn btn-link block" disabled><i class="icon icon-edit"></i>图标按钮(禁用)</button>
    <button class="btn btn-primary block large">大尺寸按钮</button>
    <button class="btn btn-primary block small">小尺寸按钮</button>
</div>

除了可以设置按钮的样式（btn-primary/btn-text/btn-link）外，还可以为每个样式设置以下属性(设置到class属性上)：

• block - 填充满父容器。
• danger - 危险按钮，操作此按钮需谨慎。
• large - 设置按钮为大尺寸。
• small - 设置按钮为小尺寸。

禁用按钮

被禁用的按钮不能响应鼠标操作。通过设置元素的disabled属性进行设置。

按钮分组

<div class="btn-group">
    <button class="btn">默认按钮</button>
    <button class="btn btn-primary">主要按钮</button>
    <button class="btn btn-primary danger"><i class="icon icon-edit"></i>Danger</button>
</div>
<div class="btn-group large">
    <button class="btn">默认按钮</button>
    <button class="btn btn-primary"><i class="icon icon-edit"></i>主要按钮</button>
    <button class="btn btn-primary danger">Danger</button>
</div>
<div class="btn-group small">
    <button class="btn">默认按钮</button>
    <button class="btn btn-primary">主要按钮</button>
    <button class="btn btn-primary danger"><i class="icon icon-edit"></i>Danger</button>
</div>

在按钮分组中，可以通过large/small来设置整组按钮的尺寸。

效果预览

图标说明

在普通浏览器中，ICON图标是通过css的伪类before实现的，但在RML中并没有这个伪类，这里使用的是decorator中的text来实现图标，但由于decorator不能在:hover和:active是更新图标颜色，所以我们强制在:hover和:active中重新设置了图标的颜色和文本。

以下是示例：

button.btn:hover>.icon-edit {decorator: text("" rgb(64,150,255));}
button.btn:active>.icon-edit {decorator: text("" rgb(9,88,217));}
button.btn:hover.danger>.icon-edit {decorator: text("" rgb(255,120,117));}
button.btn:active.danger>.icon-edit {decorator: text("" rgb(217,54,62));}

为此，我们实现了一个JS脚本，用于从icon.css读取并分析文本，自动来生成每个图标在按钮中的颜色更新CSS内容。

const fs = require("fs").promises;
const selectors = [
    //=====默认======
    {
    selector: "button.btn:hover",
    color: "rgb(64,150,255)"
    }, {
    selector: "button.btn:active",
    color: "rgb(9,88,217)"
    }, {
    selector: "button.btn:hover.danger",
    color: "rgb(255,120,117)"
    }, {
    selector: "button.btn:active.danger",
    color: "rgb(217,54,62)"
    },
    //======主要======
    {
    selector: "button.btn-primary:hover",
    color: "#ffffff"
    }, {
    selector: "button.btn-primary:active",
    color: "#ffffff"
    }, {
    selector: "button.btn-primary:hover.danger",
    color: "#ffffff"
    }, {
    selector: "button.btn-primary:active.danger",
    color: "#ffffff"
    },
    //======文本======
    {
    selector: "button.btn-text:hover",
    color: "rgba(0,0,0,88%)"
    }, {
    selector: "button.btn-text:active",
    color: "rgba(0,0,0,88%)"
    }, {
    selector: "button.btn-text:hover.danger",
    color: "rgb(255,120,117)"
    }, {
    selector: "button.btn-text:active.danger",
    color: "rgb(255,120,117)"
    },
    //======链接======
    {
    selector: "button.btn-link:hover",
    color: "rgb(105,177,255)"
    }, {
    selector: "button.btn-link:active",
    color: "rgb(9,88,217)"
    }, {
    selector: "button.btn-link:hover.danger",
    color: "rgb(255,77,79)"
    }, {
    selector: "button.btn-link:active.danger",
    color: "rgb(217,54,62)"
    }
];
(async function main() {
    let button_icon = [];
    let content = await fs.readFile("../styles/icon.css", "utf-8");
    let regex = /\s{0}(\.icon-[^\{]+)\s*\{(([\w\W])*?)\}/ig;
    let m;
    while ((m = regex.exec(content)) !== null) {
        let mc = m[2].match(/\"(&#.+;)\"/ig);
        let char = mc[0].replaceAll('"', "");
        for (let i = 0; i < selectors.length; i++) {
            let line = `${selectors[i].selector}>${m[1]}{decorator: text("${char}" ${selectors[i].color});}`;
            button_icon.push(line);
        }
    }
    let css=button_icon.join("\r\n");
    await fs.writeFile("../styles/button-icon.css",css);
    console.log("completed.");
})();