SanoUI

Appearance

Button 按钮 ​

功能丰富的按钮组件，支持多种类型、尺寸和状态，可配合图标使用，满足各种交互场景需求。

按钮类型 ​

基础类型 ​

使用不同的类名来定义按钮的样式。

html
<button class="sa-button">默认按钮</button>
<button class="sa-button sa-button--primary">主要按钮</button>
<button class="sa-button sa-button--success">成功按钮</button>
<button class="sa-button sa-button--info">信息按钮</button>
<button class="sa-button sa-button--warning">警告按钮</button>
<button class="sa-button sa-button--danger">危险按钮</button>
加载 SanoUI 组件中...

朴素按钮 ​

使用 sa-button--plain 类名创建朴素按钮。

html
<button class="sa-button sa-button--plain">默认按钮</button>
<button class="sa-button sa-button--plain sa-button--primary">主要按钮</button>
<button class="sa-button sa-button--plain sa-button--success">成功按钮</button>
<button class="sa-button sa-button--plain sa-button--info">信息按钮</button>
<button class="sa-button sa-button--plain sa-button--warning">警告按钮</button>
<button class="sa-button sa-button--plain sa-button--danger">危险按钮</button>
加载 SanoUI 组件中...

文字按钮 ​

使用 sa-button--text 类名创建文字按钮。

html
<button class="sa-button sa-button--text">文字按钮</button>
加载 SanoUI 组件中...

带图标的按钮 ​

使用 data-icon 属性（推荐） ​

通过 data-icon 属性添加图标，这是推荐的方式。图标默认显示在按钮左侧。

html
<div id="icon-buttons-demo">
  <button class="sa-button" data-icon="plus">新建</button>
  <button class="sa-button" data-icon="delete">删除</button>
  <button class="sa-button" data-icon="edit">编辑</button>
  <button class="sa-button" data-icon="search">查询</button>
  <button class="sa-button" data-icon="upload">上传</button>
  <button class="sa-button" data-icon="download">下载</button>
</div>

<script>
SA.init('#icon-buttons-demo');
</script>
加载 SanoUI 组件中...

右侧图标 ​

使用 data-icon-position="right" 将图标放在右侧。

html
<div id="right-icon-buttons-demo">
  <button class="sa-button" data-icon="download" data-icon-position="right">下载</button>
  <button class="sa-button" data-icon="upload" data-icon-position="right">上传</button>
  <button class="sa-button" data-icon="search" data-icon-position="right">查询</button>
</div>

<script>
SA.init('#right-icon-buttons-demo');
</script>
加载 SanoUI 组件中...

图标按钮配合按钮类型 ​

图标按钮可以配合不同的按钮类型使用。

html
<div id="icon-type-buttons-demo">
  <button class="sa-button sa-button--primary" data-icon="plus">新建</button>
  <button class="sa-button sa-button--success" data-icon="edit">编辑</button>
  <button class="sa-button sa-button--danger" data-icon="delete">删除</button>
  <button class="sa-button sa-button--warning" data-icon="upload">上传</button>
  <button class="sa-button sa-button--info" data-icon="download">下载</button>
</div>

<script>
SA.init('#icon-type-buttons-demo');
</script>
加载 SanoUI 组件中...

纯图标按钮 ​

使用 sa-button--icon-only 类名创建纯图标按钮。

html
<div id="icon-only-buttons-demo">
  <button class="sa-button sa-button--icon-only" data-icon="plus" title="新建"></button>
  <button class="sa-button sa-button--icon-only" data-icon="edit" title="编辑"></button>
  <button class="sa-button sa-button--icon-only" data-icon="delete" title="删除"></button>
  <button class="sa-button sa-button--icon-only" data-icon="search" title="查询"></button>
  <button class="sa-button sa-button--icon-only" data-icon="upload" title="上传"></button>
  <button class="sa-button sa-button--icon-only" data-icon="download" title="下载"></button>
</div>

<script>
SA.init('#icon-only-buttons-demo');
</script>
加载 SanoUI 组件中...

圆形图标按钮 ​

使用 sa-button--circle 类名创建圆形图标按钮。

