Chip

Ein visuelles Element, das Sie als klickbaren oder nicht klickbaren Container mit einem Etikett, optionalen linken und rechten Komponenten und verschiedenen Stiloptionen verwenden können, um Etiketten und Tags anzuzeigen.

"Verwendung"
"Eigenschaften"

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	Typ	Beschreibung
linkToEntity	Zeichenkette	Der Link zur Entität
entityId	Zeichenkette	Der eindeutige Identifikator für die Entität
name	string	Der Name der Entität
pictureUrl	Zeichenkette	s Bild”,
avatarType	Avatar-Typ	Der Typ des Avatars, den Sie anzeigen möchten. Hat zwei Optionen: `abgerundet` und `quadratisch`
Variante	`EntityChipVariante` enum	Variante des Entity-Chips, die Sie anzeigen möchten. Hat zwei Optionen: `regelmäßig` und `transparent`
LeftIcon	Icon-Komponente	Eine React-Komponente, die ein Symbol darstellt. Wird auf der linken Seite des Chips angezeigt

Beispiele

Transparenter deaktivierter Chip

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
      />    
  );
};

Entity-Chip

Ein Chip-ähnliches Element, um Informationen über eine Entität anzuzeigen.

Verwendung
Eigenschaften

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	Typ	Beschreibung
linkToEntity	string	Der Link zur Entität
entityId	string	Der eindeutige Identifikator für die Entität
name	string	Der Name der Entität
pictureUrl	Zeichenfolge	s Bild”,
avatarType	Avatar-Typ	Der Typ des Avatars, den Sie anzeigen möchten. Hat zwei Optionen: `abgerundet` und `quadratisch`
Variante	`EntityChipVariante` enum	Variante des Entity-Chips, die Sie anzeigen möchten. Hat zwei Optionen: `regelmäßig` und `transparent`
LeftIcon	Icon-Komponente	Eine React-Komponente, die ein Symbol darstellt. Wird auf der linken Seite des Chips angezeigt

Welcome

Core Concepts

Beispiele

Transparenter deaktivierter Chip

Deaktivierter Chip mit Tooltip

Entity-Chip

​Beispiele

​Transparenter deaktivierter Chip

​Deaktivierter Chip mit Tooltip

​Entity-Chip

Beispiele

Transparenter deaktivierter Chip

Deaktivierter Chip mit Tooltip

Entity-Chip