垦荒学园

简体中文

English

简体中文

English

切换主题

Foundation 按钮组 ​

按钮组允许你将多个相关按钮组合在一起，形成一个紧凑的按钮集合。本章将介绍 Foundation 按钮组的各种用法。

基本按钮组 ​

使用 .button-group 类创建基本按钮组：

html
<div class="button-group">
    <a class="button">第一个</a>
    <a class="button">第二个</a>
    <a class="button">第三个</a>
</div>

按钮组颜色 ​

按钮组可以应用所有标准按钮颜色：

html
<!-- Primary 按钮组 -->
<div class="button-group primary">
    <a class="button">按钮 1</a>
    <a class="button">按钮 2</a>
    <a class="button">按钮 3</a>
</div>

<!-- Secondary 按钮组 -->
<div class="button-group secondary">
    <a class="button">按钮 1</a>
    <a class="button">按钮 2</a>
    <a class="button">按钮 3</a>
</div>

<!-- Success 按钮组 -->
<div class="button-group success">
    <a class="button">按钮 1</a>
    <a class="button">按钮 2</a>
    <a class="button">按钮 3</a>
</div>

<!-- Warning 按钮组 -->
<div class="button-group warning">
    <a class="button">按钮 1</a>
    <a class="button">按钮 2</a>
    <a class="button">按钮 3</a>
</div>

<!-- Alert 按钮组 -->
<div class="button-group alert">
    <a class="button">按钮 1</a>
    <a class="button">按钮 2</a>
    <a class="button">按钮 3</a>
</div>

混合颜色 ​

也可以为单个按钮指定不同颜色：

html
<div class="button-group">
    <a class="button primary">主要</a>
    <a class="button secondary">次要</a>
    <a class="button success">成功</a>
    <a class="button alert">警告</a>
</div>

按钮组尺寸 ​

按钮组支持不同尺寸：

html
<!-- Tiny 尺寸 -->
<div class="button-group tiny">
    <a class="button">Tiny 1</a>
    <a class="button">Tiny 2</a>
    <a class="button">Tiny 3</a>
</div>

<!-- Small 尺寸 -->
<div class="button-group small">
    <a class="button">Small 1</a>
    <a class="button">Small 2</a>
    <a class="button">Small 3</a>
</div>

<!-- 默认尺寸 -->
<div class="button-group">
    <a class="button">默认 1</a>
    <a class="button">默认 2</a>
    <a class="button">默认 3</a>
</div>

<!-- Large 尺寸 -->
<div class="button-group large">
    <a class="button">Large 1</a>
    <a class="button">Large 2</a>
    <a class="button">Large 3</a>
</div>

扩展按钮组 ​

使用 .expanded 类让按钮组占满容器宽度：

html
<div class="button-group expanded">
    <a class="button">按钮 1</a>
    <a class="button">按钮 2</a>
    <a class="button">按钮 3</a>
</div>

按钮会自动等分宽度。

堆叠按钮组 ​

使用 .stacked 类让按钮垂直堆叠：

html
<div class="button-group stacked">
    <a class="button">第一行</a>
    <a class="button">第二行</a>
    <a class="button">第三行</a>
</div>

响应式堆叠 ​

在小屏幕上堆叠，大屏幕上水平排列：

html
<div class="button-group stacked-for-small">
    <a class="button">按钮 1</a>
    <a class="button">按钮 2</a>
    <a class="button">按钮 3</a>
</div>

可用的响应式堆叠类：

  • .stacked-for-small - 小屏幕堆叠
  • .stacked-for-medium - 中等屏幕及以下堆叠

空心按钮组 ​

结合 .hollow 类创建空心按钮组：

html
<div class="button-group hollow">
    <a class="button">按钮 1</a>
    <a class="button">按钮 2</a>
    <a class="button">按钮 3</a>
</div>

<div class="button-group hollow primary">
    <a class="button">Primary 1</a>
    <a class="button">Primary 2</a>
    <a class="button">Primary 3</a>
</div>

清除样式按钮组 ​

使用 .clear 类创建透明按钮组：

html
<div class="button-group clear">
    <a class="button primary">按钮 1</a>
    <a class="button primary">按钮 2</a>
    <a class="button primary">按钮 3</a>
