markdown_gnome.md

Nombre Componente

Descripción del componente/librería. Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

Guía de uso

<bzg-demo [color]="'red'">
  <p>Contenido</p>
</bzg-demo>

Inputs

Atributo	Tipo	Default	Two-Way Data Binding	Descripción
color	string	string	👍	red, yellow, blue, orange
active	boolean	false	👍	Mostrar/Ocultar componente
header	string	true		Titulo de cabecera

Outputs

Nombre	Retorno	Descripción
colorChange	string	red, yellow, blue
activeChange	boolean	Mostrar/Ocultar componente
select	{ state: boolean }	Cambio de estado de selección

Nota: Marcar los segmentos de codigo con comilla de acento grave cuando se refiere a tipos de objetos e interfaces, ej: number.

Compatibilidad

• Transclusion
• Slots: level-header, level-footer

Dependencias

• Angular CDK (>=v7.2.0)

Ejemplos

Ejemplo 1

<bzg-demo [active]="true"
          [header]="'Titulo personalizado'"
          [(color)]="'orange'"
          (select)="handler($event)">
  <p>Contenido demo</p>
</bzg-demo>

Ejemplo 2: Vanilla

var demo = document.querySelector('bzg-demo');
demo.setAttribute('header', 'Titulo personalizado')
demo.setAttribute('active', true);
demo.setAttribute('color', 'orange')

demo.addEventListener('select', (data: { state: boolean }) => {
    console.log('Component data select:', data.state);
});

demo.addEventListener('color', (data: string) => {
    console.log('Component color changed:', data);
});

Componentes asociados

• bzg-button: Boton de cierre de componente
• bzg-icon: Iconos check