ep-craft 0.1.41 → 0.2.0

package/dist-ai/components/segmented.md

@@ -0,0 +1,81 @@
+# EpSegmented
+
+`ep-segmented` · feedback（反馈） · `component:segmented`
+
+## 摘要
+
+分段控制器，状态与结果反馈
+
+## 适用场景
+
+- 适用：展示分段控制器并向用户传达状态
+- 适用：在操作前后提供即时反馈
+- 不适用：无需用户感知状态变化时
+- 不适用：需要完整业务弹窗流程时优先使用 Dialog
+
+## 关键词
+
+- 中文：分段控制器、反馈
+- English: segmented, toggle, feedback
+
+## 变体
+
+- size: large/default/small（按容器空间与信息密度选择尺寸）
+- state: disabled（通过布尔属性切换禁用、加载或选中状态）
+
+## Props
+
+- direction ('horizontal' | 'vertical'，默认 horizontal)：排列方向
+- options (Option[]，默认 [])：选项列表
+- modelValue（别名 v-model） (string | number | boolean，默认 见文档)：绑定值
+- props ({ label?: string; value?: string; disabled?: string }，默认 { label: 'label', value: 'value', disabled: 'disabled' })：选项字段映射
+- block (boolean)：是否撑满父容器宽度
+- size ('large' | 'default' | 'small')：尺寸
+- disabled (boolean，默认 见文档)：是否禁用
+- validateEvent (boolean，默认 true)：是否触发表单校验
+- id (string)：原生 input id
+- name (string)：原生 input name 属性
+- ariaLabel (string)：原生 aria-label 属性
+
+## Events
+
+- update:modelValue((value: string | number | boolean))：绑定值变化时触发
+- change((value: string | number | boolean))：选中值变化时触发
+
+## Slots
+
+- default：自定义选项内容，参数为 `{ item }`
+
+## 视觉提示
+
+- 形状：行内或块级提示
+- 密度：中等
+- 插槽内容：default：自定义选项内容，参数为 `{ item }`
+- CSS 变量：--el-color-success、--el-color-warning、--el-color-danger、--el-font-size-base
+
+## 示例
+
+### 分段控制器
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { EpSegmented } from 'ep-craft'
+
+const value = ref('week')
+const options = ['day', 'week', 'month']
+</script>
+
+<template>
+  <ep-segmented v-model="value" :options="options" />
+</template>
+```
+
+## 相关条目
+
+- EpTabs
+- EpRadioGroup
+
+---
+
+ep-craft 0.2.0