palaze-web Palaze web Docs Github Empezando Componentes Button Card Colors Divider Footer Header Hero Menu Menu-dropdown Menu-item Section Showcase Sidebar Spinner Tooltip Design System Colores Tipografia Formas

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(atributos)

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,highlight.jspara interpretar el texto con código html que pasaremos por el atributo text-code y la libreríaprettierpara dar estilo y formatear el código html.

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'
vertical-align 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'