Elemento del menú

Un elemento de menú versátil diseñado para ser utilizado en un menú o lista de navegación.

Uso
Props

import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItem } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  const handleButtonClick = (event) => {
    console.log("Icon button clicked!", event);
  };

  return (
    <MenuItem
      LeftIcon={IconBell}
      accent="default"
      text="Menu item text"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={true}
      testId="menu-item-1"
      onClick={handleMenuItemClick}
      className
    />
  );
};

Props	Tipo	Descripción
IconoIzquierdo	”ComponenteIcono”	Un icono izquierdo opcional que se muestra antes del texto en el elemento de menú
acento	cadena	Especifica el color de acento del elemento de menú. Las opciones incluyen: `default`, `danger`, y `placeholder`
texto	cadena	El contenido de texto del elemento de menú
iconButtons	array	Una matriz de objetos que representan botones de icono adicionales asociados con el elemento del menú
isToolTipOpen	booleano	Controla la visibilidad del tooltip asociado con el elemento del menú
testId	cadena	El atributo data-testid para propósitos de prueba
alHacerClic	función	Función de retorno que se activará cuando se haga clic en el elemento del menú
nombreDeClase	cadena	Nombre opcional para el estilo adicional

Variantes

Las diferentes variantes del componente de elemento de menú incluyen las siguientes:

Comando

Un elemento de menú estilo comando en un menú para indicar atajos de teclado.

Uso
Props

import { IconBell } from "@tabler/icons-react";
import { MenuItemCommand } from "twenty-ui/display";

export const MyComponent = () => {
  const handleCommandClick = () => {
    console.log("Command clicked!");
  };

  return (
    <MenuItemCommand
      LeftIcon={IconBell}
      text="First Option"
      firstHotKey="⌘"
      secondHotKey="1"
      isSelected={true}
      onClick={handleCommandClick}
      className
    />
  );
};

Props	Tipo	Descripción
IconoIzquierdo	IconComponent	Un icono izquierdo opcional que se muestra antes del texto en el elemento del menú
texto	”cadena”	El contenido de texto del elemento del menú
firstHotKey	cadena	El primer atajo de teclado asociado con el comando
secondHotKey	cadena	El segundo atajo de teclado asociado con el comando
isSelected	booleano	Indica si el elemento del menú está seleccionado o resaltado
alHacerClic	función	Función de retorno que se activará cuando se haga clic en el elemento del menú
nombreDeClase	cadena	Nombre opcional para estilo adicional

Draggable

Un componente de elemento de menú arrastrable diseñado para ser utilizado en un menú o lista donde los elementos se pueden arrastrar y se pueden realizar acciones adicionales a través de botones de iconos.

Uso
Propiedades

import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItemDraggable } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  return (
    <MenuItemDraggable
      LeftIcon={IconBell}
      accent="default"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={false}
      onClick={handleMenuItemClick}
      text="Menu item draggable"
      isDragDisabled={false}
      className
    />
  );
};

Propiedades	Tipo	Descripción
IconoIzquierdo	IconComponent	Un icono izquierdo opcional que se muestra antes del texto en el elemento del menú
accent	cadena	El color de acento del elemento del menú. Puede ser `default`, `placeholder` y `danger`
iconButtons	matriz	Una matriz de objetos que representan botones de icono adicionales asociados con el elemento del menú
isTooltipOpen	booleano	Controla la visibilidad del tooltip asociado con el elemento del menú
alHacerClic	función	Función de devolución de llamada para activar cuando se haga clic en el enlace
texto	cadena	El contenido de texto del elemento del menú
isDragDisabled	booleano	Indica si el arrastre está desactivado
nombreDeClase	cadena	Nombre opcional para estilo adicional

Multi Selección

Proporciona una manera para implementar la funcionalidad de selección múltiple con una casilla de verificación asociada.

Uso
Props

import { IconBell } from "@tabler/icons-react";
import { MenuItemMultiSelect } from "twenty-ui/display";

export const MyComponent = () => {

  return (
    <MenuItemMultiSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={false}
      className
    />
  );
};

Props	Tipo	Descripción
LeftIcon	IconComponent	Un icono opcional a la izquierda mostrado antes del texto en el elemento del menú
texto	cadena	El contenido de texto del elemento del menú
selected	booleano	Indica si el elemento del menú está seleccionado (marcado)
onSelectChange	función	Función de devolución de llamada activada cuando el estado de la casilla de verificación cambia
nombreDeClase	cadena	Nombre opcional para estilo adicional

Multi Selección con Avatar

Un elemento de menú de selección múltiple con un avatar, una casilla para selección y contenido textual.

Uso
Propiedades

import { MenuItemMultiSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=";

  return (
    <MenuItemMultiSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={false}
      className
    />
  );
};

Propiedades	Tipo	Descripción
avatar	`ReactNode`	El avatar o icono que se mostrará en el lado izquierdo del elemento del menú
texto	cadena	El contenido de texto del elemento del menú
selected	booleano	Indica si el elemento del menú está seleccionado (marcado)
onSelectChange	función	Función de devolución de llamada activada cuando el estado de la casilla de verificación cambia
nombreDeClase	cadena	Nombre opcional para estilo adicional

Navegar

Un elemento de menú que presenta un icono opcional a la izquierda, contenido textual y un icono de chevron a la derecha.

Uso
Propiedades

