- Utilizzo
- Props
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
/>
);
};
| Props | Tipo | Descrizione |
|---|---|---|
| collegaAEntità | string | Il link all’entità |
| entityId | stringa | L’identificatore unico per l’entità |
| nome | stringa | Il nome dell’entità |
| pictureUrl | stringa | immagine”, |
| avatarType | Tipo di Avatar | Il tipo di avatar che vuoi visualizzare. Ha due opzioni: rounded e squared |
| variante | EntityChipVariant enumerazione | Variante del chip dell’entità che vuoi visualizzare. Ha due opzioni: regolare e trasparente |
| IconaSinistra | IconaComponente | Un componente React che rappresenta un’icona. Visualizzato sul lato sinistro del chip |
Esempi
Chip Trasparente Disabilitato
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 Disabilitato con 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 Entità
Un elemento simile a un chip per visualizzare informazioni su un’entità.- Utilizzo
- Props
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>
);
};
| Props | Tipo | Descrizione |
|---|---|---|
| collegaAEntità | stringa | Il link all’entità |
| entityId | string | L’identificatore unico per l’entità |
| nome | stringa | Il nome dell’entità |
| pictureUrl | stringa | immagine”, |
| avatarType | Tipo di Avatar | Il tipo di avatar che vuoi visualizzare. Ha due opzioni: rounded e squared |
| variante | EntityChipVariant enumerazione | Variante del chip dell’entità che vuoi visualizzare. Ha due opzioni: regular e transparent |
| IconaSinistra | IconaComponente | Un componente React che rappresenta un’icona. Visualizzato sul lato sinistro del chip |