sitelo UI

O sitelo-ui é uma biblioteca de componentes para o sitelo. Cada componente é uma função que devolve uma cadeia de HTML, por isso encaixa diretamente na página que já estás a escrever — sem compilador, sem runtime, sem hidratação.

Todos os exemplos desta secção são desenhados pela mesma construção que desenha a página à volta deles. O que vês é o que o código por baixo produziu, e segue os temas claro e escuro deste site porque o sitelo-ui lê o mesmo atributo data-theme que a documentação.

Disposição

• centrado

  ContentorUma coluna de página centrada e de largura limitada.
• umdoistrês

  PilhaUma linha ou coluna flex com um token de espaçamento no intervalo.
• 1234

  GrelhaEncaixa tantas colunas quantas couberem, sem media queries.
• ou

  DivisóriaUm traço entre secções, com ou sem etiqueta.
• ProporçãoMantém uma caixa com forma fixa, para nada saltar ao carregar.

• Um cartão

  CartãoUma superfície para conteúdo agrupado, com cabeçalho, corpo e rodapé.

Tipografia

• Cabeçalho

  Legenda

  TipografiaUma escala tipográfica que escolhe o seu próprio elemento.

• Um cabeçalho

  E um parágrafo.

  ProsaEstilizar HTML em bruto vindo de Markdown ou de um CMS.

• Lê a documentação.

  LigaçãoUma âncora estilizada, com os atributos que uma ligação externa precisa.
• Ícones99 símbolos numa grelha, dimensionados e coloridos pelo texto à volta.

Entradas

• GuardarCancelar

  BotãoCinco variantes, cinco cores, três tamanhos.
• UmDois

  Grupo de botõesBotões unidos num só controlo.
• Email

  Campo de textoEtiqueta, controlo, ajuda e erro, ligados entre si.
• TemaClaroEscuro

  SeletorUm select nativo, estilizado a condizer.
• SitemapFeed RSS

  Caixa de seleçãoUm input a sério, estilizado com CSS em vez de substituído.
• grátispro

  Grupo de opçõesUma escolha entre várias, com rádios a partilhar um name.
• PúblicoRascunhos

  InterruptorUma alternância para uma definição que faz efeito de imediato.
• CursorUm input range nativo, estilizado a condizer.
• LigadoDesligado

  Botão de alternânciaUm botão que fica carregado.
• abc

  Grupo de alternânciaUm controlo segmentado, em botões ou em ligações.

Apresentação de dados

• ALGHAT+1

  AvatarUma imagem quando existe, iniciais quando não.
• Entrada12

  EmblemaUma contagem ou um ponto preso a um canto.
• passouestático

  ChipUma tag, um estado, um filtro.
• Passa por aqui

  DicaUma indicação ao passar o rato e ao receber foco, feita só em CSS.

• Página	Tamanho
  /	4,1 kB
  /docs	12,7 kB

  TabelaLinhas e colunas a partir de dados, num contentor com deslocamento.
• • Rotas

    Baseadas em ficheiros

  ListaLinhas com algo de cada lado.

• 

  FiguraUma imagem e a sua legenda, como uma só figura.

Feedback

• Publicado.

  AlertaUma mensagem cujo ícone e papel ARIA seguem a cor.

• Aqui não há nada

  Estado vazioO aspeto de uma lista antes de ter alguma coisa.
• ProgressoUma barra para trabalho conhecido, um indicador para o resto.
• EsqueletoUm marcador com a forma do conteúdo que aí vem.
• Guardado.

  ToastUma mensagem passageira, acrescentada por script.

Navegação

• MigalhasO rasto de antepassados que termina nesta página.
• PaginaçãoPáginas numeradas, com janela, como ligações a sério.
• UmDois

  SeparadoresLigações, uma página por separador — ou painéis que trocam no lugar.
• sitelo

  v2

  Barra da aplicaçãoA marca de um lado, a navegação e as ações do outro.
• Alternador de temaClaro e escuro, sem o clarão à entrada.

Sobreposições

• Abrir modal

  ModalUm diálogo sobre a API de popover — sem script em lado nenhum.
• Abrir painel

  Painel lateralUm painel a partir da berma, com a mesma mecânica de popover.
• Ações ▾

  MenuUm menu pendente sobre details: abrir e fechar vêm de borla.
• Uma pergunta

  AcordeãoSecções recolhíveis, incluindo o modo exclusivo.
• Ver mais

  Escondido até ser pedido.

  RecolhívelUm único «ver mais», sem a moldura do acordeão.

Secções

• Um título

  E uma frase.

  HeroO topo de uma página de entrada: título, frase, ações.
• DocumentaçãoGuia · Componentes

  RodapéColunas de ligações, e uma linha por baixo.

• Páginas

  204

  +8

  EstatísticaUm número que vale a pena olhar, e o que significa.
• 1. 1

     Instalar

  2. 2

     Construir

  PassosUm percurso numerado, com o que está feito marcado como feito.

• 1. v2.7

     Secções

  CronologiaEntradas por ordem, ao longo de uma linha.
• sitelo.dev

  MockupUma captura num navegador, janela, telemóvel ou terminal.

Estilos

• TemasTodas as cores, raios e tipos de letra, a partir de uma chamada.

Configuração

Duas linhas: importa os componentes e põe styles() no head. A página de Componentes na documentação cobre a instalação, os temas, a convenção de chamada e o runtime opcional do cliente, e lista todas as exportações numa só tabela.

O diretório examples/ui do repositório desenha o conjunto todo numa única página.