# Button 组件

主要的 `Button` 组件提供了支持图标和标签的全面按钮功能。

## 基础用法

```svelte
<script lang="ts">
  import Button from '@ticatec/uniface-element/Button';
  
  const handleClick = async (event: MouseEvent) => {
    console.log('按钮被点击!');
    // 执行异步操作
  };
</script>

<Button 
  label="保存更改"
  type="primary"
  icon="icon_google_save"
  onClick={handleClick}
/>
```

## 高级配置

```svelte
<script lang="ts">
  import Button from '@ticatec/uniface-element/Button';
  import type { ButtonType } from '@ticatec/uniface-element';
  
  let isSubmitting = false;
  
  const handleSubmit = async (event: MouseEvent) => {
    isSubmitting = true;
    try {
      await submitForm();
    } finally {
      isSubmitting = false;
    }
  };
</script>

<Button 
  label={isSubmitting ? "提交中..." : "提交表单"}
  type="primary"
  size="big"
  variant="round"
  icon="icon_google_send"
  disabled={isSubmitting}
  style="margin: 16px;"
  onClick={handleSubmit}
/>
```

## 属性

| 属性 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| `label` | `string` | `''` | 按钮文本标签 |
| `type` | `ButtonType` | `'default'` | 视觉样式变体 |
| `size` | `'big' \| 'medium' \| 'mini'` | `'medium'` | 按钮大小 |
| `variant` | `'plain' \| 'round' \| ''` | `''` | 附加样式变体 |
| `icon` | `string \| null` | `null` | 图标类（如 Google Material Icons） |
| `disabled` | `boolean` | `false` | 禁用按钮交互 |
| `style` | `string` | `''` | 自定义 CSS 样式 |
| `onClick` | `(event: MouseEvent) => void` | - | 点击事件处理器 |

## 带插槽内容的按钮

```svelte
<Button type="secondary" onClick={handleAction}>
  <i class="icon_google_star"></i>
  <span>自定义内容</span>
  <span class="badge">3</span>
</Button>
```

## 样式变体

### ButtonType 选项

```typescript
type ButtonType = 'default' | 'primary' | 'secondary' | 'third' | 'forth';
```

### 视觉外观

- **default**: 标准中性按钮外观
- **primary**: 强调主要操作的按钮（通常为蓝色）
- **secondary**: 次要操作按钮（通常为灰色）
- **third**: 替代样式（通常用于警告/注意）
- **forth**: 附加样式变体

### 大小变体

- **big**: 大按钮尺寸，用于突出操作
- **medium**: 标准按钮尺寸，适用于大多数使用场景
- **mini**: 小按钮尺寸，用于紧凑界面

### 样式变体

- **plain**: 最小化样式变体
- **round**: 圆角变体
- **'' (空字符串)**: 标准样式

## 图标使用

组件使用 `@ticatec/uniface-google-material-icons` 作为图标库。只需传入图标类名：

```svelte
<!-- 常用 Material Icons -->
<Button icon="icon_google_save" label="保存" />
<Button icon="icon_google_edit" label="编辑" />
<Button icon="icon_google_delete" label="删除" />
<Button icon="icon_google_add" label="添加" />
<Button icon="icon_google_remove" label="移除" />
<Button icon="icon_google_search" label="搜索" />
<Button icon="icon_google_settings" label="设置" />
<Button icon="icon_google_home" label="主页" />
<Button icon="icon_google_check" label="确认" />
<Button icon="icon_google_arrow_back" label="返回" />
```

## 最佳实践

### 使用合适的按钮类型

根据操作重要性选择正确的按钮类型：

```svelte
<!-- 主要操作 -->
<Button label="保存" type="primary" />
<Button label="提交" type="primary" />

<!-- 次要操作 -->
<Button label="取消" type="secondary" />
<Button label="预览" type="secondary" />

<!-- 危险操作 -->
<Button label="删除" type="third" />
<Button label="移除" type="third" />
```

### 正确处理异步操作

始终处理加载状态和错误：

```svelte
<script lang="ts">
  let isLoading = false;
  let error = null;
  
  const handleAction = async () => {
    isLoading = true;
    error = null;
    
    try {
      await performAction();
    } catch (err) {
      error = err.message;
    } finally {
      isLoading = false;
    }
  };
</script>

<Button 
  label={isLoading ? "处理中..." : "开始处理"}
  type="primary"
  disabled={isLoading}
  onClick={handleAction}
/>

{#if error}
  <div class="error">{error}</div>
{/if}
```

### 提供视觉反馈

使用图标和适当的样式：

```svelte
<!-- 成功操作 -->
<Button label="保存" icon="icon_google_save" type="primary" />

<!-- 危险操作 -->
<Button label="删除" icon="icon_google_delete" type="third" />

<!-- 导航操作 -->
<Button label="返回" icon="icon_google_arrow_back" type="secondary" />
```

### 考虑移动端响应式

为不同屏幕尺寸使用合适的大小：

```svelte
<div class="responsive-buttons">
  <!-- 桌面端: 普通大小，移动端: 更大以适应触摸 -->
  <Button label="操作" size="big" class="mobile-friendly" />
</div>

<style>
  .responsive-buttons .mobile-friendly {
    /* 响应式样式 */
  }
  
  @media (max-width: 768px) {
    .responsive-buttons .mobile-friendly {
      min-height: 44px; /* iOS 推荐的触摸目标大小 */
    }
  }
</style>
```

## 无障碍性注意事项

**⚠️ 重要提示**：当前的按钮组件存在以下无障碍性限制：

- **非语义化元素**：所有按钮都使用 `<div>` 元素而不是 `<button>`
- **对屏幕阅读器隐藏**：所有按钮默认都有 `aria-hidden="true"`
- **无键盘导航**：组件不支持 Tab 导航或 Enter/Space 激活
- **无焦点管理**：组件不提供 focus 方法或支持 `bind:this`
- **无 ARIA 属性支持**：自定义 aria-* 属性无法传递

如需完全的无障碍性支持，请考虑使用正确的语义化元素包装组件。