# TextButton 文本按钮组件

一个极简的基于文本的按钮组件，专为细致的操作、导航链接和次要交互而设计，当完整的按钮外观可能过于突出时使用。

## 功能特性

- **文本优先设计**: 简洁、极简的外观，强调文本内容
- **多种类型**: 默认、主要、次要、第三级和第四级按钮样式
- **尺寸选项**: 大、中、小三种尺寸
- **事件处理**: 支持点击、聚焦和失焦事件
- **无障碍访问**: 使用语义化按钮元素，支持禁用状态
- **防抖保护**: 内置点击防抖，防止快速重复触发
- **自定义样式**: 灵活的样式定制
- **插槽支持**: 通过插槽支持自定义内容

## 基本用法

```svelte
<script>
import TextButton from '@ticatec/uniface-element/TextButton';

const handleClick = (event) => {
  console.log('文本按钮被点击!', event);
};
</script>

<TextButton 
  label="点击我" 
  onclick={handleClick} 
/>
```

## 属性参数

| 属性 | 类型 | 默认值 | 描述 |
|------|------|---------|-------------|
| `disabled` | `boolean` | `false` | 是否禁用按钮 |
| `size` | `'big' \| 'medium' \| 'mini'` | `'medium'` | 按钮尺寸 |
| `label` | `string` | `''` | 按钮文本标签 |
| `type` | `'default' \| 'primary' \| 'secondary' \| 'third' \| 'forth'` | `'default'` | 按钮类型/样式 |
| `onclick` | `MouseClickHandler` | - | 点击事件处理器 |
| `onfocus` | `(event: FocusEvent) => void` | `() => {}` | 聚焦事件处理器 |
| `onblur` | `(event: FocusEvent) => void` | `() => {}` | 失焦事件处理器 |
| `style` | `string` | `''` | 自定义CSS样式 |

## 按钮类型

```svelte
<!-- 默认文本按钮 -->
<TextButton label="默认" type="default" onclick={handleClick} />

<!-- 主要文本按钮 -->
<TextButton label="主要" type="primary" onclick={handleClick} />

<!-- 次要文本按钮 -->
<TextButton label="次要" type="secondary" onclick={handleClick} />

<!-- 第三级文本按钮 -->
<TextButton label="第三级" type="third" onclick={handleClick} />

<!-- 第四级文本按钮 -->
<TextButton label="第四级" type="forth" onclick={handleClick} />
```

## 按钮尺寸

```svelte
<!-- 小型文本按钮 -->
<TextButton label="小型" size="mini" onclick={handleClick} />

<!-- 中型文本按钮（默认） -->
<TextButton label="中型" size="medium" onclick={handleClick} />

<!-- 大型文本按钮 -->
<TextButton label="大型" size="big" onclick={handleClick} />
```

## 常见使用场景

### 导航链接

```svelte
<nav class="breadcrumb">
  <TextButton label="首页" onclick={() => goto('/')} />
  <span class="separator">›</span>
  <TextButton label="产品" onclick={() => goto('/products')} />
  <span class="separator">›</span>
  <span>当前页面</span>
</nav>
```

### 次要操作

```svelte
<div class="action-group">
  <Button label="保存" type="primary" onclick={handleSave} />
  <TextButton label="取消" onclick={handleCancel} />
  <TextButton label="保存为草稿" onclick={handleSaveDraft} />
</div>
```

### 标签页导航

```svelte
<script>
let activeTab = 'overview';

const switchTab = (tab) => (event) => {
  activeTab = tab;
};
</script>

<div class="tabs">
  <TextButton 
    label="概览" 
    type={activeTab === 'overview' ? 'primary' : 'default'}
    onclick={switchTab('overview')} 
  />
  <TextButton 
    label="详情" 
    type={activeTab === 'details' ? 'primary' : 'default'}
    onclick={switchTab('details')} 
  />
  <TextButton 
    label="评价" 
    type={activeTab === 'reviews' ? 'primary' : 'default'}
    onclick={switchTab('reviews')} 
  />
</div>
```

### 菜单项

```svelte
<div class="menu">
  <TextButton label="个人设置" onclick={openProfile} />
  <TextButton label="账户" onclick={openAccount} />
  <TextButton label="偏好设置" onclick={openPreferences} />
  <TextButton label="退出登录" type="secondary" onclick={logout} />
</div>
```

## 事件处理