</div>

分割按钮 ​

分割按钮由主按钮和下拉触发器组成：

html
<div class="button-group">
    <a class="button">保存</a>
    <button class="dropdown button arrow-only" data-toggle="save-dropdown">
        <span class="show-for-sr">显示更多选项</span>
    </button>
</div>

<div class="dropdown-pane" id="save-dropdown" data-dropdown data-auto-focus="true">
    <ul class="menu vertical">
        <li><a href="#">另存为...</a></li>
        <li><a href="#">保存副本</a></li>
        <li><a href="#">导出</a></li>
    </ul>
</div>

工具栏样式按钮组 ​

创建工具栏风格的按钮组：

html
<div class="button-group">
    <a class="button secondary" aria-label="粗体">
        <strong>B</strong>
    </a>
    <a class="button secondary" aria-label="斜体">
        <em>I</em>
    </a>
    <a class="button secondary" aria-label="下划线">
        <u>U</u>
    </a>
</div>

<div class="button-group">
    <a class="button secondary" aria-label="左对齐">
        <i class="fa fa-align-left"></i>
    </a>
    <a class="button secondary" aria-label="居中">
        <i class="fa fa-align-center"></i>
    </a>
    <a class="button secondary" aria-label="右对齐">
        <i class="fa fa-align-right"></i>
    </a>
    <a class="button secondary" aria-label="两端对齐">
        <i class="fa fa-align-justify"></i>
    </a>
</div>

按钮组切换 ​

创建单选或多选切换按钮组：

单选切换 ​

html
<div class="button-group" role="group" aria-label="视图切换">
    <button class="button is-active" type="button">列表视图</button>
    <button class="button" type="button">网格视图</button>
    <button class="button" type="button">详细视图</button>
</div>

<style>
    .button-group .button.is-active {
        background-color: #1468a0;
    }
</style>

<script>
    document.querySelectorAll('.button-group .button').forEach(button => {
        button.addEventListener('click', function() {
            this.parentNode.querySelectorAll('.button').forEach(btn => {
                btn.classList.remove('is-active');
            });
            this.classList.add('is-active');
        });
    });
</script>

多选切换 ​

html
<div class="button-group" role="group" aria-label="功能选择">
    <button class="button hollow" type="button" data-toggle-btn>功能 A</button>
    <button class="button hollow" type="button" data-toggle-btn>功能 B</button>
    <button class="button hollow" type="button" data-toggle-btn>功能 C</button>
</div>

<script>
    document.querySelectorAll('[data-toggle-btn]').forEach(button => {
        button.addEventListener('click', function() {
            this.classList.toggle('hollow');
        });
    });
</script>

多组按钮组 ​

使用网格布局组织多个按钮组：

html
<div class="grid-x grid-padding-x">
    <div class="cell small-6 medium-4">
        <div class="button-group expanded">
            <a class="button">编辑</a>
            <a class="button">复制</a>
        </div>
    </div>
    <div class="cell small-6 medium-4">
        <div class="button-group expanded">
            <a class="button success">保存</a>
            <a class="button warning">撤销</a>
        </div>
    </div>
    <div class="cell small-12 medium-4">
        <div class="button-group expanded">
            <a class="button alert">删除</a>
        </div>
    </div>
</div>

完整示例 ​

