- 사용법
- 프로퍼티
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 | 문자열 | 엔티티의 고유 식별자 |
| 이름 | 문자열 | 엔티티의 이름 |
| pictureUrl | 문자열 | 사진”, |
| avatarType | 아바타 유형 | 표시할 아바타의 유형입니다. 두 가지 옵션이 있습니다: rounded와 squared |
| 변형 | EntityChipVariant 열거형 | 표시할 엔티티 칩의 변형입니다. 두 가지 옵션이 있습니다: 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 | 문자열 | 엔티티에 대한 링크 |
| entityId | 문자열 | 엔티티의 고유 식별자 |
| 이름 | 문자열 | 엔티티의 이름 |
| pictureUrl | 문자열 | 사진”, |
| avatarType | 아바타 유형 | 표시할 아바타의 유형입니다. 두 가지 옵션이 있습니다: rounded와 squared |
| 변형 | EntityChipVariant 열거형 | 표시할 엔티티 칩의 변형입니다. 두 가지 옵션이 있습니다: regular와 transparent |
| 왼쪽 아이콘 | 아이콘 컴포넌트 | 아이콘을 나타내는 React 컴포넌트입니다. 칩의 왼쪽에 표시됩니다. |