html
<div id="circle-icon-buttons-demo">
  <button class="sa-button sa-button--circle" data-icon="plus" title="新建"></button>
  <button class="sa-button sa-button--circle" data-icon="edit" title="编辑"></button>
  <button class="sa-button sa-button--circle" data-icon="delete" title="删除"></button>
  <button class="sa-button sa-button--circle" data-icon="search" title="查询"></button>
</div>

<script>
SA.init('#circle-icon-buttons-demo');
</script>
加载 SanoUI 组件中...

按钮尺寸 ​

不同尺寸 ​

使用 sa-button--large 和 sa-button--small 类名设置按钮大小。

html
<button class="sa-button sa-button--large">大按钮</button>
<button class="sa-button">默认按钮</button>
<button class="sa-button sa-button--small">小按钮</button>
加载 SanoUI 组件中...

圆角按钮 ​

使用 sa-button--round 类名创建圆角按钮。

html
<button class="sa-button sa-button--round">圆角按钮</button>
加载 SanoUI 组件中...

按钮状态 ​

禁用状态 ​

通过 disabled 属性禁用按钮。

html
<button class="sa-button" disabled>禁用按钮</button>
加载 SanoUI 组件中...

加载状态 ​

使用 is-loading 类名显示加载状态。可以通过 loading-center 和 loading-right 类名控制加载图标的位置。

html
<button class="sa-button is-loading">左侧加载</button>
<button class="sa-button is-loading loading-center">中间加载</button>
<button class="sa-button is-loading loading-right">右侧加载</button>
加载 SanoUI 组件中...

按钮组 ​

基础按钮组 ​

使用 sa-button-group 类名创建按钮组。

html
<div class="sa-button-group">
  <button class="sa-button">上一页</button>
  <button class="sa-button">当前页</button>
  <button class="sa-button">下一页</button>
</div>
加载 SanoUI 组件中...

不同尺寸的按钮组 ​

按钮组支持不同尺寸。

html
<div class="sa-button-group sa-button-group--large">
  <button class="sa-button">大</button>
  <button class="sa-button">大</button>
  <button class="sa-button">大</button>
</div>
<div class="sa-button-group">
  <button class="sa-button">默认</button>
  <button class="sa-button">默认</button>
  <button class="sa-button">默认</button>
</div>
<div class="sa-button-group sa-button-group--small">
  <button class="sa-button">小</button>
  <button class="sa-button">小</button>
  <button class="sa-button">小</button>
</div>
加载 SanoUI 组件中...

自动初始化 ​

按钮组件会在页面加载后自动初始化，主要作用包括：

  1. 自动添加图标：如果按钮有 data-icon 属性，调用 SA.init() 后会自动添加图标
  2. 自动绑定事件：如果按钮有 data-onclick 属性，调用 SA.init() 后会自动绑定事件处理函数
  3. 动态元素支持：通过 MutationObserver 自动监听 DOM 变化，动态添加的按钮也会自动初始化

注意：

  • 按钮的样式（CSS）无需初始化，直接使用类名即可生效
  • 带图标的按钮：如果按钮有 data-icon 属性，需要调用 SA.init() 来初始化图标渲染
  • 需要事件绑定的按钮：如果按钮有 data-onclick 或 data-action 属性，需要调用 SA.init() 来绑定事件
  • 其他组件：如果容器内还有其他组件（如 SaInput、SaIcon 等），需要调用 SA.init() 来初始化这些组件
  • 动态添加：通过 JavaScript 动态添加到页面的按钮，会自动被检测并初始化，无需手动调用 SaButton.init() 或 SA.init()
html
<div id="auto-init-demo">
  <!-- 普通按钮：只需类名，自动初始化不会做任何事 -->
  <button class="sa-button sa-button--primary">主要按钮</button>

  <!-- 带图标的按钮：自动初始化会自动添加图标 -->
  <button class="sa-button" data-icon="plus">新建</button>

  <!-- 带事件绑定的按钮：自动初始化会自动绑定事件 -->
  <button class="sa-button" data-onclick="autoInitHandleClick">点击我</button>

  <!-- 同时带图标和事件：自动初始化会同时处理 -->
  <button class="sa-button" data-icon="delete" data-onclick="autoInitHandleDelete">删除</button>
