# IconButton 组件

`IconButton` 组件专为紧凑界面中的纯图标按钮而设计。

## 基础用法

```svelte
<script lang="ts">
  import IconButton from '@ticatec/uniface-element/IconButton';
  
  const handleEdit = async (event: MouseEvent) => {
    // 处理编辑操作
  };
</script>

<IconButton 
  icon="icon_google_edit"
  type="primary"
  onClick={handleEdit}
/>
```

## 使用示例

```svelte
<script lang="ts">
  import IconButton from '@ticatec/uniface-element/IconButton';
  
  const toolbarActions = {
    edit: async () => { /* 编辑逻辑 */ },
    delete: async () => { /* 删除逻辑 */ },
    share: async () => { /* 分享逻辑 */ },
    favorite: async () => { /* 收藏逻辑 */ }
  };
</script>

<!-- 工具栏图标按钮 -->
<div class="toolbar">
  <IconButton icon="icon_google_edit" type="default" onClick={toolbarActions.edit} />
  <IconButton icon="icon_google_delete" type="third" onClick={toolbarActions.delete} />
  <IconButton icon="icon_google_share" type="secondary" onClick={toolbarActions.share} />
  <IconButton icon="icon_google_favorite" type="primary" onClick={toolbarActions.favorite} />
</div>

<!-- 不同大小 -->
<IconButton icon="icon_google_settings" size="big" onClick={toolbarActions.edit} />
<IconButton icon="icon_google_settings" size="medium" onClick={toolbarActions.edit} />
<IconButton icon="icon_google_settings" size="mini" onClick={toolbarActions.edit} />

<!-- 带自定义插槽内容 -->
<IconButton type="primary" onClick={toolbarActions.edit}>
  <i class="icon_google_edit"></i>
</IconButton>

<style>
  .toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
  }
</style>
```

## 属性

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

## 样式变体

### ButtonType 选项

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

### 视觉外观

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

### 大小变体

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

## 常用图标

使用 `@ticatec/uniface-google-material-icons` 图标库：

```svelte
<!-- 编辑操作 -->
<IconButton icon="icon_google_edit" />
<IconButton icon="icon_google_create" />
<IconButton icon="icon_google_mode_edit" />

<!-- 删除操作 -->
<IconButton icon="icon_google_delete" type="third" />
<IconButton icon="icon_google_delete_forever" type="third" />
<IconButton icon="icon_google_remove" type="third" />

<!-- 查看操作 -->
<IconButton icon="icon_google_visibility" />
<IconButton icon="icon_google_preview" />
<IconButton icon="icon_google_search" />

<!-- 设置操作 -->
<IconButton icon="icon_google_settings" />
<IconButton icon="icon_google_tune" />
<IconButton icon="icon_google_more_vert" />

<!-- 导航操作 -->
<IconButton icon="icon_google_arrow_back" />
<IconButton icon="icon_google_arrow_forward" />
<IconButton icon="icon_google_close" />

<!-- 状态操作 -->
<IconButton icon="icon_google_favorite" type="primary" />
<IconButton icon="icon_google_star" type="primary" />
<IconButton icon="icon_google_bookmark" />
```

## 使用场景

IconButton 组件特别适合以下场景：

- 数据表格行操作
- 工具栏按钮
- 卡片操作
- 紧凑的导航控件
- 状态切换按钮

## 最佳实践

### 数据表格行操作

```svelte
<script lang="ts">
  import IconButton from '@ticatec/uniface-element/IconButton';
  
  export let item: any;
  export let onEdit: (item: any) => Promise<void>;
  export let onDelete: (item: any) => Promise<void>;
  export let onView: (item: any) => Promise<void>;
</script>

<div class="table-actions">
  <IconButton 
    icon="icon_google_visibility" 
    type="default" 
    onClick={async () => await onView(item)} 
  />
  <IconButton 
    icon="icon_google_edit" 
    type="primary" 
    onClick={async () => await onEdit(item)} 
  />
  <IconButton 
    icon="icon_google_delete" 
    type="third" 
    onClick={async () => await onDelete(item)} 
  />
</div>

<style>
  .table-actions {
    display: flex;
    gap: 4px;
  }
</style>
```

### 卡片操作栏

```svelte
<script lang="ts">
  import IconButton from '@ticatec/uniface-element/IconButton';
  
  let isFavorite = false;
  let isBookmarked = false;
  
  const toggleFavorite = async () => {
    isFavorite = !isFavorite;
    // 保存状态到服务器
  };
  
  const toggleBookmark = async () => {
    isBookmarked = !isBookmarked;
    // 保存状态到服务器
  };
  
  const shareContent = async () => {
    // 分享功能
  };
</script>

<div class="card-actions">
  <IconButton 
    icon={isFavorite ? "icon_google_favorite" : "icon_google_favorite_border"}
    type={isFavorite ? "primary" : "default"}
    onClick={toggleFavorite}
  />
  <IconButton 
    icon={isBookmarked ? "icon_google_bookmark" : "icon_google_bookmark_border"}
    type={isBookmarked ? "primary" : "default"}
    onClick={toggleBookmark}
  />
  <IconButton 
    icon="icon_google_share"
    type="secondary"
    onClick={shareContent}
  />
</div>

<style>
  .card-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 8px 0;
  }
</style>
```

### 工具栏布局

```svelte
<script lang="ts">
  import IconButton from '@ticatec/uniface-element/IconButton';
  
  const toolbarActions = {
    save: async () => { /* 保存 */ },
    undo: async () => { /* 撤销 */ },
    redo: async () => { /* 重做 */ },
    settings: async () => { /* 设置 */ }
  };
</script>

<div class="editor-toolbar">
  <div class="toolbar-group">
    <IconButton icon="icon_google_save" type="primary" onClick={toolbarActions.save} />
  </div>
  
  <div class="toolbar-divider"></div>
  
  <div class="toolbar-group">
    <IconButton icon="icon_google_undo" onClick={toolbarActions.undo} />
    <IconButton icon="icon_google_redo" onClick={toolbarActions.redo} />
  </div>
  
  <div class="toolbar-divider"></div>
  
  <div class="toolbar-group">
    <IconButton icon="icon_google_settings" onClick={toolbarActions.settings} />
  </div>
</div>

<style>
  .editor-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-bottom: 1px solid #e0e0e0;
    background: #f8f9fa;
  }
  
  .toolbar-group {
    display: flex;
    gap: 4px;
  }
  
  .toolbar-divider {
    width: 1px;
    height: 24px;
    background: #d0d0d0;
    margin: 0 4px;
  }
</style>
```

## 点击节流

IconButton 组件实现了自动点击节流，具有 500ms 冷却时间，以防止意外的双击并确保正确的异步操作处理。