Lightbox

A diretiva Lightbox deve ser usada para criar modais exclusivamente de visualização.

Ativando#

<a href="#" uglLightbox>Open</a>

Atributos aceitos na tag#

AtributoInput/OutputTipoObrigatórioValores padrões
uglLightbox-Sim-
filesUrl@InputString[]1-
action@OutputFunctionNão-
actionIcon@InputStringSim se tiver action-
closeOut@InputBooleanNãofalse
Atributo [filesUrl]

O atributo [filesUrl] deve ser preenchido com um array de string contendo as urls das imagens ou pdfs que serão renderizados. É eceito imagens com as extensões png, jpg, jpeg, bmp e arquivos em pdf. Se adicionado apenas 1 item, não será renderizado a navegação. Para que a mesma seja renderizada, é necessário o array possuir mais 2 ou mais elementos.

Atributo (action)

Deve ser passado uma função ao atributo (action). Quando o atributo for declarado, um botão será gerado na parte inferior da lightbox. Ao clicar no botão, a função do action será executada e a modal será fechada. O atributo recebe por padrão o numero do item ativo no momento.

Atributo [actionIcon]

O atributo [actionIcon] recebe o nome de um ícone do Material e, quando houver ícone, ele será renderizado no botão.

Atributo [closeOut]

Quando atribuído como TRUE, permite fechar o lightbox clicando fora dele.

Atalhos#

O Lighbox possui um atalho de teclado implementado.

TeclaFunção
ESCFecha o lightbox

Implementando#

<a href="#"
uglLightbox
[filesUrl]="['https://i.pinimg.com/originals/15/ba/b4/15bab4ee6c41dae1c5cbe3af0d9b6ef2.jpg', 'https://blog.saipos.com/wp-content/uploads/2018/11/2-Onde-achar-o-n%C3%BAmero-do-cupom-fiscal-SAIPOS-Sistema-para-Restaurantes.png']"
(action)="lightboxAction($event)"
[actionIcon]="'delete_outline'"
[closeOut]="true">Open</a>
<a href="#"
uglLightbox
[filesUrl]="['https://i.pinimg.com/originals/15/ba/b4/15bab4ee6c41dae1c5cbe3af0d9b6ef2.jpg']"
(action)="lightboxAction($event)"
[actionIcon]="'delete_outline'"
[closeOut]="true">Open</a>
lightboxAction($event: string) {
console.log('Position', $event);
return false;
}