</div>

<script>
// 先定义事件处理函数（需在全局作用域）
// 注意：函数必须在 SA.init() 之前定义，否则初始化时找不到函数
window.autoInitHandleClick = function() {
  SaTip.success('点击了按钮');
};

window.autoInitHandleDelete = function() {
  SaDialog.confirm({
    title: '确认删除',
    content: '确定删除吗？',
    onConfirm: () => {
      SaTip.success('已删除');
    }
  });
};

// 确保 SaButton 可用（通常在 SA.init() 中已包含）
// 在函数定义后再执行初始化
SA.init('#auto-init-demo');
</script>
加载 SanoUI 组件中...

快速事件绑定 ​

按钮组件提供了多种快速绑定事件的方式，让事件处理更加便捷。

方式 1：使用 data-onclick 属性（推荐） ​

通过 data-onclick 属性直接绑定全局函数，无需手动编写事件监听器。

html
<div id="onclick-demo">
  <button class="sa-button" data-onclick="onclickDemoHandleClick">点击我</button>
</div>

<script>
// 将函数定义在全局作用域（window 对象上）
window.onclickDemoHandleClick = function() {
  SaTip.success('按钮被点击了！');
};

SA.init('#onclick-demo');
</script>
加载 SanoUI 组件中...

方式 2：使用 data-action 属性 + onAction 方法 ​

通过 data-action 属性和 SaButton.onAction() 方法实现事件委托，适合批量绑定相同操作。

html
<div id="action-demo">
  <button class="sa-button" data-action="save">保存</button>
  <button class="sa-button" data-action="save">另一个保存按钮</button>
  <button class="sa-button" data-action="delete">删除</button>
</div>

<script>
SA.init('#action-demo');

// 绑定所有 data-action="save" 的按钮
SaButton.onAction('save', function(e) {
  SaTip.success('保存操作');
});

// 绑定所有 data-action="delete" 的按钮
SaButton.onAction('delete', function(e) {
  SaDialog.confirm({
    title: '确认删除',
    content: '确定要删除吗？',
    onConfirm: () => {
      SaTip.success('删除成功');
    }
  });
});
</script>
加载 SanoUI 组件中...

方式 3：使用 bindEvent 方法 ​

直接通过 SaButton.bindEvent() 方法绑定单个按钮的事件。

html
<div id="bind-event-demo">
  <button class="sa-button" id="my-button">点击我</button>
</div>

<script>
SA.init('#bind-event-demo');

// 通过选择器绑定
SaButton.bindEvent('#my-button', function(e) {
  SaTip.success('按钮被点击了');
});

// 或直接绑定到元素
const btn = Dom.query('#my-button');
SaButton.bindEvent(btn, function(e) {
  console.log('按钮被点击', e);
});
</script>
加载 SanoUI 组件中...

方式 4：使用 Dom.onClick 工具方法 ​

使用 Dom.onClick() 工具方法进行事件委托，适合复杂的场景。

html
<div id="dom-onclick-demo">
  <button class="sa-button" data-id="btn-1">按钮 1</button>
  <button class="sa-button" data-id="btn-2">按钮 2</button>
</div>

<script>
SA.init('#dom-onclick-demo');

// 事件委托：绑定所有 .sa-button 的点击事件
Dom.onClick('#dom-onclick-demo .sa-button', function(e, el) {
  const id = el.getAttribute('data-id');
  SaTip.success(`点击了按钮 ${id}`);
});
</script>
加载 SanoUI 组件中...

推荐使用场景 ​

  • data-onclick：适合简单的单个按钮绑定，代码简洁
  • data-action + onAction：适合多个按钮执行相同操作的场景，统一管理
  • bindEvent：适合需要动态绑定或精确控制的场景
  • Dom.onClick：适合需要事件委托的复杂场景

API ​

Button 组件主要通过 HTML 类名使用，无需 JavaScript 即可创建样式丰富的按钮。只有在需要动态功能（如图标、事件绑定）时，才需要使用 JavaScript API。

