weightless
1.0.0
Este projeto chegou ao fim de seu desenvolvimento. Sinta -se à vontade para navegar no código.
Componentes da Web de alta qualidade com uma pequena pegada
Muito obrigado por demonstrar interesse neste projeto! Se você quiser nos ajudar a alimentar nosso Octocat, você definitivamente deve se tornar um Stargazer. Esses componentes da Web são construídos para serem usados. Eles são leves, têm uma API simples e são fáceis de estender e compor. Vá aqui para ver uma demonstração https://weightless.dev/Elements.
Vá aqui para experimentar a demonstração.
$ npm i weightless
Se você quiser começar super rapidamente, poderá usar a CLI.
$ npm init web-config new my-project --lit
Se você preferir usar o pacote umd , pode importar https://unpkg.com/weightless/umd/weightless.min.js . Lembre -se de que isso importa todos os elementos, por isso é recomendável que você o use apenas para fins de teste.
< script src =" https://unpkg.com/weightless/umd/weightless.min.js " > </ script > | Nome | Marcação | Descrição | Documentação | Demonstração |
|---|---|---|---|---|
| Pano de fundo | wl-backdrop | Camada escura para usar atrás de elementos sobrepostos. | Documentação | Demonstração |
| Bandeira | wl-banner | Exiba uma mensagem não interruptiva e ações opcionais relacionadas. | Documentação | Demonstração |
| Botão | wl-button | Permita que os usuários tomem ações e faça escolhas, com um único toque. | Documentação | Demonstração |
| Cartão | wl-card | Conteúdo e ação relacionados ao grupo. | Documentação | Demonstração |
| Caixa de seleção | wl-checkbox | Ligue ou desative uma opção. | Documentação | Demonstração |
| Diálogo | wl-dialog | Mensagens altamente interrompidas. | Documentação | Demonstração |
| Divisor | wl-divider | Linha fina que agrupa o conteúdo de listas e layouts. | Documentação | Demonstração |
| Expansão | wl-expansion | Forneça uma visualização expansível dos detalhes-verão. | Documentação | Demonstração |
| Ícone | wl-icon | Símbolos para ações e itens comuns. | Documentação | Demonstração |
| Rótulo | wl-label | Torne os elementos de forma mais acessíveis. | Documentação | Demonstração |
| Item da lista | wl-list-item | Exibir um item em uma lista. | Documentação | Demonstração |
| Nav | wl-nav | Forneça acesso a destinos em seu aplicativo. | Documentação | Demonstração |
| Popover | wl-popover | Elementos ancorados contextuais | Documentação | Demonstração |
| Cartão de popover | wl-popover-card | Dê a popovers um toque contextual. | Documentação | Demonstração |
| Barra de progresso | wl-progress-bar | Preenche uma barra de 0% a 100%. | Documentação | Demonstração |
| Spinner de progresso | wl-progress-spinner | Preenche um círculo de 0% a 100%. | Documentação | Demonstração |
| Rádio | wl-radio | Selecione uma opção em um conjunto. | Documentação | Demonstração |
| Ripple | wl-ripple | Indicar ações de toque. | Documentação | Demonstração |
| Selecione | wl-select | Selecione um ou mais valores de um conjunto de opções. | Documentação | Demonstração |
| Slider | wl-slider | Faça seleções de uma variedade de valores. | Documentação | Demonstração |
| Snackbar | wl-snackbar | Forneça mensagens breves na parte inferior da tela. | Documentação | Demonstração |
| Trocar | wl-switch | Ligue ou desative uma opção. | Documentação | Demonstração |
| Guia | wl-tab | Organize a navegação entre grupos de conteúdo. | Documentação | Demonstração |
| Grupo de guias | wl-tab-group | Organize a navegação entre grupos de conteúdo. | Documentação | Demonstração |
| Texto | wl-text | Texto do grupo em parágrafos. | Documentação | Demonstração |
| Textarea | wl-textarea | Campos de texto multilinas. | Documentação | Demonstração |
| TextField | wl-textfield | Campos de texto de singleline. | Documentação | Demonstração |
| Título | wl-title | Indique o início de uma nova seção. | Documentação | Demonstração |
| Dip de ferramenta | wl-tooltip | Texto relacionado ao contexto informativo. | Documentação | Demonstração |
Há muitas coisas emocionantes no roteiro. Até v1.0.0, você pode esperar que a API seja bastante estável, mas a refatoração ainda pode acontecer e quebrar a compatibilidade com versões anteriores. Você pode usar a biblioteca, criar solicitações de puxar ou adicionar problemas.
Você é mais do que bem -vindo a contribuir com este repositório! Abaixo estão algumas instruções sobre como configurar o projeto para desenvolvimento.
git clone https://github.com/andreasbm/weightless.git .npm i para instalar todas as dependências.npm run s O navegador deve ser aberto automaticamente no URL correto. Caso contrário, você pode abrir seu navegador e ir para http://localhost:1350 .npm run test .npm run lint .npm run docs .Os elementos são escritos no TypeScript e as folhas de estilo são escritas em SASS. Todos os componentes da Web usam elementos iluminados.
Se você quiser saber mais sobre como você pode ajudar, definitivamente deve conferir o arquivo contribuindo.md. Todos os colaboradores serão adicionados à seção Contribuintes abaixo.
| Andreas Mehlsen | Você? |
Licenciado sob o MIT.