import { IconBell } from "@tabler/icons-react";
import { MenuItemNavigate } from "twenty-ui/display";

export const MyComponent = () => {
  const handleNavigation = () => {
    console.log("Navigate to another page");
  };

  return (
    <MenuItemNavigate
      LeftIcon={IconBell}
      text="First Option"
      onClick={handleNavigation}
      className
    />
  );
};

Propiedades	Tipo	Descripción
LeftIcon	IconComponent	Un icono opcional a la izquierda mostrado antes del texto en el elemento del menú
texto	cadena	El contenido de texto del elemento del menú
enClic	función	Función de devolución de llamada para ser activada cuando se haga clic en el elemento del menú
nombreDeClase	cadena	Nombre opcional para estilo adicional

Seleccionar

Un elemento de menú seleccionable, que presenta contenido opcional a la izquierda (icono y texto) y un indicador (icono de verificación) para el estado seleccionado.

Uso
Propiedades

import { IconBell } from "@tabler/icons-react";
import { MenuItemSelect } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      onClick={handleSelection}
      className
    />
  );
};

Propiedades	Tipo	Descripción
LeftIcon	IconComponent	Un icono opcional a la izquierda mostrado antes del texto en el elemento del menú
texto	cadena	El contenido de texto del elemento del menú
selected	booleano	Indica si el elemento del menú está seleccionado (marcado)
disabled	booleano	Indica si el elemento del menú está desactivado
hovered	booleano	Indica si el elemento del menú está actualmente siendo sobrevolado
enClic	función	Función de devolución de llamada para ser activada cuando se haga clic en el elemento del menú
nombreDeClase	cadena	Nombre opcional para estilo adicional

Seleccionar avatar

Un elemento de menú seleccionable con un avatar, que presenta contenido opcional a la izquierda (avatar y texto) y un indicador (icono de verificación) para el estado seleccionado.

Uso
Propiedades

import { MenuItemSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=";

  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      testId="menu-item-test"
      onClick={handleSelection}
      className
    />
  );
};

Propiedades	Tipo	Descripción
avatar	`ReactNode`	El avatar o icono que se mostrará en el lado izquierdo del elemento del menú
texto	cadena	El contenido de texto del elemento del menú
seleccionado	booleano	Indica si el elemento del menú está seleccionado (marcado)
deshabilitado	booleano	Indica si el elemento del menú está deshabilitado
hovered	booleano	Indica si el elemento del menú está actualmente siendo sobrevolado
idPrueba	cadena	El atributo data-testid para propósitos de prueba
enClic	función	Función de retorno que se activará cuando se haga clic en el elemento del menú
nombreDeClase	cadena	Nombre opcional para estilo adicional

Seleccionar Color

Un elemento de menú seleccionable con una muestra de color para situaciones donde se desea que los usuarios elijan un color del menú.

Uso
Propiedades

import { MenuItemSelectColor } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectColor
      color="green"
      selected={true}
      disabled={false}
      hovered={true}
      variant="default"
      onClick={handleSelection}
      className
    />
  );
};

Propiedades	Tipo	Descripción
color	cadena	El color del tema que se mostrará como muestra en el elemento del menú. Las opciones incluyen: `verde`, `turquesa`, `cielo`, `azul`, `púrpura`, `rosa`, `rojo`, `naranja`, `amarillo`, `gris`
seleccionado	booleano	Indica si el elemento del menú está seleccionado (marcado)
deshabilitado	booleano	Indica si el elemento del menú está deshabilitado
hovered	booleano	Indica si el elemento del menú está actualmente siendo sobrevolado
variante	cadena	La variante de la muestra de color. Puede ser `default` o `pipeline`
enClic	función	Función de retorno que se activará cuando se haga clic en el elemento del menú
nombreDeClase	cadena	Nombre opcional para estilo adicional

Conmutar

Un elemento de menú con un interruptor de palanca asociado para permitir a los usuarios habilitar o deshabilitar una característica específica

Uso
Propiedades

import { IconBell } from '@tabler/icons-react';

import { MenuItemToggle } from 'twenty-ui/display';

export const MyComponent = () => {

  return (
    <MenuItemToggle
      LeftIcon={IconBell}
      text="First Option"
      toggled={true}
      toggleSize="small"
      className
    />
  );
};

Propiedades	Tipo	Descripción
IconoIzquierdo	ComponenteIcono	Un icono izquierdo opcional que se muestra antes del texto en el elemento del menú
texto	cadena	El contenido de texto del elemento del menú
conmutado	booleano	Indica si el interruptor de palanca está en el estado “encendido” o “apagado”
cambioConmutado	función	Función de retorno que se activa cuando el estado del interruptor de palanca cambia
tamañoConmutado	cadena	El tamaño del interruptor de palanca. Puede ser \
nombreDeClase	cadena	Nombre opcional para estilo adicional

Welcome

Core Concepts

Variantes

Comando

Draggable

Multi Selección

Multi Selección con Avatar

Navegar

Seleccionar

Seleccionar avatar

Seleccionar Color

Conmutar

​Variantes

​Comando

​Draggable

​Multi Selección

​Multi Selección con Avatar

​Navegar

​Seleccionar

​Seleccionar avatar

​Seleccionar Color

​Conmutar

Variantes

Comando

Draggable

Multi Selección

Multi Selección con Avatar

Navegar

Seleccionar

Seleccionar avatar

Seleccionar Color

Conmutar