基础用法（类名方式）请参考上面的示例。

静态方法 ​

所有静态方法通过 SaButton 类调用：

javascript
// 示例
SaButton.init(button);
SaButton.initAll('body');
SaButton.bindEvent('.sa-button', handler);
方法名说明参数返回值
SaButton.init(button)初始化单个按钮，添加图标button: HTMLElement
按钮元素		void
SaButton.initAll(container?)初始化容器内所有按钮（包括图标和事件绑定）container?: HTMLElement | Document
容器元素，默认为 document		Array<HTMLElement>
SaButton.removeIcon(button)移除按钮的图标button: HTMLElement
按钮元素		void
SaButton.updateIcon(button, iconName, position?)更新按钮的图标button: HTMLElement
按钮元素

iconName: string
图标名称

position?: 'left' | 'right'
图标位置，默认为 'left'		void
SaButton.loading(button, text?)设置或取消按钮的加载状态button: HTMLElement | string
按钮元素或选择器

text?: string | false
加载时显示的文本，传入 false 或省略则取消加载并恢复原始文本		void
SaButton.bindEvent(button, handler)绑定按钮点击事件button: HTMLElement | string
按钮元素或选择器

handler: Function
点击事件处理函数		Function
取消绑定函数
SaButton.onAction(action, handler)绑定所有带指定 data-action 的按钮事件action: string
action 名称

handler: Function
事件处理函数		Function
取消绑定函数

HTML 属性 ​

Button 组件主要通过 HTML 类名和 data-* 属性进行配置。

类名 (class) ​

类名说明示例
sa-button基础按钮类名（必需）<button class="sa-button">按钮</button>
sa-button--primary主要按钮<button class="sa-button sa-button--primary">主要</button>
sa-button--success成功按钮<button class="sa-button sa-button--success">成功</button>
sa-button--info信息按钮<button class="sa-button sa-button--info">信息</button>
sa-button--warning警告按钮<button class="sa-button sa-button--warning">警告</button>
sa-button--danger危险按钮<button class="sa-button sa-button--danger">危险</button>
sa-button--plain朴素按钮<button class="sa-button sa-button--plain">朴素</button>
sa-button--text文字按钮<button class="sa-button sa-button--text">文字</button>
sa-button--large大尺寸按钮<button class="sa-button sa-button--large">大按钮</button>
sa-button--small小尺寸按钮<button class="sa-button sa-button--small">小按钮</button>
sa-button--round圆角按钮<button class="sa-button sa-button--round">圆角</button>
sa-button--circle圆形按钮<button class="sa-button sa-button--circle">圆形</button>
sa-button--icon-only纯图标按钮<button class="sa-button sa-button--icon-only">图标</button>
is-loading加载状态<button class="sa-button is-loading">加载中</button>
loading-center加载图标居中<button class="sa-button is-loading loading-center">加载中</button>
loading-right加载图标靠右<button class="sa-button is-loading loading-right">加载中</button>

Data 属性 ​

属性说明类型默认值示例
data-icon图标名称string-data-icon="plus"
data-icon-position图标位置'left' | 'right''left'data-icon-position="right"
data-onclick点击事件处理函数名（需定义在全局作用域）string-data-onclick="handleClick"
data-action按钮操作标识，用于批量绑定事件string-data-action="save"

标准 HTML 属性 ​

属性说明类型示例
disabled禁用按钮boolean<button disabled>禁用</button>
type按钮类型'button' | 'submit' | 'reset'<button type="submit">提交</button>

按钮组 ​

使用 sa-button-group 类名创建按钮组。

类名说明示例
sa-button-group基础按钮组<div class="sa-button-group">...</div>
sa-button-group--large大尺寸按钮组<div class="sa-button-group sa-button-group--large">...</div>
sa-button-group--small小尺寸按钮组<div class="sa-button-group sa-button-group--small">...</div>

可用图标 ​

