Mini Widgets

Progress Bar

ProgressBar en React

Representa un valor parcial en relación con un valor total, por ejemplo tareas completadas u objetivos alcanzados.

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 { ArcWidgetProgressBar } 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) =&gt;   lang === 'en' ? en : lang === 'es' ? es : de;
export default function Example() {   return (     &lt;ArcWidgetProgressBar       data={{         valueProgress: 3,         valueTotal: 8,         valueText: t('3 von 8', '3 of 8', '3 de 8'),         width: '280px',         height: '8px',         progressColor: '#0f766e',       }}     /&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 ArcWidgetProgressBarData. 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 presentació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.
valueProgress
Valor parcial actual.
Tipo: number | string.
valueTotal
Valor total; debe ser mayor que cero.
Tipo: number | string.
valueText
Etiqueta propia del progreso.
Tipo: string.
progressColor
Color de la zona de progreso rellena.
Tipo: string.
backgroundColor
Color de fondo.
Tipo: string.
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.
fontColor
Color de fuente.
Tipo: string.
fontSize
Tamaño de fuente como valor CSS.
Tipo: string.
Comportamiento y límites
valueProgress y valueTotal forman la proporción. Usa un valor total mayor que cero.
valueText es una etiqueta propia. El cálculo y formateo de los valores de negocio se realiza en React.
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 ArcWidgetProgressBarData extends ArcWidgetBaseData {
	valueProgress?: number | string;
	valueTotal?: number | string;
	valueText?: string;
	progressColor?: string;
	backgroundColor?: string;
	width?: string;
	height?: string;
	borderRadius?: string;
	fontColor?: string;
	fontSize?: string;
}