Showcase
<plz-showcase> | PlzShowcase
El componente showcase sirve para mostrar tanto elementos html renderizados, como código html para hacerlo posible.
Este componente showcase se utiliza con dos sub-componentes showcase-render y showcase-code. Se podrá hacer uso del showcase con los dos sub-componentes o haciendo uso de uno solo, esto dependerá de las necesidades del usuario.
Ejemplos
Distintos usos
Se podrá hacer uso de atributos para configurar la vista del componente renderizado plz-showcase-render
A continuación se ve un ejemplo del uso de los dos sub-componentes dentro del componente padre showcase:
Componente tarjeta
Se han añadido atributos para hacer aún más personalizable el componente.
Componente Separador
Se han añadido atributos para hacer posible aumentar el grosor del separador si se desea.
Componente Heroe
Se ha añadido una variante en la que se divide el contenido en dos columnas.
Ahora veremos un ejemplo haciendo uso de solo el sub-componente plz-showcase-render.
Cabe recalcar que el sub-componente plz-showcase-render dispone de la opción de hacer resize para poder ver los cambios en las estructuras de los elementos que se ubican en su interior.
Componente tarjeta
Se han añadido atributos para hacer aún más personalizable el componente.
Componente Separador
Se han añadido atributos para hacer posible aumentar el grosor del separador si se desea.
Componente Heroe
Se ha añadido una variante en la que se divide el contenido en dos columnas.
Por último verermos un ejemplo del componente showcase haciendo uso de solo el sub-componente plz-showcase-code.
Recalcar que para este componente se han utilizado dos librerias,
Atributos showcase-code
Nombre | Descripción | Posibilidades | Por defecto |
---|---|---|---|
text-code | Texto html a representar | 'string' | |
text-size | Tamaño de letra para el text html | Number(px) | '18' |
Atributos showcase-render
Nombre | Descripción | Posibilidades | Por defecto |
---|---|---|---|
display | Elección del display del contenido a renderizar | 'block' - 'inline-flex' | 'inline-flex' |
gap | Distancia entre componentes renderizados | Number(px) | '10' |
Posición en el contenedor verticalmente | 'center' - 'stretch' - 'start' - 'end' | 'center' | |
height | Altura del contenedor de renderizado | Number(px) | |
padding-top | Relleno superior del componente render | Number(px) | '10' |
padding-bottom | Relleno inferior del componente render | Number(px) | '10' |
padding-left | Relleno a la izquierda del componente render | Number(px) | '10' |
padding-right | Relleno a la derecha del componente render | Number(px) | '10' |