cnd-components-mcp
Version:
An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询
183 lines (150 loc) • 7.34 kB
Markdown
## 简介
标签常用于内容分类、状态标识、筛选条件标识等场景。
## 示例
### 基础形态
```tsx
import React from 'react';
import { Tag, Grid } from '@alicloud/console-components';
const { Row, Col } = Grid;
export default () => {
return (
<div>
<h4>默认尺寸24px</h4>
<Row>
<Col>
<Tag color="red">默认标签</Tag>
</Col>
<Col>
<Tag color="orange">默认标签</Tag>
</Col>
<Col>
<Tag color="yellow">默认标签</Tag>
</Col>
<Col>
<Tag color="green">默认标签</Tag>
</Col>
<Col>
<Tag color="blue">默认标签</Tag>
</Col>
</Row>
<br />
<h4>小号尺寸20px</h4>
<Row>
<Col>
<Tag color="red" size="small">默认标签</Tag>
</Col>
<Col>
<Tag color="orange" size="small">默认标签</Tag>
</Col>
<Col>
<Tag color="yellow" size="small">默认标签</Tag>
</Col>
<Col>
<Tag color="green" size="small">默认标签</Tag>
</Col>
<Col>
<Tag color="blue" size="small">默认标签</Tag>
</Col>
</Row>
</div>
);
};
export const meta = {
title: '静态展示标签不支持悬停以及激活状态，仅静态展示标签支持彩色样式',
describe: '',
};
```
### 可交互形态
```tsx
import React from 'react';
import { Tag, Grid, Icon } from '@alicloud/console-components';
const { Row, Col } = Grid;
export default () => {
return (
<div>
<h4>默认</h4>
<Row>
<Col>
<Tag>默认标签</Tag>
</Col>
<Col>
<Tag.Closable>默认标签</Tag.Closable>
</Col>
<Col>
<Tag><Icon type="sub-account-line" />默认标签</Tag>
</Col>
</Row>
<br />
<h4>激活/选中</h4>
<Row>
<Col>
<Tag.Selectable checked>默认标签</Tag.Selectable>
</Col>
<Col>
<Tag.Selectable checked>默认标签<Icon type="close" /></Tag.Selectable>
</Col>
<Col>
<Tag.Selectable checked><Icon type="sub-account-line" />默认标签</Tag.Selectable>
</Col>
</Row>
<br />
<h4>禁用</h4>
<Row>
<Col>
<Tag disabled>默认标签</Tag>
</Col>
<Col>
<Tag.Closable disabled>默认标签</Tag.Closable>
</Col>
<Col>
<Tag disabled><Icon type="sub-account-line" />默认标签</Tag>
</Col>
</Row>
</div>
);
};
export const meta = {
title: '可点击或可删除类的动态交互标签，不支持彩色样式',
describe: '',
};
```
## API
### Tag
| 参数 | 说明 | 类型 | 默认值 | 是否必填 | 支持版本 |
| ----------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | -------- | -------- | -------- |
| type | 标签的类型 | 'normal' | 'primary' | 'normal' | | - |
| size | 标签的尺寸 | 'small' | 'medium' | 'large' | - | | - |
| color | 标签颜色，目前支持：blue、green、orange、red、turquoise、yellow 和 hex 颜色值 | string | - | | 1.19.0 |
| animation | 是否开启动效 | boolean | false | | - |
| afterAppear | 标签出现动画结束后执行的回调 | (node: HTMLElement) => void | - | | - |
| onClick | 点击回调 | (<br/> event: React.MouseEvent\<HTMLDivElement> | React.KeyboardEvent\<HTMLDivElement><br/> ) => void | - | | - |
### Tag.Closeable
继承 Tag 的所有属性
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| ---------- | -------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ------ | -------- |
| closeArea | closeable 标签的 onClose 响应区域 | CloseArea | 'tail' | |
| onClose | 点击关闭按钮时的回调<br/><br/>**签名**:<br/>**参数**:<br/>*from*: 事件来源<br/>**返回值**:<br/>true 则关闭，false 阻止关闭 | (from: CloseArea, node?: HTMLElement | null) => boolean | - | |
| afterClose | 标签关闭后执行的回调 | (node: HTMLElement | null) => void | - | |
### Tag.Selectable
继承 Tag 的所有属性
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| -------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ------ | -------- |
| checked | 标签是否被选中，受控用法 | boolean | - | |
| defaultChecked | 标签是否默认被选中，非受控用法。 | boolean | - | |
| onChange | 选中状态变化时触发的事件 | (<br/> checked: boolean,<br/> e: React.MouseEvent\<HTMLDivElement> | React.KeyboardEvent\<HTMLDivElement><br/> ) => void | - | |
### CloseArea
示例：
* tag: 标签体
* tail: 关闭按钮
```typescript
export type CloseArea = 'tag' | 'tail';
```
## 无障碍键盘操作指南
| 按键 | 说明 |
| :---- | :----------------------- |
| SPACE | 选择，取消或删除当前标签 |
## 更多示例
```tsx
```
```tsx
```