import { Tab } from "../../../src/core/Tab/Tab"; import type { StoryObj } from "@storybook/react"; import React from "react"; /** * Tab 是一个标签页组件,支持多个标签页之间的切换。 * * ### 参数说明 * * | 参数 | 说明 | 类型 | 默认值 | * | --- | --- | --- | --- | * | className | 自定义类名 | string | - | * | contentClassName | 内容区域的类名 | string | - | * | selectedKey | 当前选中的标签页 key | string | - | * | tabs | 标签页配置数组 | TabItem[] | [] | * | onChange | 切换标签页时的回调 | (key: string) => void | - | * | extraSlot | 额外的插槽内容,显示在标签栏右侧 | React.ReactNode | - | * * ### TabItem 参数说明 * * | 参数 | 说明 | 类型 | 默认值 | * | --- | --- | --- | --- | * | key | 唯一标识符 | string | - | * | title | 标签页标题,可以是字符串、ReactNode 或函数 | string \| ReactNode \| ((props: { isActive: boolean }) => ReactNode) | - | * | onClick | 点击标签页时的回调 | () => void | - | * | children | 标签页内容 | React.ReactNode | - | * * ### 特性 * - 支持响应式布局,当空间不够时自动将多余的标签页放入下拉菜单 * - 支持自定义标题(可通过函数形式获取激活状态) * - 支持在标签栏右侧添加额外内容 * - 支持自定义内容区域的样式 */ declare const meta: { component: (props: import("../../../src/core/Tab/Tab.type").TabProps) => React.JSX.Element; title: "Core/Tab | 标签页"; }; export default meta; type Story = StoryObj; /** * 基础的标签页用法,展示如何创建和使用标签页组件 */ export declare const Basic: Story; /** * 当有大量标签页时,组件会自动计算可用空间,将无法完整显示的标签页放入下拉菜单中 */ export declare const ResponsiveLayout: Story; /** * 标签页标题支持函数形式,可以接收 isActive 参数来判断当前是否激活 */ export declare const CustomTitle: Story; /** * extraSlot 可以在标签栏右侧添加额外的内容,如按钮、图标等 */ export declare const WithExtraSlot: Story; /** * 展示实际业务场景中的使用方式,包含复杂的标签内容和操作 */ export declare const ComplexContent: Story; /** * 支持动态添加和删除标签页的场景。 * - 在 extraSlot 中提供"新增标签"按钮 * - 每个标签页标题右侧显示删除图标 * - 可以动态添加和删除标签页 */ export declare const DynamicTabs: Story;