Introdução

• Site oficial: https://www.layui.com/
• No site principal, é possível baixar facilmente o Layui
• Layui é um framework frontend clássico e modular, onde a definição de HTML, CSS e JavaScript simples permite a criação de complexos efeitos frontend
• Facilita significativamente o desenvolvimento de páginas web

Configuração do Ambiente

2.1 Download

• O download pode ser realizado diretamente do site oficial

2.2 Importação de Dependências

• Após baixar e extrair o Layui, importe a pasta layui para o seu projeto (na pasta web)
• Em seguida, inclua o Layui na sua página

<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>

• Também é possível utilizar o CDN de terceiros
• UNPKG e CDNJS são CDNs de código aberto e gratuitos, sincronizados em tempo real via NPM/GitHub

<!-- Importando layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.7/dist/css/layui.css">
 
<!-- Importando layui.js -->
<script src="//unpkg.com/layui@2.6.7/dist/layui.js">

Elementos de Página

3.1 Layout

• Sistema de grid responsivo com divisão em 12 colunas

<!--layui-container centraliza com tamanho fixo; layui-fluid ocupa toda a largura-->
<div class="layui-container">
    Layout padrão (para telas desktop médias):
    <div class="layui-row">
        <div class="layui-col-md9 layui-bg-blue">
            Seu conteúdo 9/12
        </div>
        <div class="layui-col-md3 layui-bg-orange">
            Seu conteúdo 3/12
        </div>
    </div>

    Comportamento diferente em dispositivos móveis, tablets e desktops:
    <div class="layui-row">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
            Mobile: 6/12 | Tablet: 6/12 | Desktop: 4/12
        </div>
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
            Mobile: 6/12 | Tablet: 6/12 | Desktop: 4/12
        </div>
        <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
            Mobile: 4/12 | Tablet: 12/12 | Desktop: 4/12
        </div>
        <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
            Mobile: 4/12 | Tablet: 7/12 | Desktop: 8/12
        </div>
        <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
            Mobile: 4/12 | Tablet: 5/12 | Desktop: 4/12
        </div>
    </div>
</div>

3.2 Ícones

• Utilize class="layui-icon" seguido do estilo específico do ícone

A partir da versão 2.3.0, suporte para font-class:
<i class="layui-icon layui-icon-face-heart"></i>  
Você pode definir cores e tamanhos:
<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>  

3.3 Botões

• Utilize class="layui-btn" com o estilo desejado

<button type="button" class="layui-btn">Botão padrão</button>
<a href="http://www.layui.com" class="layui-btn">Botão com link</a>

Estilos disponíveis:
Original: class="layui-btn layui-btn-primary"
Padrão: class="layui-btn"
Versátil: class="layui-btn layui-btn-normal"
Quente: class="layui-btn layui-btn-warm"
Alerta: class="layui-btn layui-btn-danger"
Desabilitado: class="layui-btn layui-btn-disabled"

Com bordas:
Original: class="layui-btn layui-btn-primary layui-border-green"
Versátil: class="layui-btn layui-btn-primary layui-border-blue"
Quente: class="layui-btn layui-btn-primary layui-border-orange"
Alerta: class="layui-btn layui-btn-primary layui-border-red"
Escuro: class="layui-btn layui-btn-primary layui-border-black"

Com bordas arredondadas:
Original: class="layui-btn layui-btn-radius layui-btn-primary"
Padrão: class="layui-btn layui-btn-radius"
Versátil: class="layui-btn layui-btn-radius layui-btn-normal"
Quente: class="layui-btn layui-btn-radius layui-btn-warm"
Alerta: class="layui-btn layui-btn-radius layui-btn-danger"
Desabilitado: class="layui-btn layui-btn-radius layui-btn-disabled"

3.4 Formulários

