Estilos Responsivos

Documentação da StylesLib

Documentação para usar a StylesLib, uma biblioteca JS para implementar a interface responsiva V2 para aplicativos web, montando o menu, a tela inicial e o painel lateral.

• Introdução
• O objeto app
• Inicialização
  • Atributo info
  • Atributo tabs
  • Método init
  • Exemplo
• Mudança de telas
  • Atributo curTab
  • Método onchangetabs
  • Método changeTabs
  • Exemplo
• Painel lateral
  • Método menu
  • Exemplo
• Manipular o DOM (EM CONSTRUÇÂO)

Introdução

Antes de adentrarmos na StylesLib, cabe notar o que é possível fazer e o que não é.

Você pode	Você não pode
Criar um esqueleto HTML de acordo com a folha V2 customizado	Customizar todos os aspectos da interface, incluindo o formato dos botões e a posição da barra de navegação
Preparar um handler para lidar com mudança de telas	Definir todas as telas e seus conteúdos de uma só vez
Solicitar uma mudança de telas programaticamente, que não quebra o fluxo já preparado caso tenha sido disparado por um botão de navegação	Mudar as telas com base na URL sem nenhum código adicional

Por fim, é importante notar que a StylesLib depende da DOMLib e não funcionará se ela não estiver incluída na página.

Você pode entender esta dependência como recomendação para migrar sua manipulação DOM para a DOMLib, pois isso vai facilitar muito ao construir para os estilos responsivos.

Agora, vamos à utilização em si da biblioteca.

O objeto app

Esta é a interface com a qual você irá interagir para criar o template HTML inicial na tela, assim como lidar com a mudança entre as telas (tanto pelos botões de navegação quanto solicitar a mudança programaticamente).

Ele possui atributos e métodos, alguns dos quais você pode usar para criar a sua interface. Mais especificamente:

Atributo ou método	Pode sobrescrever	Descrição	Ver seção
info	Sim	informações do app (nome e logotipo)	Inicialização
tabs	Sim	telas disponíveis no app (aparecem na barra de navegação)	Inicialização
curTab	Não	tela atual	Mudança de telas
onchangetabs()	Sim	define um handler que é chamado ao mudar de tela	Mudança de telas
init(div, mainDiv)	Não	inicializa a interface e constrói o HTML	Inicialização
changeTab(tab)	Não	muda a tela	Mudança de telas
menu()	Não	mostra ou oculta o painel lateral	Painel lateral

Inicialização

A inicialização deve ser feita preferencialmente no handler do evento de load da página, ou em alguma função chamada a partir desse handler.

Para inicializar a StylesLib e construir o template HTML inicial, você primeiro deve fornecer os atributos info e tabs. Em seguida, use o método init.

Atributo info

Deve ser um dicionário com chaves name e logo, indicando o nome do aplicativo (mostrado no topo) e o logotipo (mostrado ao lado do nome). Note que a StylesLib não altera o title ou favicon da página.

Atributo tabs

O atributo tabs serve para indicar as páginas disponíveis, gerando os botões correspondentes e também é usado ao alternar entre telas. Aqui, você terá dois comportamentos:

Comportamento 1	Comportamento 2
Um dos seletores de navegação é main e abre o conteúdo principal. Os demais abrem o painel lateral.	Qualquer seletor abre o painel lateral e limpa o conteúdo principal. Quando o usuário seleciona algo no painel lateral (uma conversa, por exemplo), alterna para o conteúdo principal e exibe o que foi selecionado.

Para o Comportamento 2, temos o elemento menu, que permite abrir o painel lateral e, em computadores, fechar o painel lateral.

Note que este elemento não faz sentido caso você tenha o Comportamento 1, pois o botão main faz esse papel.

A escolha dos comportamentos depende basicamente da existência de uma "tela" chamada main. O tabs é um dicionário cuja chave é o nome interno (main, por exemplo) e o valor um dicionário de nome e imagem visíveis ao usuário.

Método init

Este método recebe os elementos HTML necessários para construir a interface. Mais especificamente, dois elementos: div e mainDiv.

O elemento div é aquele onde a interface será construída. Normalmente será document.body, mas lembre-se que esse elemento será limpo (innerHTML = '').

