@ticatec/uniface-element 0.1.71 → 0.2.1

package/docs/buttons/cn/IconButton.md

@@ -0,0 +1,294 @@
+# 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 冷却时间，以防止意外的双击并确保正确的异步操作处理。