Biblioteca de integração dos Web Components GovBR-DS com o Angular
Bibiloteca de componentes angular que encapsulam os Web Components GovBR-DS.
Instale os pacotes abaixo:
``bash`
npm install --save-dev @govbr-ds/core @govbr-ds-testing/webcomponents @govbr-ds-testing/webcomponents-angular
Inclua o módulo WebcomponentsAngularModule no arquivo app.module.ts da sua aplicação.
`typescript
import { WebcomponentsAngularModule } from '@govbr-ds-testing/webcomponents-angular'
import "@govbr-ds/core/dist/core.min.css";
...
@NgModule({
...
imports: [
WebcomponentsAngularModule,
],
...
})
export class AppModule { }
`
E no .angular.json:
`json`
"architect": {
"build": {
"options": {
"styles": [
"node_modules/@govbr-ds/core/dist/core.min.css"
]
}
}
}
O core.min.css é quem define os valores dos tokens de CSS usados.
Em seguida, você pode utilizar qualquer web component disponibilizado pela biblioteca de Web Components diretamente nos templates HTML:
`html`
Enviar Formulário
Consulte a documentação da biblioteca para saber quais propriedades cada componente pode receber.
Os Web Components podem ser usados como qualquer outra tag HTML e funcionam no mecanismo de reatividade do angular, como "one-way-binding", "two-way-binding" e "events".
`html`
[disabled]=isDisabled
emphasis="primary"
type="button"
(brComponentDidLoad)="onComponentDidLoad()"
>{{ label }}
Como pode ser notado, os Web Components emitem eventos de ciclo de vida, que pode ser ouvidos pelo angular, para executar uma determinada ação. Consulte a documentação do componente para saber mais sobre os eventos de ciclo de vida.
`markdown`
- component-library
- src
- lib
- stencil-generated
- component-library.module.ts
- index.ts
Ao gerar um build da biblioteca te Web Components os arquivos da pasta src/lib/stencil-generated são deletados e recriados. Todas as alterações nesses arquivos vão ser perdidas ao gerar um novo build dos Web Components.
O Arquivo component-library.module.ts exporta os componentes e registra os componentes como custom elements.
O Arquivo index.ts é o entry point da biblioteca.
Rode o comando npm run build`.
Você pode usar as issues para nos informar os problemas que tem enfrentado ao usar nossa biblioteca ou mesmo o que gostaria que fizesse parte do projeto. Por favor use o modelo que mais se encaixa na sua necessidade e preencha com o máximo de detalhes possível.
Nos comprometemos a responder a todas as issues.
Nesse projeto usamos um padrão para branches e commits. Por favor observe a documentação na nossa wiki para aprender sobre os nossos padrões.
Por favor não crie issues para fazer perguntas.
Use nossos canais abaixo para obter tirar suas dúvidas:
- Site do GovBR-DS http://gov.br/ds
- Web Components https://gov.br/ds/webcomponents
- Usando nosso canal no discord https://discord.gg/U5GwPfqhUP
Os Web Components do GovBR-DS são criados pelo SERPRO juntamente com a comunidade.
Nesse projeto usamos a licença MIT.