Button 组件支持以下图标（通过 data-icon 属性使用）：

  • plus - 加号
  • delete - 删除
  • edit - 编辑
  • search - 搜索
  • upload - 上传
  • download - 下载
  • close - 关闭
  • arrow-left - 左箭头
  • arrow-right - 右箭头
  • arrow-up - 上箭头
  • arrow-down - 下箭头
  • success-filled - 成功图标（实心）
  • warning-filled - 警告图标（实心）
  • 更多图标请参考 Icon 组件

实际使用场景 ​

场景 1：表单提交按钮 ​

在表单中使用按钮提交数据，包含加载状态和禁用逻辑。

html
<div id="form-submit-demo">
  <form id="user-form">
    <div class="sa-input" data-placeholder="用户名" data-autocomplete="off" style="width: 300px; margin-bottom: 1rem;"></div>
    <div class="sa-input" data-placeholder="密码" data-type="password" data-autocomplete="new-password" style="width: 300px; margin-bottom: 1rem;"></div>
    
    <button 
      type="submit" 
      class="sa-button sa-button--primary" 
      id="submit-btn"
      data-icon="plus"
    >
      提交
    </button>
  </form>
</div>

<script>
  SA.init('#form-submit-demo');
  
  const form = Dom.query('#user-form');
  const submitBtn = Dom.query('#submit-btn');
  
  Dom.on('submit', form, async (e) => {
    e.preventDefault();
    
    // 设置加载状态
    SaButton.loading(submitBtn, '提交中...');
    
    try {
      // 模拟 API 调用
      await new Promise(resolve => setTimeout(resolve, 2000));
      
      // 提交成功
      SaTip.success('提交成功！');
      form.reset();
    } catch (error) {
      SaTip.error('提交失败：' + error.message);
    } finally {
      // 恢复按钮状态（自动恢复原始文本）
      SaButton.loading(submitBtn, false);
    }
  });
</script>
加载 SanoUI 组件中...

场景 2：操作按钮组 ​

在表格或列表中提供多个操作按钮，如编辑、删除、查看等。

html
<div id="action-buttons-demo">
  <div class="sa-button-group">
    <button class="sa-button sa-button--primary" data-icon="edit" data-action="edit">
      编辑
    </button>
    <button class="sa-button sa-button--success" data-icon="search" data-action="view">
      查看
    </button>
    <button class="sa-button sa-button--danger" data-icon="delete" data-action="delete">
      删除
    </button>
  </div>
</div>

<script>
  SA.init('#action-buttons-demo');
  
  // 使用 data-action 统一管理事件
  SaButton.onAction('edit', function() {
    SaTip.success('编辑操作');
  });
  
  SaButton.onAction('view', function() {
    SaTip.success('查看操作');
  });
  
  SaButton.onAction('delete', function() {
    SaDialog.confirm({
      title: '确认删除',
      content: '确定要删除吗？',
      onConfirm: () => {
        SaTip.success('删除成功');
      }
    });
  });
</script>
加载 SanoUI 组件中...

场景 3：确认对话框按钮 ​

使用危险按钮配合确认对话框，防止误操作。

html
<div id="confirm-dialog-demo">
  <button 
    class="sa-button sa-button--danger" 
    data-icon="delete"
    data-onclick="handleDeleteWithConfirm"
  >
    删除数据
  </button>
</div>

<script>
  // 先定义事件处理函数（需在全局作用域）
  // 注意：函数必须在 SA.init() 之前定义，否则初始化时找不到函数
  window.handleDeleteWithConfirm = function() {
    // 使用 SaDialog 显示确认对话框
    SaDialog.confirm({
      title: '确认删除',
      content: '此操作将永久删除数据，是否继续？',
      icon: 'warning-filled',
      confirmText: '确定删除',
      cancelText: '取消',
        onConfirm: () => {
          // 执行删除操作
          SaTip.success('数据已删除');
        }
    });
  };
  
  // 在函数定义后再执行初始化
  SA.init('#confirm-dialog-demo');
</script>
加载 SanoUI 组件中...

场景 4：动态按钮状态管理 ​

根据业务逻辑动态切换按钮的状态、文本和图标。

html
<div id="dynamic-state-demo">
  <button 
    class="sa-button sa-button--primary" 
    id="dynamic-btn"
    data-onclick="toggleState"
    data-icon="plus"
  >
    <span id="btn-text">关注</span>
  </button>
