- **用法**
- 属性
import { Chip } from 'twenty-ui/components';
export const MyComponent = () => {
return (
<Chip
size="large"
label="Clickable Chip"
clickable={true}
variant="highlighted"
accent="text-primary"
leftComponent
rightComponent
maxWidth="200px"
className
/>
);
};
| 属性 | 类型 | 描述 |
|---|---|---|
| linkToEntity | 字符串 | 指向实体的链接 |
| entityId | string | 实体的唯一标识符 |
| 名称 | 字符串 | 实体名称 |
| pictureUrl | string | 的图片”, |
| avatarType | 头像类型 | 您要显示的头像类型。 有两个选项：圆形和方形 |
| variant | EntityChipVariant枚举 | 您要显示的实体芯片的变体。 有两个选项：普通和透明 |
| LeftIcon | IconComponent | 一个代表图标的React组件。 显示在芯片的左侧 |
示例
透明禁用芯片
import { Chip } from 'twenty-ui/components';
export const MyComponent = () => {
return (
<Chip
size="large"
label="Transparent Disabled Chip"
clickable={false}
variant="rounded"
accent="text-secondary"
leftComponent
rightComponent
maxWidth="200px"
className
/>
);
};
带工具提示的禁用芯片
import { Chip } from "twenty-ui/components";
export const MyComponent = () => {
return (
<Chip
size="large"
label="Disabled chip that triggers a tooltip when overflowing."
clickable={false}
variant="regular"
accent="text-primary"
leftComponent
rightComponent
maxWidth="200px"
className
/>
);
};
实体芯片
类似芯片的元素，用于显示有关实体的信息。- 用法
- 属性
import { BrowserRouter as Router } from 'react-router-dom';
import { IconTwentyStar } from 'twenty-ui/display';
import { Chip } from 'twenty-ui/components';
export const MyComponent = () => {
return (
<Router>
<Chip
linkToEntity="/entity-link"
entityId="entityTest"
name="Entity name"
pictureUrl=""
avatarType="rounded"
variant="regular"
LeftIcon={IconTwentyStar}
/>
</Router>
);
};
| 属性 | 类型 | 描述 |
|---|---|---|
| linkToEntity | string | 指向实体的链接 |
| entityId | string | 实体的唯一标识符 |
| 名称 | string | 实体名称 |
| pictureUrl | string | 的图片”, |
| avatarType | 头像类型 | 您要显示的头像类型。 有两个选项：圆形和方形 |
| variant | EntityChipVariant枚举 | 您要显示的实体芯片的变体。 有两个选项：普通和透明 |
| LeftIcon | IconComponent | 一个代表图标的React组件。 显示在芯片的左侧 |