Mini Widgets
Custom Steps
Steps en React
Muestra el progreso en un formulario de varios pasos. La navegación y la validación las controlas en React.
Referencia para @arcrider/arcwidgets-react@0.1.0-alpha.5. <a href="/docs/react/intro/setup-react">Instalación</a> · <a href="/docs/react/intro/react-components">Todos los componentes</a>.
Ejemplo completo
import { ArcWidgetSteps } 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;
const demoSteps = [ { title: t('Eingabe', 'Input', 'Entrada'), color: '#d97706' }, { title: t('Prüfung', 'Review', 'Revisión'), color: '#0f766e' }, { title: t('Abschluss', 'Done', 'Cierre'), color: '#15803d' }, ];
const busySteps = [ ...demoSteps.slice(0, 2), { title: t('Freigabe', 'Approval', 'Aprobación'), color: '#7c3aed' }, demoSteps[2], ];
const steps = pack === 'empty' ? [] : pack === 'busy' ? busySteps : demoSteps;
export default function Example() { const [step, setStep] = useState(0); return ( <> <ArcWidgetSteps data={{ settings: { height: '100px', stepWidth: '140px', }, steps: steps.map((item, index) => ({ title: item.title, value: String(index + 1), clickable: true, backgroundColor: index === step ? item.color : '#f4f4f5', fontColor: index === step ? '#ffffff' : '#18181b', })), }} onClick={(_event, index) => setStep(index)} /> <p aria-live="polite"> {t('Schritt', 'Step', 'Paso')} {steps.length ? step + 1 : 0} </p> </> ); }</code></pre>
Props del componente
id
ID opcional y estable de la instancia del widget. Sin especificarlo, React genera un ID.
data
Configuración de tipo ArcWidgetStepsData. Pasa los cambios como objetos nuevos; gestiona los datos de negocio y la selección en el estado de React.
onAction
Fallback opcional (type: string, ...args: unknown[]) => unknown. El callback concreto tiene prioridad. Detalles: <a href="/docs/react/patterns/react-state-events">Estado y eventos</a>.
onClick
Notifica el clic. Ten en cuenta los argumentos específicos del widget más abajo.
onClick?: (event: unknown, stepIndex: number) => void;
Configuración
Los siguientes campos pertenecen a data. Los tamaños se indican como strings, los números y valores de tiempo según su tipo respectivo.
settings
Representación común de las entradas.
Tipo: ArcWidgetStepsSettings.
steps
Pasos con título, estado y clicabilidad opcional.
Tipo: ArcWidgetStepsStep[].
Comportamiento y límites
- Deriva la etiqueta y los colores de cada paso a partir de tu estado; los pasos clicables necesitan
clickable: true.
onClick(event, stepIndex) notifica el paso pulsado. Comprueba las entradas del paso actual antes de cambiar.
Los campos ArcWidgetSlot admitidos permiten elementos JSX individuales, texto o descriptores de widget. Pasa texto externo como texto JSX; los strings HTML se interpretan como HTML. <a href="/docs/react/patterns/nested-widget-descriptors">Combinar contenidos</a>.
Tipos de datos
Estos tipos relacionados con el widget se exportan desde el paquete. También están disponibles tipos comunes como ArcWidgetSlot, ArcWidgetStyles y ArcReactWidgetProps. Las firmas de índice permiten extensiones; no garantizan que el widget evalúe campos arbitrarios.
export interface ArcWidgetStepsSettings {
embedded?: boolean;
height?: string;
colorLabel?: string;
fontSizeLabel?: string;
colorValue?: string;
fontSizeValue?: string;
backgroundColor?: string;
borderColor?: string;
alignX?: 'left' | 'center' | 'right' | string;
stepWidth?: string;
gapY?: string;
stepRadius?: string;
connectionLine?: {
show?: boolean;
height?: string;
};
[key: string]: unknown;
}
export interface ArcWidgetStepsStep { title?: string; value?: string; subtitle?: string; colorLabel?: string; fontSizeLabel?: string; colorValue?: string; fontSizeValue?: string; backgroundColor?: string; width?: string; clickable?: boolean; }
export interface ArcWidgetStepsData extends Omit<ArcWidgetBaseData, 'actions'> { settings?: ArcWidgetStepsSettings; steps?: ArcWidgetStepsStep[]; }
export interface ArcWidgetStepsProps extends ArcReactWidgetProps<ArcWidgetStepsData> { onClick?: (event: unknown, stepIndex: number) => void; }</code></pre>