O elemento mainDiv será colocado no conteúdo principal. A rigor, pode ser um DIV vazio (o importante é que não tenha um id igual aos nomes internos das telas, mainImage ou mainTitle, que são reservados).

Exemplo

Comportamento 1: com elemento main

onload = function() { app.info = {name: "cube Timer", logo: ""} app.tabs = { 'main': {name: 'Timer', image: 'Timer'}, 'Stats': {name: 'Stats', image: 'Stats'}, 'Config': {name: 'Config', image: 'Configuracoes'}, 'Competir': {name: 'Competir', image: 'Competir'}, 'Sessao': {name: 'Sessão', image: 'Sessao'}, } app.onchangetabs = function() {console.log(app.curTab)}; // veremos mais a frente app.init(document.body, document.getElementById); }

Comportamento 2: sem elemento main

onload = function() { app.info = {name: "cube Timer", logo: ""} app.tabs = { 'Timer': {name: 'Timer', image: 'Timer'}, 'Stats': {name: 'Stats', image: 'Stats'}, 'Config': {name: 'Config', image: 'Configuracoes'}, 'Competir': {name: 'Competir', image: 'Competir'}, 'Sessao': {name: 'Sessão', image: 'Sessao'}, } app.onchangetabs = function() {console.log(app.curTab)}; // veremos mais a frente app.init(document.body); }

Mudança de telas

A mudança de telas e o controle da tela atual são essenciais em aplicativos. A StylesLib fornece métodos para mudar a tela e receber eventos na mudança, além de manter o controle da tela atual e mudar a navegação de acordo.

Atributo curTab

Este atributo contém o nome interno da tela atual. Não altere-o programaticamente, pois isso vai quebrar o controle de navegação e o evento de mudança de telas.

Método onchangetabs

Este método será chamado ao mudar a tela. Você pode saber a tela atual pelo atributo curTab. Note que você precisa sobrescrevê-lo para poder construir a tela para o usuário. Este evento é disparado sempre que o aplicativo inicia (com a primeira tela disponível ou a tela main) e sempre que a tela muda (seja pelo método changeTabs ou pelos botões de navegação)

Uma boa prática é definir este método junto da Inicialização, como mostrado no exemplo na seção anterior.

Exemplo:

app.onchangetabs = function() { console.log(app.curTab); if (app.curTab == 'Timer') { console.log('Você está na tela Timer'); // construir tela Timer } else if (app.curTab == ...) { ... } }

Método changeTabs

Chame este método para mudar de tela, usando o nome interno da tela. Note que você deve sempre construir a tela no método onchangetabs, pois o usuário também pode solicitar a mudança. Somente em casos específicos (por exemplos, abrir a tela e focar/preencher uma determinada seção) você deve fazer alguma manipulação na interface.

Este método também mostra o painel lateral se ele tiver sido ocultado (veja a seção seguinte).

Exemplo

O exemplo na seção anterior cobre o método onchangetabs.

app.changeTab('main'); // vai para a tela main (o que oculta o painel lateral) caso use o comportamento 1 app.changeTab('Timer'); // vai para a tela Timer (mostrando o painel lateral) console.log(app.curTab); // mostra qual a tela atual

Painel lateral

O painel lateral em computadores fica na lateral, sendo mostrado junto ao painel principal. Se conveniente, o usuário pode ocultá-lo para ter mais espaço em tela.

Porém em celulares, ele precisa ocupar a tela inteira para ser visível, sendo assim, o painel principal e o alternador do painel lateral são ocultados. Com isso, o usuário fica preso no painel lateral uma vez aberto!

Para evitar isso, recomendamos que toda ação que modifique o contúdo principal (ou seja, que o usuário queira ver) oculte o painel lateral. Muitas vezes essa ação será iniciada pelos botões inseridos no painel lateral por você.

Método menu

Quando chamado, alterna o painel lateral (oculta ou mostra). Você pode verificar o estado atual pela classe no body.

Exemplo

meuBotao.onclick = function() { // meuBotao esta no painel lateral // mostrar algo no conteúdo principal app.menu(); }

Mais exemplos de uso

É possível encontrar exemplos de uso e trechos de código usando a StylesLib no template.

Links

© 2025 Família STEM