- Kullanım
- Özellikler
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
/>
);
};
| Özellikler | Tür | Açıklama |
|---|---|---|
| linkToEntity | dize | Varlığın bağlantısı |
| entityId | dize | Varlık için benzersiz tanımlayıcı |
| i̇sim | dize | Varlığın adı |
| resimUrl | dize | s resim”,“ |
| avatarTürü | Avatar Türü | Göstermek istediğiniz avatarın türü. İki seçenek var: yuvarlak ve kare |
| varyant | EntityChipVariant numaralandırma | Göstermek istediğiniz varlık çipinin varyantı. İki seçenek var: düzenli ve şeffaf |
| Sol Simge | IconComponent | Bir simgeyi temsil eden bir React bileşeni. Çipin sol tarafında görüntülenir |
Örnekler
Şeffaf Devre Dışı Çip
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
/>
);
};
Araç İpucuyla Devre Dışı Çip
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
/>
);
};
Varlık Çipi
Bir varlık hakkında bilgi göstermek için bir Çip benzeri öğe.- Kullanım
- Özellikler
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>
);
};
| Özellikler | Tür | Açıklama |
|---|---|---|
| linkToEntity | dize | Varlığın bağlantısı |
| entityId | dize | Varlık için benzersiz tanımlayıcı |
| i̇sim | dize | Varlığın adı |
| resimUrl | dize | s resim”,“ |
| avatarTürü | Avatar Türü | Göstermek istediğiniz avatarın türü. İki seçenek var: yuvarlak ve kare |
| varyant | EntityChipVariant numaralandırma | Göstermek istediğiniz varlık çipinin varyantı. İki seçenek var: düzenli ve şeffaf |
| Sol Simge | IconComponent | Bir simgeyi temsil eden bir React bileşeni. Çipin sol tarafında görüntülenir |