Introduction

Widgets y mini-widgets

Widgets y mini-widgets en React

El paquete de React incluye ocho widgets premium para interfaces más grandes y 14 mini-widgets para entrada de datos, presentación y layout. Ambos grupos se importan del mismo paquete.

Widgets premium

Table, Kanban, tres vistas de calendario, Drawing, Upload y Slideshow cubren listas, planificación, dibujos, carga de archivos y presentación. Para el uso productivo se aplican las condiciones de la licencia de proyecto.

Mini-widgets

Button, Badge, Input, Select, Signature, Icon, Text, Progress Bar, Layout, Numpad, Slider, Steps, KPI Bar y DevTools son piezas más pequeñas. Puedes usarlos de forma independiente o en los slots de contenido de widgets más grandes.

Combinar widgets

import {
  ArcWidgetBadge,
  ArcWidgetButton,
  ArcWidgetLayout,
  ArcWidgetText,
} from '@arcrider/arcwidgets-react';
import { useState } from 'react';
const lang = document.documentElement.lang.startsWith('en')   ? 'en'   : document.documentElement.lang.startsWith('es')     ? 'es'     : 'de'; const requested = new URLSearchParams(location.search).get('data'); const pack = requested === 'empty' || requested === 'busy' ? requested : 'demo'; const t = (de: string, en: string, es: string) =>   lang === 'en' ? en : lang === 'es' ? es : de;
export default function Example() {   const [count, setCount] = useState(pack === 'busy' ? 12 : 0);   const badges =     pack === 'empty'       ? []       : [           { value: t('Offen', 'Open', 'Abierto'), color: '#d97706' },           { value: t('Live', 'Live', 'En vivo'), color: '#15803d' },           ...(pack === 'busy'             ? [                 {                   value: t('Priorität', 'Priority', 'Prioridad'),                   color: '#be123c',                 },                 { value: t('Messe', 'Fair', 'Feria'), color: '#7c3aed' },               ]             : []),         ];   return (     &lt;ArcWidgetLayout       id=&quot;layout&quot;       data={{         embedded: false,         height: '240px',         direction: 'vertical',         gap: '12px',         blocks: [           {             height: 'auto',             value: (               &lt;ArcWidgetText                 data={{                   value: ${t('Klicks', 'Clicks', 'Clics')}: ${count},                   fontSize: '20px',                 }}               /&gt;             ),           },           ...(badges.length             ? [                 {                   height: 'auto' as const,                   value: (                     &lt;ArcWidgetLayout                       data={{                         embedded: true,                         direction: 'horizontal',                         gap: '8px',                         height: 'auto',                         blocks: badges.map((badge) =&gt; ({                           width: 'auto',                           height: 'auto',                           value: (                             &lt;ArcWidgetBadge                               data={{                                 value: badge.value,                                 singleColor: badge.color,                                 borderRadius: '6px',                                 paddingX: '10px',                                 paddingY: '4px',                               }}                             /&gt;                           ),                         })),                       }}                     /&gt;                   ),                 },               ]             : []),           {             height: 'fraction',             value: (               &lt;ArcWidgetButton                 data={{                   title: t('Weiter', 'Continue', 'Continuar'),                   width: '160px',                   backgroundColor: '#18181b',                   fontColor: '#ffffff',                 }}                 onClick={() =&gt; setCount((value) =&gt; value + 1)}               /&gt;             ),           },         ],       }}     /&gt;   ); }</code></pre>
En React, los slots compatibles se pueden rellenar directamente con JSX. Así los callbacks de componentes anidados permanecen en tu state. El Slideshow es una excepción: sus slides usan actualmente contenido de tipo string.
<a href="/docs/react/intro/react-components">Resumen de componentes con todas las referencias</a> · <a href="/docs/react/patterns/nested-widget-descriptors">JSX y descriptores</a> · <a href="/docs/react/faq/react-paket-und-lizenzierung">Licenciamiento</a>.