Mini Widgets

Button

Button en React

Dispara una acción y muestra un estado de carga durante un proceso asíncrono.

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 { ArcWidgetButton } from '@arcrider/arcwidgets-react';
import { useState } from 'react';
const lang = document.documentElement.lang.startsWith('en')   ? 'en'   : document.documentElement.lang.startsWith('es')     ? 'es'     : 'de'; const t = (de: string, en: string, es: string) =>   lang === 'en' ? en : lang === 'es' ? es : de;
export default function Example() {   const [status, setStatus] = useState(t('Bereit', 'Ready', 'Listo'));   return (     &lt;&gt;       &lt;ArcWidgetButton         id=&quot;save&quot;         data={{           title: t('Speichern', 'Save', 'Guardar'),           width: '160px',           backgroundColor: '#18181b',           fontColor: '#ffffff',           loading: {             show: true,             minDuration: 300,           },         }}         onClick={async () =&gt; {           setStatus(t('Speichert …', 'Saving …', 'Guardando …'));           try {             localStorage.setItem('arc-demo-save', new Date().toISOString());             setStatus(               t('Lokal gespeichert', 'Saved locally', 'Guardado en local'),             );           } catch {             setStatus(               t('Speichern fehlgeschlagen', 'Save failed', 'Error al guardar'),             );           }         }}       /&gt;       &lt;p aria-live=&quot;polite&quot;&gt;{status}&lt;/p&gt;     &lt;/&gt;   ); }</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 ArcWidgetButtonData. 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?: () => void | Promise<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.
title
Etiqueta; como slot también es posible con JSX.
Tipo: ArcWidgetSlot.
subtitle
Etiqueta adicional.
Tipo: ArcWidgetSlot.
icon
Símbolo opcional o slot de contenido admitido.
Tipo: ArcWidgetSlot.
prefix
Contenido antes de la etiqueta.
Tipo: ArcWidgetSlot.
suffix
Contenido después de la etiqueta o unidad.
Tipo: ArcWidgetSlot.
width
Ancho del widget como valor de tamaño.
Tipo: string.
height
Alto del widget, p. ej. "320px". Los valores en porcentaje necesitan un contenedor padre con altura fija.
Tipo: string.
borderRadius
Redondeo de las esquinas.
Tipo: string.
backgroundColor
Color de fondo.
Tipo: string.
fontColor
Color de la fuente.
Tipo: string.
fontSize
Tamaño de fuente como valor CSS.
Tipo: string.
showBadge
Muestra la marca adicional.
Tipo: boolean.
badgeTitle
Contenido de la marca.
Tipo: ArcWidgetSlot.
badgeColor
Color de fuente de la marca.
Tipo: string.
badgeBackground
Fondo de la marca.
Tipo: string.
loading
Estado de carga durante un callback de tipo promesa, activado con show: true.
Tipo: ArcWidgetButtonLoading.
Comportamiento y límites
onClick puede devolver una promesa. Con loading.show: true, el estado de carga permanece activo hasta el final de este proceso.
Captura los errores de guardado en tu callback y muéstralos en tu propio estado. Un indicador de carga no sustituye un mensaje de éxito o error.
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 ArcWidgetButtonLoading {
	show?: boolean;
	indicator?: {
		type?: 'dots' | 'spinner' | 'pulse' | string;
		color?: string;
		width?: string;
		height?: string;
		[key: string]: unknown;
	};
	hideOnFinish?: boolean;
	minDuration?: number;
	position?: string;
	hideTitle?: boolean;
	hideIcon?: boolean;
	hide?: {
		icon?: boolean | 'auto';
		title?: boolean | 'auto';
		subtitle?: boolean | 'auto';
		badge?: boolean | 'auto';
		prefix?: boolean | 'auto';
		suffix?: boolean | 'auto';
		[key: string]: unknown;
	};
	overlay?: unknown;
	styles?: ArcWidgetStyles | string | 'hover' | 'default';
	[key: string]: unknown;
}
export interface ArcWidgetButtonData extends Omit&lt;ArcWidgetBaseData, 'actions'&gt; { 	title?: ArcWidgetSlot; 	subtitle?: ArcWidgetSlot; 	icon?: ArcWidgetSlot; 	prefix?: ArcWidgetSlot; 	suffix?: ArcWidgetSlot; 	width?: string; 	height?: string; 	borderRadius?: string; 	backgroundColor?: string; 	fontColor?: string; 	fontSize?: string; 	showBadge?: boolean; 	badgeTitle?: ArcWidgetSlot; 	badgeColor?: string; 	badgeBackground?: string; 	loading?: ArcWidgetButtonLoading; }
export interface ArcWidgetButtonProps extends ArcReactWidgetProps&lt;ArcWidgetButtonData&gt; { 	onClick?: () =&gt; void | Promise&lt;void&gt;; }</code></pre>