```svelte
<script>
const handleClick = (event) => {
  console.log('文本按钮被点击:', event);
};

const handleFocus = (event) => {
  console.log('文本按钮获得焦点:', event);
  // 显示额外的上下文或高亮
};

const handleBlur = (event) => {
  console.log('文本按钮失去焦点:', event);
  // 移除高亮或上下文
};
</script>

<TextButton 
  label="交互文本"
  onclick={handleClick}
  onfocus={handleFocus}
  onblur={handleBlur}
/>
```

## 禁用状态

```svelte
<TextButton 
  label="禁用操作" 
  disabled={true}
  onclick={handleClick} 
/>
```

## 自定义样式

```svelte
<TextButton 
  label="自定义样式"
  style="
    color: #007acc;
    text-decoration: underline;
    font-weight: bold;
    padding: 4px 8px;
  "
  onclick={handleClick}
/>
```

## 插槽用法

```svelte
<!-- 自定义内容替代标签 -->
<TextButton onclick={handleCustomAction}>
  <span class="custom-text">
    <i class="fas fa-arrow-right"></i>
    了解更多
  </span>
</TextButton>

<!-- 丰富内容 -->
<TextButton onclick={handleRichAction}>
  <div class="rich-content">
    <strong>高级选项</strong>
    <small>配置详细设置</small>
  </div>
</TextButton>
```

## 高级示例

### 条件文本按钮

```svelte
<script>
let isEditing = false;

const toggleEdit = (event) => {
  isEditing = !isEditing;
};
</script>

<TextButton 
  label={isEditing ? "保存更改" : "编辑"}
  type={isEditing ? "primary" : "default"}
  onclick={toggleEdit}
/>
```

### 链接样式按钮

```svelte
<TextButton 
  label="访问我们的网站"
  style="
    color: #007acc;
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
  "
  onclick={() => window.open('https://example.com', '_blank')}
/>
```

### 可展开部分

```svelte
<script>
let isExpanded = false;

const toggleSection = (event) => {
  isExpanded = !isExpanded;
};
</script>

<div class="expandable-section">
  <TextButton 
    label={isExpanded ? "显示更少 ▲" : "显示更多 ▼"}
    onclick={toggleSection}
  />
  
  {#if isExpanded}
    <div class="expanded-content">
      <p>额外的内容放在这里...</p>
    </div>
  {/if}
</div>
```

### 分页控件

```svelte
<script>
let currentPage = 1;
let totalPages = 10;

const goToPage = (page) => (event) => {
  if (page >= 1 && page <= totalPages) {
    currentPage = page;
  }
};
</script>

<div class="pagination">
  <TextButton 
    label="上一页"
    disabled={currentPage === 1}
    onclick={goToPage(currentPage - 1)}
  />
  
  <span class="page-info">第 {currentPage} 页，共 {totalPages} 页</span>
  
  <TextButton 
    label="下一页"
    disabled={currentPage === totalPages}
    onclick={goToPage(currentPage + 1)}
  />
</div>
```

### 过滤选项

```svelte
<script>
let activeFilters = new Set();

const toggleFilter = (filter) => (event) => {
  if (activeFilters.has(filter)) {
    activeFilters.delete(filter);
  } else {
    activeFilters.add(filter);
  }
  activeFilters = activeFilters; // 触发响应式更新
};
</script>

<div class="filters">
  <TextButton 
    label="全部"
    type={activeFilters.size === 0 ? 'primary' : 'default'}
    onclick={() => activeFilters = new Set()}
  />
  <TextButton 
    label="活跃"
    type={activeFilters.has('active') ? 'primary' : 'default'}
    onclick={toggleFilter('active')}
  />
  <TextButton 
    label="已完成"
    type={activeFilters.has('completed') ? 'primary' : 'default'}
    onclick={toggleFilter('completed')}
  />
</div>
```

### 表单操作

```svelte
<div class="form-actions">
  <Button label="提交" type="primary" onclick={handleSubmit} />
  
  <div class="secondary-actions">
    <TextButton label="保存为草稿" onclick={saveDraft} />
    <TextButton label="预览" onclick={showPreview} />
    <TextButton label="重置" type="secondary" onclick={resetForm} />
  </div>
</div>

<style>
  .form-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .secondary-actions {
    display: flex;
    gap: 16px;
  }
</style>
```

### 下拉菜单触发器

