Premium Widgets
Custom Slideshow
Slideshow en React
Muestra texto o HTML propio como secuencia de diapositivas. Adecuado para galerías de imágenes sencillas o avisos cambiantes.
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 { ArcWidgetSlideshow } 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 demoItems = [ { value: <h2>01 · ${t('Entdecken', 'Discover', 'Descubrir')}</h2><p>${t('Anforderungen und Ziele sammeln.', 'Collect requirements and goals.', 'Reúne requisitos y objetivos.')}</p>, backgroundColor: '#ecfdf5', }, { value: <h2>02 · ${t('Gestalten', 'Design', 'Diseñar')}</h2><p>${t('Ansichten mit Widgets zusammensetzen.', 'Compose views with widgets.', 'Monta vistas con widgets.')}</p>, backgroundColor: '#fffbeb', }, { value: <h2>03 · ${t('Verbinden', 'Connect', 'Conectar')}</h2><p>${t('State und Callbacks an eure API hängen.', 'Wire state and callbacks to your API.', 'Conecta estado y callbacks a tu API.')}</p>, backgroundColor: '#f5f3ff', }, ];
const busyItems = [ ...demoItems, { value: <h2>04 · ${t('Ausliefern', 'Ship', 'Publicar')}</h2><p>${t('Lizenz setzen und live gehen.', 'Set the license and go live.', 'Activa la licencia y publica.')}</p>, backgroundColor: '#fff1f2', }, ];
const items = pack === 'empty' ? [] : pack === 'busy' ? busyItems : demoItems;
export default function Example() { const [index, setIndex] = useState(0); return ( <> <ArcWidgetSlideshow data={{ height: '240px', width: '100%', items, loop: true, autoplay: { enabled: false }, controls: { enabled: true }, indicators: { enabled: true }, }} onSlideChange={(payload) => setIndex(payload.index)} /> <p aria-live="polite"> {t('Folie', 'Slide', 'Diapositiva')} {items.length ? index + 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 ArcWidgetSlideshowData. 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>.
onSlideChange
Índice de base cero de la diapositiva activa.
onSlideChange?: (payload: { index: 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.
items
Entradas de la selección o de la representación; consulta el tipo de datos correspondiente.
Tipo: ArcWidgetSlideshowItem[].
width
Ancho del widget como valor de tamaño.
Tipo: string.
height
Altura del widget, p. ej. "320px". Los valores porcentuales necesitan un contenedor padre con altura definida.
Tipo: string.
backgroundColor
Color de fondo.
Tipo: string.
borderRadius
Redondeo de las esquinas.
Tipo: string.
borderWidth
Grosor del borde.
Tipo: string.
borderColor
Color del borde.
Tipo: string.
direction
Disposición horizontal o vertical.
Tipo: 'horizontal' | 'vertical' | string.
loop
Volver a la primera diapositiva tras la última.
Tipo: boolean.
autoplay
Cambio automático con enabled y speed en milisegundos.
Tipo: { enabled?: boolean; speed?: number; [key: string]: unknown }.
pause
Interrupción de la reproducción automática al interactuar.
Tipo: { hover?: boolean; focus?: boolean; [key: string]: unknown }.
transition
Animación, duración y retardo en milisegundos.
Tipo: { duration?: number; delay?: number; transition?: string; [key: string]: unknown }.
indicators
Visibilidad y representación de los indicadores de diapositiva.
Tipo: { enabled?: boolean; type?: string; position?: string; [key: string]: unknown }.
controls
Configuración de la navegación.
Tipo: { enabled?: boolean; [key: string]: unknown }.
scroll
Cambio mediante scroll.
Tipo: { enabled?: boolean; speed?: number; [key: string]: unknown }.
Comportamiento y límites
items[].value admite actualmente strings, incluyendo HTML propio. JSX y los descriptores de widget anidados no se renderizan en este componente.
autoplay.speed y transition.duration se indican en milisegundos. onSlideChange entrega un index de base cero.
- El ejemplo de galería usa imágenes SVG generadas por sí mismo. El HTML con contenido dinámico externo debe sanearse antes de pasarlo.
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 ArcWidgetSlideshowItem {
value: string;
label?: string;
width?: string;
height?: string;
backgroundColor?: string;
[key: string]: unknown;
}
export interface ArcWidgetSlideshowData extends ArcWidgetBaseData { items: ArcWidgetSlideshowItem[]; width?: string; height?: string; backgroundColor?: string; borderRadius?: string; borderWidth?: string; borderColor?: string; direction?: 'horizontal' | 'vertical' | string; loop?: boolean; autoplay?: { enabled?: boolean; speed?: number; [key: string]: unknown }; pause?: { hover?: boolean; focus?: boolean; [key: string]: unknown }; transition?: { duration?: number; delay?: number; transition?: string; [key: string]: unknown }; indicators?: { enabled?: boolean; type?: string; position?: string; [key: string]: unknown }; controls?: { enabled?: boolean; [key: string]: unknown }; scroll?: { enabled?: boolean; speed?: number; [key: string]: unknown }; }
export interface ArcWidgetSlideshowProps extends ArcReactWidgetProps<ArcWidgetSlideshowData> { onSlideChange?: (payload: { index: number }) => void; }</code></pre>