Saltar a contenido

4.11 Card

Componente de tarjeta, elemento que actúa como contenedor de información, presentando una estructura basada en una plantilla que incluye etiqueta, título, subtítulo, descripción e imagen, lo que proporciona una representación visualmente atractiva de datos.

Este componente es flexible y se puede extender para adaptarse a diversas necesidades de presentación.

Permite la creación de interfaces de usuario atractivas y fácilmente comprensibles al organizar la información de manera visualmente efectiva dentro de tarjetas extensibles y personalizables.

Atributo Valor por defecto Tipo Descripción
Comunes id null String Identificador único del componente. Si no tiene id, se le asigna con nomenclatura ${tag}${num}.
render true Boolean o JEXLExpression Expresión EL para evaluar si el componente debe mostrarse.
onBeforeRender null String Método JS a ejecutar antes de que el componente actual sea renderizado.
onAfterRender null String Método JS que se ejecutará una vez renderizado el componente actual.
action null String Identificador de la acción a realizar cuando el usuario interactúa con este componente.
allowsPartialRestore false Boolean Si el estado del componente actual debe restaurarse cuando el usuario vuelva a la vista.
label null String Etiqueta que se mostrará de cabecera.
template null String Plantilla. Posibles valores: card_template_1.
title null String Título de la tarjeta.
subtitle null String Subtítulo de la tarjeta.
description null String Descripción de la tarjeta.
image null String o JEXLExpression Imagen asociada a la tarjeta.
imagenPosition null String Posición de la imagen con respecto al texto dentro de la tarjeta: Bottom, top, right, left.
expanded true Boolean Indica si está expandido.
expandable true Boolean Indica si se puede expandir. 
<main name="Card" id="formCard" repo="pruebaRepo">
    <edit>
        <form>
            <card label="Label 1" template="card_template_1" title="Card 1" subtitle="Subtitle card 1" image="${'batman.jpg'}" imagePosition="left">
              <p name="description" value="Description 1"/>
             </card>
            <card label="Label 2" template="card_template_1" imagePosition="bottom">
              <p name="title" value="Card 2"/>
              <p name="subtitle" value="Subtitle card 2"/>
              <p name="description" value="Description 2"/>
              <image label="Imagen 1: " value="${'batman.jpg'}" readonly="true"/>
            </card>
            <card label="Label 3" template="card_template_1" title="Card 3" subtitle="Subtitle card 3" expandable="true" expanded="true" imagePosition="right">
              <p name="description" value="Description 3"/>
             </card>
            <card label="Label 4" template="card_template_1" title="Card 4" subtitle="Subtitle card 4" expandable="true" expanded="false">
              <p name="description" value="Description 4"/>
            </card>
        </form>
    </edit>
    <list name="Card">
    </list>
</main>

img.png