• Utilize class="layui-form"

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">Campo de texto</label>
    <div class="layui-input-block">
      <input type="text" name="titulo" required  lay-verify="required" placeholder="Digite o título" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">Campo de senha</label>
    <div class="layui-input-inline">
      <input type="password" name="senha" required lay-verify="required" placeholder="Digite a senha" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">Texto auxiliar</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">Caixa de seleção</label>
    <div class="layui-input-block">
      <select name="cidade" lay-verify="required">
        <option value=""></option>
        <option value="0">São Paulo</option>
        <option value="1">Rio de Janeiro</option>
        <option value="2">Belo Horizonte</option>
        <option value="3">Brasília</option>
        <option value="4">Porto Alegre</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">Caixas de seleção múltipla</label>
    <div class="layui-input-block">
      <input type="checkbox" name="interesses[escrita]" title="Escrita">
      <input type="checkbox" name="interesses[leitura]" title="Leitura" checked>
      <input type="checkbox" name="interesses[reflexao]" title="Reflexão">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">Alternar</label>
    <div class="layui-input-block">
      <input type="checkbox" name="alternancia" lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">Botões de rádio</label>
    <div class="layui-input-block">
      <input type="radio" name="genero" value="Masculino" title="Masculino">
      <input type="radio" name="genero" value="Feminino" title="Feminino" checked>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">Área de texto</label>
    <div class="layui-input-block">
      <textarea name="descricao" placeholder="Digite o conteúdo" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formularioExemplo">Enviar</button>
      <button type="reset" class="layui-btn layui-btn-primary">Limpar</button>
    </div>
  </div>
</form>
 
<script>
//Exemplo
layui.use('form', function(){
  var formulario = layui.form;
  
  //Monitorar envio
  formulario.on('submit(formularioExemplo)', function(dados){
    layer.msg(JSON.stringify(dados.field));
    return false;
  });
});
</script> 

3.5 Tabelas de Dados

3.5.1 Tabela Dinâmica

<script src="/layui/layui.js"></script>
<script>
    //É necessário importar o módulo table: layui.use('table',...)
    layui.use('table', function(){
        var tabela = layui.table;

        //Primeira instância, preenchendo dados na tabela
        tabela.render({
            elem: '#tabelaExemplo'
            ,altura: 312
            ,url: '${pageContext.request.contextPath}/demo/tabela/usuario/' //Endpoint de dados
            ,pagina: true //Ativar paginação
            ,colunas: [[ //Cabeçalho
                //Se nenhuma coluna tiver largura definida, elas dividem o espaço restante
                {campo: 'id', titulo: 'ID', largura:80, ordenar: true, fixo: 'esquerda'}
                ,{campo: 'nomeUsuario', titulo: 'Nome', largura:80}
                ,{campo: 'genero', titulo: 'Gênero', largura:80, ordenar: true}
                ,{campo: 'cidade', titulo: 'Cidade', largura:80}
                ,{campo: 'assunto', titulo: 'Assunto', largura: 177}
                ,{campo: 'experiencia', titulo: 'Experiência', largura: 80, ordenar: true}
                ,{campo: 'pontuacao', titulo: 'Pontuação', largura: 80, ordenar: true}
                ,{campo: 'categoria', titulo: 'Categoria', largura: 80}
                ,{campo: 'riqueza', titulo: 'Riqueza', largura: 135, ordenar: true}
            ]]
        });

    });
</script>

• Formato de dados esperado:
• code:0 indica sucesso na consulta, 1 exibirá a mensagme em msg
• count é usado para paginação, indicando o total de rgeistros

{"msg":"nenhum dado",
 "code":0,
 "data":[{"id":1,"nomeUsuario":"João Silva","genero":"Masculino","cidade":"São Paulo","pontuacao":100},
        {"id":2,"nomeUsuario":"Maria Santos","genero":"Feminino","cidade":"Rio de Janeiro","pontuacao":95},
        {"id":3,"nomeUsuario":"Pedro Alves","genero":"Masculino","cidade":"Belo Horizonte","pontuacao":88}],
 "count":100}

3.5.2 Parâmetros de Paginação

• Personalização detalhada da barra de paginação

pagina:{limite:10//Quantidade por página
	 ,limites:[10,20,30,50]//Opções de quantidade por página
	 ,primeiro: 'Primeira'//Texto para primeira página
	 ,ultimo: 'Última'
	 ,anterior: '<em>←</em>'//Conteúdo do botão anterior
	 ,proximo: '<i class="layui-icon layui-icon-next"></i>'
	 ,layout:['anterior','pagina','proximo','total','limite','pular','atualizar']//Layout personalizado
}

3.5.3 Barra de Ferramentas

• Botões na barra de ferramentas superior direita

tabela.render({
            elem: '#tabelaExemplo'
            ,altura: 312
            ,barraFerramentas:true
            ,url: '' //Endpoint de dados
			,pagina: {}
			});

3.5.4 Botões de Ação

• Adicionar botões de ação em cada linha