</div>

<script>
  // 先定义事件处理函数（需在全局作用域）
  // 注意：函数必须在 SA.init() 之前定义，否则初始化时找不到函数
  let isFollowing = false;
  const btn = Dom.query('#dynamic-btn');
  const btnText = Dom.query('#btn-text');
  
  window.toggleState = function() {
    isFollowing = !isFollowing;
    
    if (isFollowing) {
      // 已关注状态
      btn.className = 'sa-button sa-button--success';
      btnText.textContent = '已关注';
      SaButton.updateIcon(btn, 'success-filled', 'left');
    } else {
      // 未关注状态
      btn.className = 'sa-button sa-button--primary';
      btnText.textContent = '关注';
      SaButton.updateIcon(btn, 'plus', 'left');
    }
  };
  
  // 在函数定义后再执行初始化
  SA.init('#dynamic-state-demo');
</script>
加载 SanoUI 组件中...

场景 5：批量操作按钮 ​

在数据列表页面提供批量操作功能，根据选中状态启用/禁用按钮。

html
<div id="batch-operation-demo">
  <div style="margin-bottom: 1rem;">
    <label>
      <input type="checkbox" id="select-all" onchange="toggleSelectAll()"> 全选
    </label>
    <span id="selected-count" style="margin-left: 1rem;">已选择 0 项</span>
  </div>

  <div class="sa-button-group">
    <button 
      class="sa-button sa-button--primary" 
      id="batch-edit-btn"
      data-icon="edit"
      data-action="batch-edit"
      disabled
    >
      批量编辑
    </button>
    <button 
      class="sa-button sa-button--danger" 
      id="batch-delete-btn"
      data-icon="delete"
      data-action="batch-delete"
      disabled
    >
      批量删除
    </button>
  </div>
</div>

<script>
  // 先定义事件处理函数（需在全局作用域）
  // 注意：函数必须在 SA.init() 之前定义，否则初始化时找不到函数
  let selectedCount = 0;
  const selectAllCheckbox = Dom.query('#select-all');
  const selectedCountSpan = Dom.query('#selected-count');
  const batchEditBtn = Dom.query('#batch-edit-btn');
  const batchDeleteBtn = Dom.query('#batch-delete-btn');
  
  // 全选功能
  window.toggleSelectAll = function() {
    selectedCount = selectAllCheckbox.checked ? 10 : 0; // 假设有 10 项
    updateUI();
  };
  
  function updateUI() {
    selectedCountSpan.textContent = `已选择 ${selectedCount} 项`;
    const hasSelection = selectedCount > 0;
    batchEditBtn.disabled = !hasSelection;
    batchDeleteBtn.disabled = !hasSelection;
  }
  
  // 使用 data-action 批量绑定
  SaButton.onAction('batch-edit', function() {
    SaTip.success(`批量编辑 ${selectedCount} 项`);
  });
  
  SaButton.onAction('batch-delete', function() {
    SaDialog.confirm({
      title: '确认删除',
      content: `确定要删除 ${selectedCount} 项吗？`,
      onConfirm: () => {
        SaTip.success('删除成功');
        selectedCount = 0;
        selectAllCheckbox.checked = false;
        updateUI();
      }
    });
  });
  
  // 在函数定义后再执行初始化
  SA.init('#batch-operation-demo');
</script>
加载 SanoUI 组件中...

场景 6：分步操作按钮 ​

在向导或多步骤表单中，提供上一步、下一步按钮。

html
<div id="step-operation-demo">
  <div style="margin: 2rem 0;">
    <div id="step-indicator" style="margin-bottom: 1rem;">步骤 1 / 3</div>
    <div id="step-content" style="padding: 1rem; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 1rem;">
      这是步骤 1 的内容
    </div>
    
    <div class="sa-button-group">
      <button 
        class="sa-button" 
        id="prev-btn"
        data-icon="arrow-left"
        data-onclick="goToPrevStep"
        disabled
      >
        上一步
      </button>
      <button 
        class="sa-button sa-button--primary" 
        id="next-btn"
        data-icon="arrow-right"
        data-icon-position="right"
        data-onclick="goToNextStep"
      >
        下一步
      </button>
    </div>
  </div>
