Ejemplo:
<sede:component fragment="/fragmentos/componentes/card" title="Titulo" btn="true" btnType="info">
<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 | ' ' |
| titleHeader | Clase CSS - Para modificar los estilos del header. Es posible colocar las clases de encabezados brindadas por bootstrap (h1 a h6) o las clases utilitarias definidas en main-sede.min.css | 'text-xl' |
| 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 | ' ' |
| blind | Boolean - Modo "persiana", se esconde la descripción y se muestra cuando se hace hover a la tarjeta | 'false' |
| blindColor | #hex / Color - Definir el color del modo "persiana" | ' ' |
| 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 | '#' |
| externalLink | Boolean - Si se define cardLink, esta propiedad define si el enlace al clickearse, debe abrirse en una nueva pestaña | 'false' |
| cardColor | #hex / Color - Color que tomará la tarjeta | '#fff' |
| textColor | #hex / Color - Color que tomará el texto de la tarjeta | '#000' |
| border | Boolean - Definir si la tarjeta lleva borde | 'true' |
| minHeight | Number + CSS Units - Definir la altura mínima que debe tener la tarjeta | ' ' |
| abbreviate | Boolean - Definir si la descripción de la tarjeta estará abreviado | 'false' |
| onlyImg | Boolean - definir si la tarjeta debe mostrar únicamente la imagen | 'false' |
| Configuración imagen | ||
| showImg | Boolean - Indicar si se muestra la imagen | 'true' |
| imgsrc | URL - URL de la imagen | '/cont/vistas/fragmentos/componentes/default.jpg' |
| aspectRatio | Number/Number - Relación de aspecto de la imagen de la tarjeta | '4/3' |
| imgalt | String - Texto alternativo de la tarjeta | ' ' |
| imgClass | Clase HTML - Clase que recibirá la imagen | '' |
| imgFit | cover / contain - Forma en la que la imagen encajará en su contendor | 'cover' |
| 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 | 'right' |
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"
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 | ' ' |