html
<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation 按钮组示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        .demo-section {
            margin-bottom: 30px;
            padding: 20px;
            background: #f4f4f4;
            border-radius: 4px;
        }
        .demo-section h3 {
            margin-bottom: 15px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
        }
        .button-group.is-active-group .button.is-active {
            background-color: #1468a0;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation 按钮组展示</h1>

        <div class="demo-section">
            <h3>基本按钮组</h3>
            <div class="button-group">
                <a class="button">第一个</a>
                <a class="button">第二个</a>
                <a class="button">第三个</a>
            </div>
        </div>

        <div class="demo-section">
            <h3>不同颜色</h3>
            <div class="button-group primary">
                <a class="button">Primary 1</a>
                <a class="button">Primary 2</a>
                <a class="button">Primary 3</a>
            </div>
            <br>
            <div class="button-group success">
                <a class="button">Success 1</a>
                <a class="button">Success 2</a>
                <a class="button">Success 3</a>
            </div>
        </div>

        <div class="demo-section">
            <h3>不同尺寸</h3>
            <div class="button-group tiny">
                <a class="button">Tiny</a>
                <a class="button">Tiny</a>
                <a class="button">Tiny</a>
            </div>
            <br>
            <div class="button-group small">
                <a class="button">Small</a>
                <a class="button">Small</a>
                <a class="button">Small</a>
            </div>
            <br>
            <div class="button-group large">
                <a class="button">Large</a>
                <a class="button">Large</a>
                <a class="button">Large</a>
            </div>
        </div>

        <div class="demo-section">
            <h3>扩展按钮组</h3>
            <div class="button-group expanded">
                <a class="button">等宽按钮 1</a>
                <a class="button">等宽按钮 2</a>
                <a class="button">等宽按钮 3</a>
            </div>
        </div>

        <div class="demo-section">
            <h3>空心按钮组</h3>
            <div class="button-group hollow primary">
                <a class="button">Hollow 1</a>
                <a class="button">Hollow 2</a>
                <a class="button">Hollow 3</a>
            </div>
        </div>

        <div class="demo-section">
            <h3>堆叠按钮组</h3>
            <div class="button-group stacked">
                <a class="button">第一行</a>
                <a class="button">第二行</a>
                <a class="button">第三行</a>
            </div>
        </div>

        <div class="demo-section">
            <h3>工具栏风格</h3>
            <div class="button-group secondary">
                <a class="button" aria-label="加粗"><i class="fas fa-bold"></i></a>
                <a class="button" aria-label="斜体"><i class="fas fa-italic"></i></a>
                <a class="button" aria-label="下划线"><i class="fas fa-underline"></i></a>
            </div>
            &nbsp;
            <div class="button-group secondary">
                <a class="button" aria-label="左对齐"><i class="fas fa-align-left"></i></a>
                <a class="button" aria-label="居中"><i class="fas fa-align-center"></i></a>
                <a class="button" aria-label="右对齐"><i class="fas fa-align-right"></i></a>
            </div>
        </div>

        <div class="demo-section">
            <h3>切换按钮组</h3>
            <div class="button-group is-active-group" id="view-toggle">
                <button class="button is-active" type="button">列表</button>
                <button class="button" type="button">网格</button>
                <button class="button" type="button">详细</button>
            </div>
        </div>

        <div class="demo-section">
            <h3>分割按钮</h3>
            <div class="button-group">
                <a class="button">主要操作</a>
                <button class="dropdown button arrow-only" type="button" data-toggle="split-dropdown">
                    <span class="show-for-sr">更多选项</span>
                </button>
            </div>
            <div class="dropdown-pane" id="split-dropdown" data-dropdown>
                <ul class="menu vertical">
                    <li><a href="#">选项 1</a></li>
                    <li><a href="#">选项 2</a></li>
                    <li><a href="#">选项 3</a></li>
                </ul>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>
        $(document).foundation();

        // 切换按钮组逻辑
        document.querySelectorAll('#view-toggle .button').forEach(button => {
            button.addEventListener('click', function() {
                document.querySelectorAll('#view-toggle .button').forEach(btn => {
                    btn.classList.remove('is-active');
                });
                this.classList.add('is-active');
            });
        });
    </script>
</body>
</html>

按钮组最佳实践 ​

  1. 语义化分组：只将相关的操作放在同一个按钮组中
  2. 数量控制：按钮组内按钮数量建议不超过 5 个
  3. 可访问性：使用 role="group" 和 aria-label 提供上下文
  4. 响应式设计：使用响应式堆叠类适应不同屏幕
  5. 视觉一致性：同一组内的按钮应保持一致的样式

总结 ​

本章我们学习了：

  • 基本按钮组的创建
  • 按钮组的颜色和尺寸
  • 扩展和堆叠按钮组
  • 空心和清除样式按钮组
  • 分割按钮和工具栏样式
  • 切换按钮组的实现

下一章，我们将学习 Foundation 图标。

提示：按钮组非常适合用于分页、工具栏、视图切换等场景。