- Utilizare
- Proprietăți
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
/>
);
};
| Proprietăți | Tip | Descriere |
|---|---|---|
| linkToEntity | șir | Legătura către entitate |
| entitateId | șir | Identificatorul unic pentru entitate |
| nume | șir | Numele entității |
| pictureUrl | șir | imagine a lui s |
| tipAvatar | Tip Avatar | Tipul de avatar pe care doriți să îl afișați. Are două opțiuni: rounded și squared |
| variant | Enumul EntityChipVariant | Varianta chip-ului entității pe care dorești să o afișezi. Are două opțiuni: regulat și transparent |
| IconaStânga | ComponentaIcoana | O componentă React care reprezintă o icona. Afișată pe partea stângă a fișei |
Exemple
Chip transparent dezactivat
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
/>
);
};
Chip dezactivat cu tooltip
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
/>
);
};
Chip de entitate
Un element de tip Chip pentru a afișa informații despre o entitate.- Utilizare
- Proprietăți
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>
);
};
| Proprietăți | Tip | Descriere |
|---|---|---|
| linkToEntity | șir | Legătura către entitate |
| entitateId | șir | Identificatorul unic pentru entitate |
| nume | șir | Numele entității |
| pictureUrl | șir | imagine a lui s |
| tipAvatar | Tip Avatar | Tipul de avatar pe care doriți să îl afișați. Are două opțiuni: rounded și squared |
| variant | Enumul EntityChipVariant | Varianta chip-ului entității pe care dorești să o afișezi. Are două opțiuni: regulat și transparent |
| IconaStânga | ComponentaIcoana | O componentă React care reprezintă o icona. Afișată pe partea stângă a fișei |