PASSI DS · 1.1.0 · piloto

Componentes em código

Botão, Link, Campo de texto, Checkbox e Alerta como web components. Passe o mouse, clique e use só o teclado (Tab, Enter, Espaço) para ver os cinco estados. Troque o modo de cor:

Claro Escuro Alto contraste claro Alto contraste escuro Seguir o sistema

Botão

Atributos: tipo (primario, secundario, contorno, fantasma, perigo), tamanho (p, m, g), icone-esquerda, icone-direita, desabilitado, tipo-html.

Tipos

Salvar alterações Baixar arquivo Ver capítulos Cancelar Excluir capítulo

Tamanhos e ícones

Criar pasta Baixar PDF Continuar

Desabilitado

Publicar Publicar Publicar Publicar Excluir

Para publicar, preencha o título do capítulo.

Atributos: href, tipo (marca, neutro), tamanho (m, p), seta, nova-aba, desabilitado.

Ler o primeiro capítulo Ver todos os componentes Abrir o arquivo no Figma Ler o sumário Capítulo 12 (em breve)

No meio de um texto, use o tipo Neutro: o livro tem um capítulo sobre governança de design system que vale a leitura.

Campo de texto

Atributos: rotulo, ajuda, erro, sucesso, valor, exemplo, tamanho (m, g), tipo (texto, email, senha, telefone, numero, busca, url), icone-esquerda, nome, autocomplete, obrigatorio, opcional, desabilitado.

Checkbox

Atributos: rotulo (ou o conteúdo), descricao, marcado, indeterminado, erro, nome, valor, obrigatorio, desabilitado.

Capítulos que você quer receber
Li e aceito os termos de uso

Alerta

Atributos: tipo (informacao, sucesso, atencao, erro), titulo, acao, acao-href, pode-fechar, anunciar. A descrição vai no conteúdo. Eventos: passi-acao e passi-fechar.

Baixe a versão 1.1 para ter os componentes de gráficos. Elas já aparecem para toda a equipe. Renove para não perder o acesso aos arquivos. Confira sua conexão com a internet e tente de novo.

Em uso: entrar

Os cinco componentes juntos num formulário de verdade. Envie em branco para ver os erros e o resumo no topo.

Entrar

Esqueci minha senha Entrar