cnd-components-mcp
Version:
An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询
166 lines (153 loc) • 4.87 kB
Markdown
## 示例
```tsx
import React from 'react';
import { Tree } from '@alicloud/console-components';
const TreeNode = Tree.Node;
const contentStyle = {
display: 'grid',
gridTemplateColumns: 'repeat(2, 1fr)',
gap: 36,
};
export default () => {
return (
<div style={contentStyle}>
<Tree defaultSelectedKeys={['14']} defaultExpandedKeys={['7', '11']}>
<TreeNode label="默认项" key="0">
<TreeNode label="默认项" key="1" />
</TreeNode>
</Tree>
<Tree defaultSelectedKeys={['14']} defaultExpandedKeys={['0']}>
<TreeNode label="默认项" key="0">
<TreeNode label="默认项" key="1" />
</TreeNode>
</Tree>
<Tree defaultSelectedKeys={['0']}>
<TreeNode label="聚焦项" key="0">
<TreeNode label="默认项" key="1" />
</TreeNode>
</Tree>
<Tree defaultSelectedKeys={['0']} defaultExpandedKeys={['0']}>
<TreeNode label="聚焦项" key="0">
<TreeNode label="默认项" key="1" />
</TreeNode>
</Tree>
<Tree defaultSelectedKeys={['14']}>
<TreeNode label="禁用项" key="0" disabled>
<TreeNode label="默认项" key="1" />
</TreeNode>
</Tree>
<Tree defaultSelectedKeys={['14']} defaultExpandedKeys={['0']}>
<TreeNode label="禁用项" key="0" disabled>
<TreeNode label="默认项" key="1" />
</TreeNode>
</Tree>
</div>
);
};
export const meta = {
title: '默认',
describe: '分支节点形态。',
};
```
```tsx
import React from 'react';
import { Tree } from '@alicloud/console-components';
const TreeNode = Tree.Node;
export default () => {
return (
<Tree defaultSelectedKeys={['14']} defaultExpandedKeys={['0', '7', '11']}>
<TreeNode label="默认项" key="0">
<TreeNode label="默认项" key="1">
<TreeNode label="默认项" key="4" />
<TreeNode label="默认项" key="5" />
</TreeNode>
<TreeNode label="聚焦项" key="2">
<TreeNode label="默认项" key="6">
<TreeNode label="默认项" key="10" />
</TreeNode>
<TreeNode label="默认项" key="7">
<TreeNode label="默认项" key="11">
<TreeNode label="默认项" key="15" />
</TreeNode>
<TreeNode label="默认项" key="12" />
<TreeNode label="聚焦项" key="13" />
<TreeNode label="选中项" key="14" />
</TreeNode>
</TreeNode>
<TreeNode label="禁用项" key="3" disabled>
<TreeNode label="叶子" key="8" />
<TreeNode label="叶子" key="9" />
</TreeNode>
</TreeNode>
</Tree>
);
};
export const meta = {
title: '基本树结构',
describe:
'通过 defaultSelectedKeys 属性设置默认选中项，通过 defaultExpandedKeys 属性设置默认展开项。',
};
```
```tsx
import React from 'react';
import { Tree } from '@alicloud/console-components';
const TreeNode = Tree.Node;
export default () => {
return (
<Tree
showLine
defaultSelectedKeys={['14']}
defaultExpandedKeys={['0', '7', '11']}
>
<TreeNode label="默认项" key="0">
<TreeNode label="默认项" key="1">
<TreeNode label="默认项" key="4" />
<TreeNode label="默认项" key="5" />
</TreeNode>
<TreeNode label="聚焦项" key="2">
<TreeNode label="默认项" key="6">
<TreeNode label="默认项" key="10" />
</TreeNode>
<TreeNode label="默认项" key="7">
<TreeNode label="默认项" key="11">
<TreeNode label="默认项" key="15" />
</TreeNode>
<TreeNode label="默认项" key="12" />
<TreeNode label="聚焦项" key="13" />
<TreeNode label="选中项" key="14" />
</TreeNode>
</TreeNode>
<TreeNode label="禁用项" key="3" disabled>
<TreeNode label="叶子" key="8" />
<TreeNode label="叶子" key="9" />
</TreeNode>
</TreeNode>
</Tree>
);
};
export const meta = {
title: '线型树结构',
describe: '通过 showLine 属性设置为线性结构。',
};
```
```tsx
```
## 更多示例
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```