Repositório de Web Components do Animalia DS
MIT License
Biblioteca de componentes do design system Animalia baseada em Web Components.
Instale o pacote via npm:
npm install @animaliads/web-components
Se preferir, você também pode instalar o componente de forma individual:
npm install @animaliads/ani-button
Importe o código do componente no seu módulo javascript:
import '@animaliads/ani-button';
E adicione e tag do componente no seu HTML:
<ani-button>Hello World</ani-button>
Os pacotes do AnimaliaDS são gerados utilzando os módulos Node. Para isso, você precisar fazer as resolução de módulos antes de utilizar o componente. Veja mais no começando do AnimaliaDS.
Para utilizar o web component, você precisará adicionar o CUSTOM_ELEMENTS_SCHEMA
no módulo da sua aplicação.
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
imports: [CommonModule],
declarations: [PageComponent],
exports: [PageComponent],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class PageModule {}
Você também precisará importar o pacote dentro do seu componente:
import '@animaliads/web-components';
Este projeto usa o gerenciador de pacotes NPM e a ferramenta Lerna para instalar e gerenciar suas dependências. Para começar, siga as instruções abaixo:
Certifique-se de ter o Node.js e o NPM instalados em sua máquina. Você pode instalá-los a partir do site oficial: nodejs.org
Abra um terminal na raiz do projeto e execute o comando:
npm install
Este comando instalará todas as dependências do projeto listadas no arquivo package.json.
npm install -g lerna
lerna bootstrap
lerna run buid
Este comando compilará o código em todos os pacotes do projeto.
npm run storybook
Este comando iniciará o Storybook em seu navegador para visualizar e testar os componentes do projeto.
Com esses passos, você terá instalado todas as dependências e configurado o ambiente de desenvolvimento para trabalhar no projeto.
Para visualizar a versão demo do AnimaliaDS, basta rodar o comando lerna abaixo como passo 6:
lerna run start
Saiba mais sobre as últimas correções e melhorias.
Chrome | Firefox | Safari | Edge |
---|---|---|---|
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
[EM BREVE]