- 使用方法
- プロパティ
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 | string | エンティティへのリンク |
| entityId | string | エンティティの一意識別子 |
| 名前 | string | エンティティの名前 |
| pictureUrl | string | 写真”, |
| avatarType | アバタータイプ | 表示したいアバターのタイプ。 オプションは2つ：rounded と squared |
| バリアント | EntityChipVariant 列挙型 | 表示したいエンティティチップのバリアント。 オプションは2つ：regular と transparent |
| 左アイコン | アイコンコンポーネント | アイコンを表す 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 | アバタータイプ | 表示したいアバターのタイプ。 オプションは2つ：rounded と squared |
| バリアント | EntityChipVariant 列挙型 | 表示したいエンティティチップのバリアント。 オプションは2つ：regular と transparent |
| 左アイコン | アイコンコンポーネント | アイコンを表す React コンポーネント。 チップの左側に表示されます |