Mini Widgets

Badges

Badge en React

Muestra estados o marcas breves en tablas, tarjetas y formularios.

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 { ArcWidgetBadge } from '@arcrider/arcwidgets-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() {   return (     &lt;ArcWidgetBadge       data={{         value: t('In Bearbeitung', 'In progress', 'En curso'),         singleColor: '#0f766e',         borderRadius: '6px',         paddingX: '10px',         paddingY: '4px',       }}     /&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 ArcWidgetBadgeData. 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>.
Este widget es un componente de representación y no ofrece callbacks de interacción propios.
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.
value
Valor a mostrar o actualmente en edición.
Tipo: ArcWidgetSlot.
icon
Símbolo opcional o slot de contenido admitido.
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.
iconPosition
Posición del símbolo en relación con la etiqueta.
Tipo: 'left' | 'right' | 0.
iconSize
Tamaño del símbolo.
Tipo: string.
iconColor
Color del símbolo.
Tipo: string.
fontColor
Color de la fuente.
Tipo: string.
fontSize
Tamaño de fuente como valor CSS.
Tipo: string.
fontWeight
Grosor de la fuente.
Tipo: string.
backgroundColor
Color de fondo.
Tipo: string.
borderColor
Color del borde.
Tipo: string.
borderRadius
Redondeo de las esquinas.
Tipo: string.
singleColor
Color base para una representación de estado coordinada.
Tipo: string.
paddingX
Espaciado interno a izquierda y derecha.
Tipo: string.
paddingY
Espaciado interno arriba y abajo.
Tipo: string.
Comportamiento y límites
value admite texto y JSX. Para colores de estado uniformes puedes establecer singleColor o diseñar el fondo y la fuente por separado.
El badge no tiene un callback de clic propio. Usa un botón envolvente si el estado debe ser interactivo.
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 ArcWidgetBadgeData extends ArcWidgetBaseData {
	value?: ArcWidgetSlot;
	icon?: ArcWidgetSlot;
	width?: string;
	height?: string;
	iconPosition?: 'left' | 'right' | 0;
	iconSize?: string;
	iconColor?: string;
	fontColor?: string;
	fontSize?: string;
	fontWeight?: string;
	backgroundColor?: string;
	borderColor?: string;
	borderRadius?: string;
	singleColor?: string;
	paddingX?: string;
	paddingY?: string;
}