Mini Widgets

Text

Text en React

Muestra texto o contenidos de React con tipografía y alineación uniformes.

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 { ArcWidgetText } 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;ArcWidgetText       data={{         value: t(           'Eine längere Beschreibung für die Aufgabenübersicht',           'A longer description for the task overview',           'Una descripción más larga para el resumen de tareas',         ),         width: '260px',         fontSize: '16px',         fontColor: '#374151',         truncate: true,       }}     /&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 ArcWidgetTextData. 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.
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.
alignX
Alineación horizontal.
Tipo: 'left' | 'right' | 'center' | string.
alignY
Alineación vertical.
Tipo: 'top' | 'bottom' | 'center' | string.
fontSize
Tamaño de fuente como valor CSS.
Tipo: string.
fontWeight
Grosor de la fuente.
Tipo: string | number.
fontColor
Color de la fuente.
Tipo: string.
lineHeight
Altura de línea.
Tipo: string.
textAlign
Alineación del texto.
Tipo: 'left' | 'right' | 'center' | 'justify' | string.
textWrap
Comportamiento de salto de línea.
Tipo: string.
textScroll
Comportamiento de scroll para el texto.
Tipo: boolean | string.
textDirection
Dirección de escritura.
Tipo: 'horizontal' | 'vertical' | string.
textDecoration
Decoración del texto.
Tipo: ArcWidgetTextDecoration.
truncate
Recorta el texto demasiado largo cuando el ancho es limitado.
Tipo: boolean.
Comportamiento y límites
value admite JSX. Es posible el rich text de fuente propia; para contenidos externos, un elemento de texto de React es la opción segura.
truncate recorta textos largos. Un ancho limitado es requisito para ello.
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 ArcWidgetTextDecoration {
	type?: string;
	style?: string;
	color?: string;
	thickness?: string;
}
export interface ArcWidgetTextData extends ArcWidgetBaseData { 	value?: ArcWidgetSlot; 	width?: string; 	height?: string; 	alignX?: 'left' | 'right' | 'center' | string; 	alignY?: 'top' | 'bottom' | 'center' | string; 	fontSize?: string; 	fontWeight?: string | number; 	fontColor?: string; 	lineHeight?: string; 	textAlign?: 'left' | 'right' | 'center' | 'justify' | string; 	textWrap?: string; 	textScroll?: boolean | string; 	textDirection?: 'horizontal' | 'vertical' | string; 	textDecoration?: ArcWidgetTextDecoration; 	truncate?: boolean; }</code></pre>