@ticatec/uniface-element 5.0.0 → 5.0.2

package/docs/components/rows-layout/README.md

@@ -0,0 +1,70 @@
+# RowsLayout
+
+应用布局组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+以多行区域组织应用内容的布局。
+
+## 适用场景
+
+- 上下分区工作台和固定工具区
+- 多个纵向区域需要独立高度配置
+
+## 导入
+
+```ts
+import RowsLayout from '@ticatec/uniface-element/app-layout/RowsLayout';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `width` | 否 | `string` | 否 | `'100%'` | 否 | 宽度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
+| `height` | 否 | `string` | 否 | `'100%'` | 否 | 高度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
+| `topHeight` | 否 | `string \| null` | 否 | `null` | 否 | 高度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
+| `bottomHeight` | 否 | `string \| null` | 否 | `null` | 否 | 高度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
+| `topMin` | 否 | `string \| null` | 否 | `null` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `topMax` | 否 | `string \| null` | 否 | `null` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `bottomMin` | 否 | `string \| null` | 否 | `null` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `bottomMax` | 否 | `string \| null` | 否 | `null` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `topResize` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `bottomResize` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `top` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
+| `children` | 是 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 子内容，用于自定义组件主体。 |
+| `bottom` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `children`
+
+Svelte Snippet 子内容，用于自定义组件主体。
+
+- 类型：`Snippet`
+- 默认值：`undefined`
+- 示例写法：`children={children}`
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import RowsLayout from '@ticatec/uniface-element/app-layout/RowsLayout';
+</script>
+
+<RowsLayout
+  width="240px"
+  height="48px"
+  topHeight="48px"
+  bottomHeight="48px"
+>
+  <div>在这里放置子内容</div>
+</RowsLayout>
+```
+
+## 源码
+
+- `src/lib/app_layout/RowsLayout.svelte`

package/docs/components/rows-layout/example.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import RowsLayout from '@ticatec/uniface-element/app-layout/RowsLayout';
+</script>
+
+<RowsLayout
+  width="240px"
+  height="48px"
+  topHeight="48px"
+  bottomHeight="48px"
+>
+  <div>在这里放置子内容</div>
+</RowsLayout>

package/docs/components/search-box/README.md

@@ -0,0 +1,136 @@
+# SearchBox
+
+表单组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+带搜索图标和输入事件的搜索框。
+
+## 适用场景
+
+- 列表关键词搜索和快速定位
+- 需要即时过滤或回车触发查询
+
+## 导入
+
+```ts
+import SearchBox from '@ticatec/uniface-element/SearchBox';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `theme` | 否 | `string` | 否 | `undefined` | 否 | 主题样式名称，用于切换组件外观主题 |
+| `tooltip` | 否 | `string` | 否 | `undefined` | 否 | 悬停提示信息，鼠标悬浮在字段上时显示 |
+| `error` | 否 | `string` | 否 | `undefined` | 否 | 错误信息，用于在字段下方展示校验错误提示 |
+| `disabled` | 是 | `boolean` | 否 | `false` | 否 | 是否禁用该字段，禁用后字段不可编辑且不响应交互 |
+| `readonly` | 是 | `boolean` | 否 | `undefined` | 否 | 是否只读，只读状态下字段不可编辑但可聚焦和复制 |
+| `compact` | 否 | `boolean` | 否 | `false` | 否 | 是否启用紧凑模式，紧凑模式下字段内部间距更小 |
+| `variant` | 是 | `EditorVariant` | 否 | `undefined` | 否 | 编辑器外观样式变体 |
+| `placeholder` | 是 | `string` | 否 | `undefined` | 否 | 占位提示文本，字段值为空时在输入区域内展示 |
+| `style` | 否 | `string` | 否 | `undefined` | 否 | 自定义内联样式，会应用到字段根容器上 |
+| `onfocus` | 否 | `(event: FocusEvent) => void` | 否 | `undefined` | 否 | 字段获得焦点时触发的回调 |
+| `onblur` | 否 | `(event: FocusEvent) => void` | 否 | `undefined` | 否 | 字段失去焦点时触发的回调 |
+| `onchange` | 是 | `(value?: any) => void` | 否 | `undefined` | 否 | 字段值发生变化时触发的回调 |
+| `onkeydown` | 否 | `(event: KeyboardEvent) => void` | 否 | `undefined` | 否 | 事件或行为回调；参数与返回值以类型签名为准。 |
+| `onkeyup` | 否 | `(event: KeyboardEvent) => void` | 否 | `undefined` | 否 | 事件或行为回调；参数与返回值以类型签名为准。 |
+| `onkeypress` | 否 | `(event: KeyboardEvent) => void` | 否 | `undefined` | 否 | 事件或行为回调；参数与返回值以类型签名为准。 |
+| `value` | 是 | `string` | 否 | `$bindable()` | 是 | 组件的核心值。支持绑定时建议使用 `bind:value`，外部修改会同步到组件。 |
+| `oninput` | 否 | `(event: Event) => void` | 否 | `undefined` | 否 | 事件或行为回调；参数与返回值以类型签名为准。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `disabled`
+
+是否禁用该字段，禁用后字段不可编辑且不响应交互
+
+- 类型：`boolean`
+- 默认值：`false`
+- 示例写法：`disabled={false}`
+
+### `readonly`
+
+是否只读，只读状态下字段不可编辑但可聚焦和复制
+
+- 类型：`boolean`
+- 默认值：`undefined`
+- 示例写法：`readonly={false}`
+
+### `variant`
+
+编辑器外观样式变体
+
+- 类型：`EditorVariant`
+- 默认值：`undefined`
+- 示例写法：`variant="plain"`
+
+### `placeholder`
+
+占位提示文本，字段值为空时在输入区域内展示
+
+- 类型：`string`
+- 默认值：`undefined`
+- 示例写法：`placeholder="请输入或选择"`
+
+### `onchange`
+
+字段值发生变化时触发的回调
+
+- 类型：`(value?: any) => void`
+- 默认值：`undefined`
+- 示例写法：`onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}`
+
+### `value`
+
+组件的核心值。支持绑定时建议使用 `bind:value`，外部修改会同步到组件。
+
+- 类型：`string`
+- 默认值：`$bindable()`
+- 推荐写法：`bind:value`
+
+## 组件实例方法
+
+通过 `bind:this` 获取组件实例后调用。
+
+| 方法 | 类型 | 说明 |
+| --- | --- | --- |
+| `focus()` | `() => void` | 组件实例方法。 |
+
+## 相关类型定义
+
+以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
+
+### `EditorVariant`
+
+```ts
+export type EditorVariant = '' | 'plain' | 'outlined' | 'filled';
+```
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import SearchBox from '@ticatec/uniface-element/SearchBox';
+  let value = $state<any>("示例值");
+</script>
+
+<SearchBox
+  bind:value
+  onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}
+  onfocus={async (...args: any[]) => { console.log('onfocus', ...args); return true; }}
+  variant="plain"
+  placeholder="请输入或选择"
+  disabled={false}
+  readonly={false}
+  compact={true}
+/>
+<p>当前状态：{JSON.stringify({value})}</p>
+```
+
+## 源码
+
+- `src/lib/form/search_box/SearchBox.svelte`