<script>
    //É necessário importar o módulo table: layui.use('table',...)
    layui.use('table', function(){
        var tabela = layui.table;

        //Primeira instância, preenchendo dados na tabela
        tabela.render({
            elem: '#tabelaExemplo'
            ,altura: 312
            ,barraFerramentas:true
            ,url: '${pageContext.request.contextPath}/dados.jsp' //Endpoint de dados
            ,pagina:true
            ,colunas: [[ //Cabeçalho
                {campo: 'id', titulo: 'ID', largura:80, ordenar: true, fixo: 'esquerda'}
                ,{campo: 'nomeUsuario', titulo: 'Nome', largura:80}
                ,{campo: 'genero', titulo: 'Gênero', largura:80, ordenar: true}
                ,{campo: 'cidade', titulo: 'Cidade', largura:80}               
                ,{campo: 'acao', titulo: 'Ações', barraFerramentas: '#demoBarra', ordenar: true}
            ]]
        });

    });
</script>
<!--Script pode ser colocado em qualquer lugar da página-->
<script type="text/html" id="demoBarra">
    <a class="layui-btn layui-btn-xs" lay-event="editar">Editar</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="excluir">Excluir</a>
</script>

3.5.5 Callback de Botões de Ação

• Eventos de clique nos botões

<script>
    layui.use('table', function(){
        var tabela = layui.table;

        //Primeira instância, preenchendo dados na tabela
        tabela.render({...});
        
        //Nota: tool é o nome do evento da barra de ferramentas, filtroTeste é o valor correspondente a lay-filter
        tabela.on('tool(filtroTeste)', function (obj) {
            var dados = obj.data; //Obtém dados da linha atual
            //Obtém o valor correspondente a lay-event (ou parâmetro event do cabeçalho)
            var evento = obj.event;
            var tr = obj.tr; //Obtém o objeto DOM da linha atual (se existir)
            
            if (evento === 'excluir'){//Excluir
                layer.confirm('Tem certeza que deseja excluir?', function (index) {
                    //Envia solicitação de exclusão para o servidor
                    //Aqui pode ser enviado um AJAX
                    obj.del();//Exclui a estrutura DOM da linha (tr)
                    layer.close(index);
                });
            } else if (evento === 'editar'){//Editar
                //Envia solicitação de atualização para o servidor
                //Sincroniza o valor correspondente no cache
                obj.update({
                    nomeUsuario: 'Ana Costa',
                    cidade: 'Curitiba',
                    genero: 'Feminino',
                    pontuacao: 95
                });
            }
        });
    });
</script>

3.6 Navegação

• Barra de navegação horizontal
• class="layui-nav" para barra horizontal
• class="layui-nav layui-nav-tree" para barra vertical

- <a href="">Novidades</a>
- <a href="">Produtos</a>
- <a href="">Big Data</a>
- [Soluções](javascript:;) <dl class="layui-nav-child">  <dd><a href="">Móvel</a></dd> <dd><a href="">Backend</a></dd> <dd><a href="">E-commerce</a></dd> </dl>
- <a href="">Comunidade</a>

<script>
    //Nota: navegação depende do módulo element, caso contrário não será possível operar funcionalmente
    layui.use('element', function(){
        var elemento = layui.element;

        //…
    });
</script>

3.7 Animações

• Layui oferece suporte a animações

layui-anim é obrigatório, seguido pelas classes de animação diferentes
<div class="layui-anim layui-anim-up"></div>
 
Animação contínua, adicione: layui-anim-loop
<div class="layui-anim layui-anim-up layui-anim-loop"></div>

Módulos Internos

4.1 layer

4.1.1 Métodos de Janela Modal

• Janelas: msg(), alert(), confirm()

layer.mensagem(conteudo, opcoes, fim) - Caixa de mensagem

<script>
    layui.use('layer', function() {
        var layer = layui.layer;

        layer.msg('Tem certeza?', {btn: ['Sim!','Não!'], icone: 1, tempo: 2000, //2 segundos para fechar (padrão é 3)
            sim:function (i) {layer.close(i);layer.msg('Sim!')},
            btn2:function (i) {layer.close(i);layer.msg('Não!')}
        });
    });

</script>

layer.alerta(conteudo, opcoes, sim) - Caixa de informação padrão

<script>
    layui.use('layer', function() {
        var layer = layui.layer;

        //0-6 total de 7 ícones, 0:aviso 1:sucesso 2:erro 3:pergunta 4:cadeado 5:triste 6:feliz
        layer.alert('Alerta azul?',
            {titulo:'Alerta',icone:6},
            function () {layer.msg('Sim!');}
        )
    });

</script>

layer.confirmar(conteudo, opcoes, sim, cancelar) - Caixa de confirmação

