cnd-components-mcp
Version:
An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询
112 lines (108 loc) • 2.59 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
```
## 更多示例
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```