package/docs/components/search-box/example.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import SearchBox from '@ticatec/uniface-element/SearchBox';
+  let value = $state<any>("示例值");
+</script>
+
+<SearchBox
+  bind:value
+  onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}
+  onfocus={async (...args: any[]) => { console.log('onfocus', ...args); return true; }}
+  variant="plain"
+  placeholder="请输入或选择"
+  disabled={false}
+  readonly={false}
+  compact={true}
+/>
+<p>当前状态：{JSON.stringify({value})}</p>

package/docs/components/separator/README.md

@@ -0,0 +1,44 @@
+# Separator
+
+通用组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+在内容之间绘制视觉分隔线。
+
+## 适用场景
+
+- 菜单、工具栏和表单分组
+- 需要弱化但明确的区域边界
+
+## 导入
+
+```ts
+import Separator from '@ticatec/uniface-element/Separator';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `height` | 否 | `string` | 否 | `'24px'` | 否 | 高度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
+| `style` | 否 | `string` | 否 | `undefined` | 否 | 附加到组件根元素的内联样式。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import Separator from '@ticatec/uniface-element/Separator';
+</script>
+
+<Separator
+  height="48px"
+/>
+```
+
+## 源码
+
+- `src/lib/general/separator/Separator.svelte`

package/docs/components/separator/example.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import Separator from '@ticatec/uniface-element/Separator';
+</script>
+
+<Separator
+  height="48px"
+/>

package/docs/components/sidebar-layout/README.md

@@ -0,0 +1,65 @@
+# SidebarLayout
+
+应用布局组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+包含可配置侧栏和主内容区的布局。
+
+## 适用场景
+
+- 后台导航、资源树和主工作区
+- 需要固定或可调整宽度的侧栏
+
+## 导入
+
+```ts
+import SidebarLayout from '@ticatec/uniface-element/app-layout/SidebarLayout';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `sidebarResize` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `headerHeight` | 否 | `string` | 否 | `"48px"` | 否 | 高度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
+| `sidebarWidth` | 否 | `string` | 否 | `'300px'` | 否 | 宽度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
+| `sidebarMaxWidth` | 否 | `string \| null` | 否 | `null` | 否 | 宽度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
+| `sidebarMinWidth` | 否 | `string \| null` | 否 | `null` | 否 | 宽度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
+| `sidebar` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
+| `header` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
+| `children` | 是 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 子内容，用于自定义组件主体。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `children`
+
+Svelte Snippet 子内容，用于自定义组件主体。
+
+- 类型：`Snippet`
+- 默认值：`undefined`
+- 示例写法：`children={children}`
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import SidebarLayout from '@ticatec/uniface-element/app-layout/SidebarLayout';
+</script>
+
+<SidebarLayout
+  headerHeight="48px"
+  sidebarWidth="240px"
+  sidebarMaxWidth="240px"
+  sidebarMinWidth="240px"
+>
+  <div>在这里放置子内容</div>
+</SidebarLayout>
+```
+
+## 源码
+
+- `src/lib/app_layout/SidebarLayout.svelte`

