Componentes

Resumen

Los componentes combinan primitivas en preajustes de diseño recurrentes y bloques de construcción de aplicaciones reutilizables. Al igual que las primitivas, reciben datos y callbacks de tu aplicación. Use la importación de la familia correspondiente que se muestra a continuación. La entrada agregada twenty-ui/components también sigue estando disponible. El editor de código tiene su propio punto de entrada, twenty-ui/components/code-editor, porque requiere Monaco. Consulta Primeros pasos para la instalación y la configuración del tema.

Entrada

Importe desde twenty-ui/components/input.

Component	Propósito
MainButton	Acciones destacadas con una superficie sólida, elevación y texto en seminegrita.
LightButton	Acciones ligeras con énfasis estándar o sutil.
IconButton	Acciones de icono cuadradas o redondas basadas en Button.
LightIconButton	Acciones de icono ligeras con énfasis estándar o sutil.
ReactionButton	Reacciones con emojis con un recuento y un estado de pulsación controlado.
PhoneCountryPicker	Banderas de países con búsqueda y selección de código de llamada.
Selector numérico	Entrada numérica compacta con botones de incremento opcionales.
SearchInput	Texto de búsqueda y controles de filtro opcionales.
CountrySelect	Opciones de país con búsqueda, banderas y una selección vacía explícita.
CurrencyPicker	Opciones de moneda con búsqueda y formato explícito.
ImageInput	Selección y vista previa de imágenes con cargas propiedad de quien realiza la llamada.
Control segmentado	Opción de radio compacta con opciones de texto o iconos agrupados.

Navegación

Importe desde twenty-ui/components/navigation.

Component	Propósito
ListItemButton	Botones de acción nativos con estilo de fila de lista.
Dropdown	Menús de acciones, selectores con búsqueda y paneles de formulario.
TabButton	Enlaces de rutas y acciones adyacentes con la misma apariencia que las pestañas.

Visualización de datos

Importe desde twenty-ui/components/data-display.

Component	Propósito
DetailsRow	Etiquetas alineadas, valores con ajuste de línea y acciones opcionales.
MetricRow	Etiquetas y valores formateados con progreso determinado opcional.
AvatarGroup	Avatares superpuestos y recuentos de desbordamiento.
CommandBlock	Texto de comando con una acción de copia opcional.
JsonTree	Valores JSON expandibles y entradas con nombre.
StackIcon	Iconos con un elemento más pequeño apilado en la esquina inferior derecha.
TintedIconTile	Iconos en mosaicos con colores del tema.

Retroalimentación

Importe desde twenty-ui/components/feedback.

Component	Propósito
Toast	Notificaciones, gestión de colas y descarte.
Callout	Mensajes semánticos con acciones y opción de descartar.
InlineBanner	Banners compactos con acciones opcionales.
ToastProvider y Toaster	Almacenes de notificaciones, límites de cola y renderizado.

Diseño

Importe desde twenty-ui/components/layout.

Component	Propósito
Section	Contenido relacionado con un encabezado, una descripción y una acción opcional.
AnimatedIconCrossfade	Transiciones de iconos controladas por el estado.
OverflowingList	Ajuste los elementos visibles y recopile el desbordamiento.

Configuración

Importe desde twenty-ui/components/settings.

Component	Propósito
SettingsRow	Interruptores etiquetados para configuraciones y filtros.

Editor de Código

Importe desde twenty-ui/components/code-editor.

Component	Propósito
CodeEditor	Edición de código con Monaco, un encabezado opcional y el tema Twenty.

El enrutamiento, el formato de registros, los marcadores de posición de productos y el estado de la aplicación pertenecen a la aplicación anfitriona. Los componentes compartidos exponen props de datos, devolución de llamada y renderizado para esas integraciones.

Desarrolladores

Aplicaciones

API

Autoalojamiento

Contribuir

Biblioteca de IU

Resumen

Entrada

Navegación

Visualización de datos

Retroalimentación

Diseño

Configuración

Editor de Código

​Resumen

​Entrada

​Navegación

​Visualización de datos

​Retroalimentación

​Diseño

​Configuración

​Editor de Código

Resumen

Entrada

Navegación

Visualización de datos

Retroalimentación

Diseño

Configuración

Editor de Código