</div>

<script>
  // 先定义事件处理函数（需在全局作用域）
  // 注意：函数必须在 SA.init() 之前定义，否则初始化时找不到函数
  let currentStep = 1;
  const totalSteps = 3;
  const stepIndicator = Dom.query('#step-indicator');
  const stepContent = Dom.query('#step-content');
  const prevBtn = Dom.query('#prev-btn');
  const nextBtn = Dom.query('#next-btn');
  
  function updateStep() {
    stepIndicator.textContent = `步骤 ${currentStep} / ${totalSteps}`;
    stepContent.textContent = `这是步骤 ${currentStep} 的内容`;
    
    prevBtn.disabled = currentStep === 1;
    
    if (currentStep === totalSteps) {
      nextBtn.textContent = '完成';
      nextBtn.setAttribute('data-icon', 'success-filled');
      SaButton.updateIcon(nextBtn, 'success-filled', 'right');
    } else {
      nextBtn.textContent = '下一步';
      nextBtn.setAttribute('data-icon', 'arrow-right');
      SaButton.updateIcon(nextBtn, 'arrow-right', 'right');
    }
  }
  
  // 定义在全局作用域
  window.goToPrevStep = function() {
    if (currentStep > 1) {
      currentStep--;
      updateStep();
    }
  };
  
  window.goToNextStep = function() {
    if (currentStep < totalSteps) {
      currentStep++;
      updateStep();
    } else {
      SaTip.success('完成！');
    }
  };
  
  // 在函数定义后再执行初始化
  SA.init('#step-operation-demo');
  
  updateStep();
</script>
加载 SanoUI 组件中...

注意事项 ​

  1. 初始化：使用 data-icon 图标的按钮和 data-onclick 事件的按钮需要调用 SA.init() 来初始化。通过 MutationObserver 自动监听 DOM 变化，动态添加的按钮也会自动初始化
  2. 图标依赖：按钮图标功能依赖 SaIcons 全局对象，确保已加载图标库
  3. 事件绑定：推荐使用 data-onclick 或 data-action 属性进行事件绑定，避免使用内联 onclick 属性
  4. 加载状态：使用 is-loading 类名时，建议同时设置 disabled 属性防止重复点击
  5. 按钮组：按钮组内的按钮会自动调整间距和样式，无需额外配置
  6. 可访问性：纯图标按钮建议添加 title 或 aria-label 属性
  7. 性能优化：
    • 批量操作时，推荐使用 data-action + SaButton.onAction() 进行事件委托，而不是为每个按钮单独绑定事件
    • 动态添加大量按钮时，建议先构建 DOM 结构，再一次性添加到页面，减少 MutationObserver 的触发次数

常见问题 ​

Q: 如何动态改变按钮的图标？ ​

A: 使用 SaButton.updateIcon() 方法：

javascript
SaButton.updateIcon(buttonElement, 'new-icon-name', 'left');

Q: 如何移除按钮的图标？ ​

A: 使用 SaButton.removeIcon() 方法：

javascript
SaButton.removeIcon(buttonElement);

Q: 按钮的加载状态如何控制？ ​

A: 使用 SaButton.loading() 方法（推荐）：

javascript
// 显示加载状态，显示"提交中..."
SaButton.loading(button, '提交中...');

// 取消加载状态，自动恢复原始文本
SaButton.loading(button, false);
// 或
SaButton.loading(button);

也可以手动控制：

javascript
// 显示加载状态
button.classList.add('is-loading');
button.disabled = true;

// 隐藏加载状态
button.classList.remove('is-loading');
button.disabled = false;

Q: 按钮组如何实现响应式布局？ ​

A: 按钮组会自动适应容器宽度，在小屏幕上可以配合 CSS 媒体查询：

css
@media (max-width: 768px) {
  .sa-button-group {
    flex-direction: column;
  }
  .sa-button-group .sa-button {
    width: 100%;
  }
}

Released under the MIT License.

Copyright © 2025 SanoUI