package/docs/components/sidebar-layout/example.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import SidebarLayout from '@ticatec/uniface-element/app-layout/SidebarLayout';
+</script>
+
+<SidebarLayout
+  headerHeight="48px"
+  sidebarWidth="240px"
+  sidebarMaxWidth="240px"
+  sidebarMinWidth="240px"
+>
+  <div>在这里放置子内容</div>
+</SidebarLayout>

package/docs/components/split/README.md

@@ -0,0 +1,48 @@
+# Split
+
+通用组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+允许用户拖动调整两个区域尺寸的分割容器。
+
+## 适用场景
+
+- 编辑器、预览器和主从面板
+- 需要运行时调整左右或上下空间比例
+
+## 导入
+
+```ts
+import Split from '@ticatec/uniface-element/Split';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `direction` | 否 | `"horizontal" \| "vertical"` | 否 | `"vertical"` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `width` | 否 | `number` | 否 | `2` | 否 | 宽度配置，数值单位为像素。 |
+| `bindingPanel` | 否 | `HTMLElement` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `reverse` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `onResizeEnd` | 否 | `(size: number) => void` | 否 | `undefined` | 否 | 事件或行为回调；参数与返回值以类型签名为准。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import Split from '@ticatec/uniface-element/Split';
+</script>
+
+<Split
+  onResizeEnd={async (...args: any[]) => { console.log('onResizeEnd', ...args); return true; }}
+  width={240}
+/>
+```
+
+## 源码
+
+- `src/lib/general/split/Split.svelte`

package/docs/components/split/example.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import Split from '@ticatec/uniface-element/Split';
+</script>
+
+<Split
+  onResizeEnd={async (...args: any[]) => { console.log('onResizeEnd', ...args); return true; }}
+  width={240}
+/>

package/docs/components/switch/README.md

@@ -0,0 +1,77 @@
+# Switch
+
+表单组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+用于即时切换开/关状态的开关控件。
+
+## 适用场景
+
+- 启用功能、在线状态和配置开关
+- 修改立即生效且语义为布尔状态
+
+## 导入
+
+```ts
+import Switch from '@ticatec/uniface-element/Switch';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `checkLabel` | 否 | `string` | 否 | `"On"` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `uncheckLabel` | 否 | `string` | 否 | `"Off"` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `readonly` | 是 | `boolean` | 否 | `false` | 否 | 只读状态。保留内容展示，但阻止用户修改。 |
+| `disabled` | 是 | `boolean` | 否 | `false` | 否 | 禁用交互。禁用后通常不可聚焦、不可修改，也不会触发变更操作。 |
+| `value` | 是 | `boolean` | 否 | `$bindable(false)` | 是 | 组件的核心值。支持绑定时建议使用 `bind:value`，外部修改会同步到组件。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `readonly`
+
+只读状态。保留内容展示，但阻止用户修改。
+
+- 类型：`boolean`
+- 默认值：`false`
+- 示例写法：`readonly={false}`
+
+### `disabled`
+
+禁用交互。禁用后通常不可聚焦、不可修改，也不会触发变更操作。
+
+- 类型：`boolean`
+- 默认值：`false`
+- 示例写法：`disabled={false}`
+
+### `value`
+
+组件的核心值。支持绑定时建议使用 `bind:value`，外部修改会同步到组件。
+
+- 类型：`boolean`
+- 默认值：`$bindable(false)`
+- 推荐写法：`bind:value`
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import Switch from '@ticatec/uniface-element/Switch';
+  let value = $state<any>(true);
+</script>
+
+<Switch
+  bind:value
+  readonly={false}
+  disabled={false}
+/>
+<p>当前状态：{JSON.stringify({value})}</p>
+```
+
+## 源码
+
+- `src/lib/form/switch/Switch.svelte`

package/docs/components/switch/example.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import Switch from '@ticatec/uniface-element/Switch';
+  let value = $state<any>(true);
+</script>
+
+<Switch
+  bind:value
+  readonly={false}
+  disabled={false}
+/>
+<p>当前状态：{JSON.stringify({value})}</p>

