lion
0.17.2
Site · Fundamentos · Guias · Componentes · Blog
Lion é um conjunto de componentes da Web de alto desempenho, acessíveis e flexíveis.!
Eles fornecem uma camada de etiqueta branca sem opinião que pode ser estendida à sua própria camada de componentes.
Alto Desempenho: Focado em ótimo desempenho em todos os navegadores relevantes com um número mínimo de dependências.
Acessibilidade: Visa a conformidade com o padrão WCAG 2.2 AA para criar componentes acessíveis a todos.
Flexibilidade: Oferece soluções através de Web Components e classes JavaScript que podem ser utilizadas, adotadas e estendidas para atender a todas as necessidades.
Modern Code: Lion é distribuído como módulos ES puros.
Expõe funções/classes e componentes da Web: fornece uma funcionalidade na forma mais apropriada.
Nota: Nossos exemplos de demonstração podem parecer simples e não muito elegantes. Isso é de propósito. Eles são projetados para serem básicos, para que você possa adicionar facilmente seus próprios estilos para combinar com o design pretendido, sem lidar com estilos que já existem.
Explore os Guias do Leão ▶
npm eu @lion/ui
Este é o principal caso de uso do lion . Para importar classes de componentes e estendê-las para os componentes do seu próprio sistema de design.
importar { css } de 'lit';importar { LionInput } de '@lion/ui/input.js';class MyInput estende LionInput {
static get estilos() {return [ super.styles, css` /* seus estilos aqui */ `,];
}}customElements.define('minha-entrada', MyInput); Existem alguns "sistemas" no Lion que possuem uma API JavaScript. Exemplos são localize , overlays , ajax , etc.
<script type="módulo">
importar {ajax} de '@lion/ui/ajax.js';
ajax.fetch('data.json').then(response => response.json()).then(data => { // faça algo com os dados});</script>Você também pode usar os elementos leão diretamente, embora esse provavelmente não seja um caso de uso comum.
<script type="módulo"> importar '@lion/ui/define/lion-input.js';</script><lion-input name="firstName"></lion-input>
Se você encontrar um problema com qualquer um dos pacotes que oferecemos, abra um novo problema de bug. Certifique-se de incluir uma descrição do comportamento esperado e atual - adicionar uma reprodução adicional sempre ajuda.
Quando você tiver uma ideia sobre como podemos melhorar, verifique nossas discussões para ver se há ideias semelhantes ou solicitações de recursos. Se não houver nenhum, inicie sua solicitação de recurso como um novo tópico de discussão. Adicione o título [Feature Request] My awesome feature e uma descrição do que você espera da melhoria e qual é o caso de uso.
| Nome | versão | descrição |
|---|---|---|
| @leão/ui | Conjunto de componentes | |
| @leão/ajax | Um pequeno invólucro em torno de buscar | |
| Gerenciador de singleton | Um gerenciador singleton fornece uma maneira de garantir que uma instância singleton carregada de vários locais de arquivo permaneça como singleton. Principalmente útil se duas versões principais de um pacote com um singleton forem usadas. | |
| Plugin Babel estende documentos | Um plugin que reescreve importações e modelos de acordo com uma configuração. Isso permite a reutilização de documentação existente de pacotes fonte enquanto ainda usa seu código de extensões. | |
| Análise da Providência | Providence é o 'Olho Que Tudo Vê' que gera estatísticas de uso por meio da análise de código. Ele mede a eficácia e popularidade do seu software. Com apenas alguns comandos você pode medir o impacto de alterações (quebrantes), tornando seu processo de lançamento mais estável e previsível. | |
| Publicar documentos | Uma ferramenta que copia e processa sua documentação (em um monorepo) para que ela possa ser publicada/enviada junto com seu pacote. | |
| Extensão de observação | Um plugin para observação para estender o markdown importando de arquivos de origem. | |
| Predefinição de foguete estende documentos do leão | Ao manter sua própria camada de extensão do Lion, você provavelmente desejará manter uma documentação semelhante. Copiar e reescrever os arquivos markdown funciona, mas sempre que algo muda você precisa copiar e reescrever novamente. Para fazer isso automaticamente você pode usar esta predefinição para foguete. |
O Lion Web Components pretende ser preparado para o futuro e usar tecnologia comprovada e bem suportada. A pilha que escolhemos deve refletir isso.
aceso
npm
Abra componentes da Web
Web moderna
Mocha
Chai
ESLint
mais bonito
Módulos ES
Muitos e muitos testes
Sabemos por experiência que criar componentes de UI acessíveis e de alta qualidade é difícil e demorado: são necessárias muitas iterações, muito tempo de desenvolvimento e muitos testes para obter um componente genérico que funcione em todos os contextos, suporte muitos casos extremos e seja acessível em todos os leitores de tela relevantes.
O Leão pretende fazer o trabalho pesado para você. Isso significa que você só precisa aplicar seu próprio Design System: entregando estilos, configurando componentes e adicionando um conjunto mínimo de lógica personalizada.
Confira nossas diretrizes de codificação para obter informações mais detalhadas.
Observação: este projeto usa Npm Workspaces. Se você deseja executar todas as demonstrações localmente, você precisa obter pelo menos npm 7+ e instalar todas as dependências executando npm install .
Os Lion Web Components são tão bons quanto suas contribuições. Leia nosso guia de contribuições e sinta-se à vontade para aprimorar/melhorar o Lion. Mantemos as solicitações de recursos fechadas enquanto não estamos trabalhando nelas.
Sinta-se à vontade para criar um problema no github para qualquer feedback ou perguntas que você possa ter.