<script>
    layui.use('layer', function() {
        var layer = layui.layer;

        layer.confirm('Deseja excluir?',
            {sombra:'false',icone:3,btn:["Sim","Não"]},
            function () {layer.msg('Excluído!');},
            function () {layer.msg('Cancelado!');}
        );
    });

</script>

4.1.2 Propriedades de Janela Modal

• type - Tipo de camada base

Tipo: Número, padrão: 0

O layer oferece 5 tipos de camadas. Valores possíveis: 0 (caixa de informação, padrão) 1 (camada de página) 2 (camada iframe) 3 (camada de carregamento) 4 (camada tips). Se você usar layer.open({type: 1}), type será obrigatório (exceto para caixa de informação)

• title - Título

Tipo: String/Array/Booleano, padrão: 'Informação'

title suporta três tipos de valores. Se você passar uma string simples, como title :'Meu título', apenas o texto do título será alterado. Se você precisar personalizar o estilo da área do título, pode usar title: ['Texto', 'font-size:18px;'], onde o segundo item pode ser qualquer estilo CSS. Se não quiser mostrar a barra de título, use title: false

• content - Conteúdo

Tipo: String/DOM/Array, padrão: ''

content pode aceitar valores flexíveis. Não apenas HTML comum, mas também especificar DOM, e pode variar com type. Por exemplo:

<script>
    layui.use('layer', function() {
        var layer = layui.layer;

        layer.open({
           type:1, //Caixa de mensagem, sem botão de confirmação
           title:['Olá','padding-left:5px'],//Título e estilo
           content:layui.$('#testePrincipal'), //Formato DOM
           offset:'rb',//Pode aparecer no canto inferior direito
           sombra:false //Com ou sem sobreposição
        });
    });
</script>
<div id="testePrincipal" style="display: none; padding: 10px; height: 173px; width: 275px;">
    Olá mundo!
</div>
<script>
    layui.use('layer', function() {
        var layer = layui.layer;

        layer.open({
           type:2, //Carregamento iframe, precisa de uma URL
           content:'${pageContext.request.contextPath}/navegacao.jsp'
        });
    });
</script>

4.2 layDate

• Seletor de data

<form action="" class="layui-form layui-form-pane" method="post">
    <div class="layui-inline"> <!-- Nota: este elemento não é obrigatório -->
        <label class="layui-form-label">Data de nascimento</label>
        <div class="layui-input-block">
            <input readonly type="text" class="layui-input" id="nascimento" name="nascimento" placeholder="Selecione a data de nascimento" autocomplete="off">
        </div>
    </div>
</form>

<script>
    layui.use(['laydate','form'], function(){
        var laydate = layui.laydate;

        //Executa uma instância laydate
        laydate.render({
            elem: '#nascimento', //Elemento específico
            formato: 'yyyy-MM-dd',
            valor: '2020-12-12', //Valor padrão
            //valor: new Date() //Valor padrão
        });
    });
</script>

4.3 upload

• Botão de upload

<form action="" class="layui-form layui-form-pane" method="post">
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn">Enviar</button>
            <button type="button" class="layui-btn" id="uploadTeste">
                <i class="layui-icon">&#xe67c;</i>Enviar imagem
            </button>
        </div>
    </div>
</form>

<script>
    layui.use(['upload','form','layer'], function(){
        var layer = layui.layer;
        var upload = layui.upload;

        //Executa uma instância de upload
        var uploadInst = upload.render({
            elem: '#uploadTeste', //Elemento específico
            url: '/dados.jsp', //Endpoint de upload
            //aceitar: 'arquivo', //arquivo representa todos os tipos, padrão é images para imagens
            tamanho: 100, //Tamanho máximo do arquivo: 100KB
            concluido: function (res) {
                //Callback de conclusão
                layer.msg('Upload concluído');
            },
            erro: function () {
                //Callback de erro
                layer.msg('Erro no upload')
            }
        });
    });
</script>

4.4 carousel

• Carrossel de imagens

<div class="layui-carousel" id="carrosselTeste">
    <div carousel-item style="text-align: center; line-height: 280px">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
        <div>Item 5</div>
    </div>
</div>
<!-- O item pode conter qualquer conteúdo, como: ![]() -->

<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //Criar instância
        carousel.render({
            elem: '#carrosselTeste'
            ,largura: '100%' //Define a largura do container
            ,seta: 'sempre' //Sempre mostrar setas
            //,animacao: 'cima-baixo' //Efeito de transição
        });
    });
</script>