package/docs/components/tabs/README.md

@@ -0,0 +1,127 @@
+# Tabs
+
+导航组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+通过标签切换同一页面内的内容或工作对象。
+
+## 适用场景
+
+- 详情子页面、多文档和配置分类
+- 需要动态关闭、刷新或横向滚动标签
+
+## 导入
+
+```ts
+import Tabs from '@ticatec/uniface-element/Tabs';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `class` | 否 | `string` | 否 | `undefined` | 否 | 附加到组件根元素的 CSS class。 |
+| `simple` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `textField` | 否 | `string` | 否 | `'text'` | 否 | 数据项中用于界面显示的文本字段名。 |
+| `keyField` | 否 | `string` | 否 | `'id'` | 否 | 数据项中作为唯一值或选中值的字段名。 |
+| `style` | 否 | `string` | 否 | `undefined` | 否 | 附加到组件根元素的内联样式。 |
+| `tabs` | 是 | `Array<any>` | 是 | `$bindable([])` | 是 | 标签页数据集合；每个标签应包含 `keyField` 与 `textField` 指向的字段。 |
+| `scrollStep` | 否 | `number` | 否 | `100` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `closable` | 否 | `boolean \| TabActionHandler` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `activeTab` | 是 | `any` | 否 | `$bindable()` | 是 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `maxTabWidth` | 否 | `number` | 否 | `undefined` | 否 | 宽度配置，数值单位为像素。 |
+| `tabRender` | 否 | `TabRender` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `onrefresh` | 否 | `TabActionHandler` | 否 | `undefined` | 否 | 事件或行为回调；参数与返回值以类型签名为准。 |
+| `onremove` | 是 | `TabCloseHandler` | 否 | `undefined` | 否 | 事件或行为回调；参数与返回值以类型签名为准。 |
+| `children` | 是 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 子内容，用于自定义组件主体。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `tabs`
+
+标签页数据集合；每个标签应包含 `keyField` 与 `textField` 指向的字段。
+
+- 类型：`Array<any>`
+- 默认值：`$bindable([])`
+- 推荐写法：`bind:tabs`
+
+### `activeTab`
+
+可选配置，具体取值范围和数据结构见类型列。
+
+- 类型：`any`
+- 默认值：`$bindable()`
+- 推荐写法：`bind:activeTab`
+
+### `onremove`
+
+事件或行为回调；参数与返回值以类型签名为准。
+
+- 类型：`TabCloseHandler`
+- 默认值：`undefined`
+- 示例写法：`onremove={async (...args: any[]) => { console.log('onremove', ...args); return true; }}`
+
+### `children`
+
+Svelte Snippet 子内容，用于自定义组件主体。
+
+- 类型：`Snippet`
+- 默认值：`undefined`
+- 示例写法：`children={children}`
+
+## 相关类型定义
+
+以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
+
+### `TabActionHandler`
+
+```ts
+export type TabActionHandler = (tab: any) => void;
+```
+
+### `TabRender`
+
+```ts
+export type TabRender = (tab: any) => any;
+```
+
+### `TabCloseHandler`
+
+```ts
+export type TabCloseHandler = (tab: any) => boolean | Promise<boolean>;
+```
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import Tabs from '@ticatec/uniface-element/Tabs';
+  let tabs = $state<any>([
+    {id: 'overview', text: '概览'},
+    {id: 'settings', text: '设置'}
+  ]);
+  let activeTab = $state<any>();
+</script>
+
+<Tabs
+  bind:tabs
+  bind:activeTab
+  onrefresh={async (...args: any[]) => { console.log('onrefresh', ...args); return true; }}
+  onremove={async (...args: any[]) => { console.log('onremove', ...args); return true; }}
+  textField="text"
+  keyField="id"
+  closable={true}
+  maxTabWidth={240}
+>
+  <div>在这里放置子内容</div>
+</Tabs>
+<p>当前状态：{JSON.stringify({tabs, activeTab})}</p>
+```
+
+## 源码
+
+- `src/lib/navigation/tabs/Tabs.svelte`

package/docs/components/tabs/example.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import Tabs from '@ticatec/uniface-element/Tabs';
+  let tabs = $state<any>([
+    {id: 'overview', text: '概览'},
+    {id: 'settings', text: '设置'}
+  ]);
+  let activeTab = $state<any>();
+</script>
+
+<Tabs
+  bind:tabs
+  bind:activeTab
+  onrefresh={async (...args: any[]) => { console.log('onrefresh', ...args); return true; }}
+  onremove={async (...args: any[]) => { console.log('onremove', ...args); return true; }}
+  textField="text"
+  keyField="id"
+  closable={true}
+  maxTabWidth={240}
+>
+  <div>在这里放置子内容</div>
+</Tabs>
+<p>当前状态：{JSON.stringify({tabs, activeTab})}</p>