cnd-components-mcp
Version:
An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询
211 lines (174 loc) • 9.05 kB
Markdown
## 简介
按钮通常用于触发操作行为或任务流程。其中分隔按钮属于复合组件，由 Button 和 Menu 组成，其在触发区域上可以分为两部分，其中 Icon 部分作为弹层菜单的触发区域，菜单只有在鼠标悬浮或点击右侧图标区域的时候才会展示
## 示例
### 尺寸与交互
```tsx
import React from 'react';
import { Button } from '@alicloud/console-components';
const titleStyle = {
fontSize: '12px',
fontWeight: '400',
lineHeight: '22px',
marginTop: '28px',
};
const centerStyle = {
display: 'flex',
gap: '16px',
};
export default () => {
return (
<>
<h2 style={{ ...titleStyle, marginTop: 0 }}>36px高度</h2>
<div style={centerStyle}>
<Button size="large">基础按钮</Button>
<Button size="large" disabled>
基础按钮
</Button>
</div>
<h2 style={titleStyle}>32px高度</h2>
<div style={centerStyle}>
<Button>基础按钮</Button>
<Button disabled>基础按钮</Button>
</div>
<h2 style={titleStyle}>24px高度</h2>
<div style={centerStyle}>
<Button size="small">基础按钮</Button>
<Button size="small" disabled>
基础按钮
</Button>
</div>
</>
);
};
export const meta = {
title: '按钮尺寸',
describe:
'可以用 size 属性设置按钮大小。 warning 属性显示高危，错误等提示的按钮，text 属性是文字按钮，loading 属性是加载中状态按钮，组件已绑定 onClick 事件回调函数，供处理不同业务时使用。',
};
```
### 基础形态
```tsx
import React from 'react';
import { Button } from '@alicloud/console-components';
const centerStyle = {
display: 'flex',
gap: '16px',
};
export default () => {
return (
<div style={centerStyle}>
<Button type="primary">基础按钮</Button>
<Button type="primary" disabled>
基础按钮
</Button>
<Button type="primary" warning>
基础按钮
</Button>
<Button type="primary" disabled warning>
基础按钮
</Button>
</div>
);
};
export const meta = {
title: '填充按钮',
describe: '通过 type 属性设置按钮类型。',
};
```
#### 标识按钮
```tsx
import React from 'react';
import { Button, Icon } from '@alicloud/console-components';
const centerStyle = {
display: 'flex',
gap: '16px',
};
export default () => {
return (
<div style={centerStyle}>
<Button type="primary">
<Icon type={'download'} />
基础按钮
</Button>
<Button type="primary" disabled>
<Icon type={'download'} />
基础按钮
</Button>
</div>
);
};
export const meta = {
title: '组合标识',
describe: '通过 children 属性可以自定义按钮内容。',
};
```
#### 功能按钮
```tsx
import React from 'react';
import { Button, Icon } from '@alicloud/console-components';
const centerStyle = {
display: 'flex',
gap: '16px',
};
export default () => {
return (
<div style={centerStyle}>
<Button.Group>
<Button type="primary">基础按钮</Button>
<Button type="primary" style={{ width: "32px", padding: "0px" }}>
<Icon type="arrow_circular" size="medium" />
</Button>
</Button.Group>
<Button.Group>
<Button >基础按钮</Button>
<Button style={{ width: "32px", padding: "0px" }}>
<Icon type="arrow_circular" size="medium" />
</Button>
</Button.Group>
<Button.Group>
<Button disabled>基础按钮</Button>
<Button disabled style={{ width: "32px", padding: "0px" }}>
<Icon type="arrow_circular" size="medium" />
</Button>
</Button.Group>
</div>
);
};
export const meta = {
title: '分割按钮',
describe:
'Button.Group 子组件用于将多个按钮组合在一个容器中',
};
```
## API
### Button
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| --------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | -------- |
| type | 按钮的类型 | 'primary' | 'secondary' | 'normal' | 'normal' | |
| size | 按钮的尺寸 | ButtonSize | 'medium' | |
| icons | 按钮中可配置的 Icon | { loading?: React.ReactNode } | - | |
| iconSize | 按钮中 Icon 的尺寸 | | number<br/> | 'xxs'<br/> | 'xs'<br/> | 'small'<br/> | 'medium'<br/> | 'large'<br/> | 'xl'<br/> | 'xxl'<br/> | 'xxxl'<br/> | 'inherit' | 默认根据 size 自动映射，映射规则：<br/>size:large -> `small`<br/>size:medium -> `xs`<br/>size:small -> `xs` | |
| htmlType | button 标签的 type 值 | 'submit' | 'reset' | 'button' | 'button' | |
| component | 最终渲染的 jsx 标签标签类型 | 'button' | 'a' | React.ComponentType\<unknown> | - | |
| loading | 设置按钮的载入状态 | boolean | false | |
| ghost | 是否为幽灵按钮 | true | false | 'light' | 'dark' | false | |
| text | 是否为文本按钮 | boolean | false | |
| warning | 是否为警告按钮 | boolean | false | |
| disabled | 是否禁用 | boolean | false | |
| onClick | 点击按钮的回调 | React.MouseEventHandler | - | |
### Button.Group
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| ---- | ------------------------------ | ---------- | ------ | -------- |
| size | 统一设置 Button 组件的按钮大小 | ButtonSize | - | |
### ButtonSize
按钮类型
```typescript
export type ButtonSize = 'small' | 'medium' | 'large';
```
## 无障碍键盘操作指南
| 按键 | 说明 |
| :---- | :-------------- |
| Enter | 触发onClick事件 |
| SPACE | 触发onClick事件 |