cnd-components-mcp
Version:
An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询
189 lines (157 loc) • 13.8 kB
Markdown
## 简介
选项卡常用于同一层级内容的分类展示场景，起到内容分类导航作用。
## 示例
### 基础形态
```tsx
import React from 'react';
import { Tab } from '@alicloud/console-components';
const tabs = [
{ tab: '当前选项', key: 'home' },
{ tab: '可选选项', key: 'doc' },
{ tab: '可选选项', key: 'api' },
{ tab: '禁用选项', key: 'repo', disabled: true },
];
export default () => {
return (
<>
<div>
<h4>页签选项卡 - 默认36px</h4>
<Tab shape="wrapped" >
{tabs.map((tab) => (
<Tab.Item title={tab.tab} key={tab.key} disabled={tab.disabled} />
))}
</Tab>
<br />
<h4>页签选项卡 - 小号32px</h4>
<Tab shape="wrapped" size="small">
{tabs.map((tab) => (
<Tab.Item title={tab.tab} key={tab.key} disabled={tab.disabled} />
))}
</Tab>
</div>
<br />
<div>
<h4>页签选项卡 - 默认36px</h4>
<Tab>
{tabs.map((tab) => (
<Tab.Item title={tab.tab} key={tab.key} disabled={tab.disabled} />
))}
</Tab>
<br />
<h4>页签选项卡 - 小号32px</h4>
<Tab size="small">
{tabs.map((tab) => (
<Tab.Item title={tab.tab} key={tab.key} disabled={tab.disabled} />
))}
</Tab>
</div>
<br />
<div>
<h4>页签选项卡 - 默认32px</h4>
<Tab shape="capsule">
{tabs.map((tab) => (
<Tab.Item title={tab.tab} key={tab.key} disabled={tab.disabled} />
))}
</Tab>
<br />
<h4>页签选项卡 - 小号24px</h4>
<Tab shape="capsule" size="small">
{tabs.map((tab) => (
<Tab.Item title={tab.tab} key={tab.key} disabled={tab.disabled} />
))}
</Tab>
</div>
<br />
<div>
<h4>文字选项卡</h4>
<Tab shape="text">
{tabs.map((tab) => (
<Tab.Item title={tab.tab} key={tab.key} disabled={tab.disabled} />
))}
</Tab>
</div>
</>
);
};
export const meta = {
title: '基础形态',
describe: '',
};
```
```tsx
```
```tsx
```
```tsx
```
## API
### Tab
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | -------- | -------- |
| activeKey | 被激活的选项卡的 key, 赋值则 tab 为受控组件，用户无法切换 | string | - | |
| defaultActiveKey | 初始化时被激活的选项卡的 key | string | - | |
| shape | 外观形态 | 'pure' | 'wrapped' | 'text' | 'capsule' | 'pure' | |
| animation | 是否开启动效 | boolean | true | |
| excessMode | 选项卡过多时的滑动模式 | 'slide' | 'dropdown' | 'slide' | |
| tabPosition | 导航选项卡的位置，只适用于包裹型（wrapped）选项卡 | 'top' | 'bottom' | 'left' | 'right' | 'top' | |
| size | 尺寸 | 'small' | 'medium' | 'medium' | |
| triggerType | 激活选项卡的触发方式 | 'hover' | 'click' | 'click' | |
| lazyLoad | 是否延迟加载 TabPane 的内容，默认开启，即不提前渲染 | boolean | true | |
| unmountInactiveTabs | 是否自动卸载未处于激活状态的选项卡 | boolean | false | |
| navStyle | 导航条的自定义样式 | CSSProperties | - | |
| navClassName | 导航条的自定义样式类 | string | - | |
| contentStyle | 内容区容器的自定义样式 | CSSProperties | - | |
| contentClassName | 内容区容器的自定义样式类 | string | - | |
| extra | 导航栏附加内容 | ReactNode | - | |
| disableKeyboard | 禁用键盘事件 | boolean | false | |
| onClick | 点击单个选项卡时触发的回调 | (key: string) => void | - | |
| onChange | 选项卡发生切换时的事件回调<br/><br/>**签名**:<br/>**参数**:<br/>*key*: 改变后的 key | (key: string) => void | - | |
| onClose | 选项卡被关闭时的事件回调<br/><br/>**签名**:<br/>**参数**:<br/>*key*: 关闭的选项卡的 key | (key: string) => void | - | |
| tabRender | 自定义选项卡模板渲染函数<br/><br/>**签名**:<br/>**参数**:<br/>*key*: 当前 Tab.Item 的 key 值<br/>*props*: 传给 Tab.Item 的所有属性键值对返回值<br/>**返回值**:<br/>- 返回自定义组件 | (key: string, props: Record\<string, unknown>) => ReactNode | - | |
| popupProps | 弹层属性透传，只有当 excessMode 为 dropdown 时生效 | ComponentPropsWithRef\<typeof Popup> | - | |
| icons | 自定义 icon | {<br/> dropdown?: string | ReactNode;<br/> prev?: string | ReactNode;<br/> next?: string | ReactNode;<br/> } | - | |
| showAdd | 展示新增按钮 | boolean | - | |
| onAdd | 新增的事件回调 | () => void | - | |
| addIcon | 自定义添加按钮 | ReactNode | - | |
### Tab.Item
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| ------------ | -------------------------------- | -------------------------------------------------------- | ------ | -------- |
| title | 选项卡标题 | ReactNode | - | |
| closeable | 单个选项卡是否可关闭 | boolean | false | |
| disabled | 选项卡是否被禁用 | boolean | false | |
| style | 导航栏单个选项卡样式 | CSSProperties | - | |
| className | 导航栏单个选项卡样式类 | string | - | |
| onClick | 导航栏单个选项卡点击时的回调 | (key: string, e: React.MouseEvent\<HTMLElement>) => void | - | |
| onMouseEnter | 导航栏单个选项卡鼠标移入时的回调 | (key: string, e: React.MouseEvent\<HTMLElement>) => void | - | |
| onMouseLeave | 导航栏单个选项卡鼠标移出时的回调 | (key: string, e: React.MouseEvent\<HTMLElement>) => void | - | |
| children | 子元素 | React.ReactNode | - | |
## 无障碍键盘操作指南
| 按键 | 说明 |
| :---------- | :------------------- |
| Right Arrow | 切换至前一项Tab.Item |
| Left Arrow | 切换至后一项Tab.Item |
## 更多示例
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```