Ejemplo:
<sede:component fragment="/fragmentos/componentes/card-horizontal" title="Titulo" btn="true" btnText="Ver información" btnType="info" btnIcon="fas fa-info-circle fa-fw" btnIconPosition="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</sede:component>
El contenido dentro de las etiquetas <sede:component> se verá reflejado como el contenido de la tarjeta
| Atributo | Descripción | Valor por defecto |
|---|---|---|
| Configuración tarjeta | ||
| clase | Clase HTML - Controlador general del contenedor | 'col-xs-12 col-sm-4 col-md-3 margin-b1em' |
| title | String - Valor del titulo de nuestra tarjeta | ' ' |
| description | HTML / String - Descripción de la tarjeta, toma la misma función que el contenido escrito por dentro de <sede:component> pero este puede recibir variables de thymeleaf como atributo | ' ' |
| cardLink | URL - Enlace al que dirigirá la tarjeta. Si es declarada los botones se desactivan y toda la tarjeta se convierte en un elemento ancla | '#' |
| cardColor | #hex / Color - Color que tomará la tarjeta | ' ' |
| textColor | #hex / Color - Color que tomará el texto de la tarjeta | ' ' |
| border | Boolean - Definir si la tarjeta lleva borde | 'true' |
| cardBodySize | Number - configurar la proporcion del texto respecto a la imagen. Utiliza el sistema de columnas de bootstrap por lo que acepta valores del 1 al 12 | '8' |
| Configuración imagen | ||
| imgsrc | URL - URL de la imagen | '/cont/vistas/fragmentos/componentes/default.jpg' |
| imgalt | String - Texto alternativo de la tarjeta | ' ' |
| imgClass | Clase HTML - Controlador de la imagen | ' ' |
| imgFit | cover / contain - Definir la forma en la que la imagen encajará en el contenedor | 'cover' |
| imgSide | left / right - Definir de que lado irá la imagen | 'left' |
| aspectRatio | Number/Number - Definir la Relación de aspecto que mantendrá la imagen | '1/1' |
| hideImg | Boolean - Definir si la imagen debe ocultarse | 'false' |
| Configuracion botón | ||
| btn | Boolean - Determinar si la tarjeta lleva un botón enlace | 'false' |
| btnLink | URL - Determinar el enlace a donde debe dirigir | '#' |
| btnText | String - Configuración del texto del botón | 'Ver más' |
| btnType | Clase Bootstrap - Definir el tipo de botón de la tarjeta | 'primary' |
| btnSize | xs / sm / lg - Definir el tamaño del botón | ' ' |
| btnInvert | Boolean - Invertir los colores del botón | 'false' |
| btnIcon | Clase Fontawesome - Icono el botón | ' ' |
| btnIconPosition | left / right - Lado del botón donde se posicionará el icono | ' ' |
Es posible colocar mas de un botón, para ello se debe pasar la infomación de los mismos en json
<sede:component
fragment="/fragmentos/componentes/card-horizontal"
title="Tarjeta 1"
description="Descripción 1
"
json="{'buttons':
[
{
'name': 'Quiero saber más',
'invert': 'true'
},
{
'name': 'Solicitar',
'type': 'primary'
}
]
}">
</sede:component>
| Atributo | Descripción | Valor por defecto |
|---|---|---|
| name | String - Texto que llevará el botón | ' ' |
| link | URL - Determinar el enlace a donde debe dirigir | ' ' |
| type | Clase Bootstrap - Definir el tipo de botón de la tarjeta | ' ' |
| size | xs / sm / lg - Definir el tamaño del botón | ' ' |
| invert | Boolean - Invertir los colores del botón | ' ' |
| icon | Clase Fontawesome - Icono el botónn | ' ' |
| iconPosition | left / right - Lado del botón donde se posicionará el icono | ' ' |