```svelte
<script>
let showDropdown = false;

const toggleDropdown = (event) => {
  showDropdown = !showDropdown;
};
</script>

<div class="dropdown-container">
  <TextButton 
    label="选项 ▼"
    type={showDropdown ? 'primary' : 'default'}
    onclick={toggleDropdown}
  />
  
  {#if showDropdown}
    <div class="dropdown-menu">
      <TextButton label="选项 1" onclick={selectOption1} />
      <TextButton label="选项 2" onclick={selectOption2} />
      <TextButton label="选项 3" onclick={selectOption3} />
    </div>
  {/if}
</div>
```

## 无障碍访问

TextButton组件遵循无障碍访问最佳实践：

- 使用语义化的`<button>`元素
- 支持键盘导航（Tab、Enter、Space键）
- 正确的禁用状态处理
- 为屏幕阅读器提供聚焦和失焦事件

### 改善无障碍访问

```svelte
<!-- 为屏幕阅读器提供上下文 -->
<TextButton 
  label="删除"
  onclick={handleDelete}
  style="aria-label: 永久删除此项目"
/>

<!-- 添加角色和描述 -->
<TextButton 
  label="了解更多"
  onclick={showDetails}
  style="role: button; aria-describedby: help-text"
/>
<div id="help-text" style="display: none;">
  打开关于此功能的详细信息
</div>
```

## 样式定制

组件使用以下CSS类：

- `.uniface-button` - 基础按钮类
- `.text-button` - 文本按钮特定样式
- `.{size}` - 尺寸特定样式（big、medium、mini）
- `.{type}` - 类型特定样式（default、primary等）
- `.disabled` - 禁用状态样式

### CSS示例

```css
.uniface-button.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background: transparent;
  border: none;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.uniface-button.text-button:hover:not(.disabled) {
  background: rgba(0, 0, 0, 0.05);
  text-decoration: underline;
}

.uniface-button.text-button:focus {
  outline: 2px solid #007acc;
  outline-offset: 2px;
}

.uniface-button.text-button.primary {
  color: #007acc;
  font-weight: 500;
}

.uniface-button.text-button.secondary {
  color: #666;
}

.uniface-button.text-button.big {
  padding: 8px 12px;
  font-size: 16px;
}

.uniface-button.text-button.mini {
  padding: 2px 4px;
  font-size: 12px;
}

.uniface-button.text-button.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
```

## 最佳实践

1. **适当的上下文**: 将文本按钮用于次要操作和导航
2. **清晰的标签**: 提供清楚表明操作的描述性标签
3. **视觉层次**: 使用不同类型建立适当的视觉层次
4. **一致的间距**: 在文本按钮之间保持一致的间距
5. **悬停状态**: 确保悬停状态提供清晰的反馈
6. **无障碍访问**: 始终考虑键盘导航和屏幕阅读器
7. **上下文感知**: 确保文本按钮在其周围环境中工作良好

## 常见模式

### 内联操作

```svelte
<p>
  您的更改已保存。
  <TextButton label="撤销" onclick={undoChanges} />
</p>
```

### 卡片操作

```svelte
<div class="card">
  <h3>文章标题</h3>
  <p>文章摘要...</p>
  
  <div class="card-actions">
    <TextButton label="阅读更多" type="primary" onclick={readMore} />
    <TextButton label="分享" onclick={shareArticle} />
    <TextButton label="保存" onclick={saveArticle} />
  </div>
</div>
```

### 列表项操作

```svelte
<div class="list-item">
  <span class="item-name">文档.pdf</span>
  <div class="item-actions">
    <TextButton label="下载" onclick={download} />
    <TextButton label="分享" onclick={share} />
    <TextButton label="删除" type="secondary" onclick={deleteFile} />
  </div>
</div>
```

## 与其他组件集成

```svelte
<!-- 与模态框 -->
<Modal bind:open={showModal}>
  <h2>确认操作</h2>
  <p>您确定要继续吗？</p>
  
  <div class="modal-actions">
    <Button label="确认" type="primary" onclick={confirm} />
    <TextButton label="取消" onclick={() => showModal = false} />
  </div>
</Modal>

<!-- 与工具提示 -->
<Tooltip text="此操作无法撤销">
  <TextButton label="删除全部" type="secondary" onclick={deleteAll} />
</Tooltip>
```

## 浏览器支持

TextButton组件在支持以下特性的所有现代浏览器中工作：
- ES6+ JavaScript
- CSS Flexbox
- 语义化按钮元素

## 性能

- 最小化的样式，快速渲染
- 内置点击防抖
- 高效的事件处理
- 轻量级DOM结构