@sula-tech/webcomponents v0.3.3
Sula Webcomponents
Como instalar
NPM
Instale a dependência:
npm i @sula-tech/webcomponents
E importe o webcomponents.esm.js
:
<script src="@sula-tech/webcomponents/dist/webcomponents/webcomponents.esm.js" type="module"></script>
Para projetos legados, importe o webcomponents.js
:
<script src="@sula-tech/webcomponents/dist/webcomponents/webcomponents.js" type="text/javascript"></script>
Para uso em frameworks, consulte a documentação do Stencil.
Configuração do TailwindCSS
Para garantir que as cores sejam aplicadas corretamente, é necessário utilizar o plugin do design system com o TailwindCSS:
npm i @sula-tech/tailwind-css-plugin
Configure o plugin no seu arquivo tailwind.config.js
:
const sulaPlugin = require('@sula-tech/tailwind-css-plugin/src/tailwind-design-system-plugin');
module.exports = {
// ... outras configurações
plugins: [
sulaPlugin,
// ... outros plugins
],
};
Configuração de Ícones
Para que os ícones funcionem corretamente, adicione a seguinte linha no seu arquivo de estilos global:
@import '@sula-tech/webcomponents/dist/webcomponents/assets/icons/icons.css';
Aplicações Angular
npm i @sula-tech/webcomponents
É necessário declarar o CUSTOM_ELEMENTS_SCHEMA
em cada módulo onde os webcomponents serão utilizados:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
declarations: [YourComponent],
imports: [CommonModule, OtherModules],
schemas: [CUSTOM_ELEMENTS_SCHEMA], // Necessário em cada módulo que utiliza webcomponents
})
export class YourModule {}
E no final do arquivo main.ts
, adicione os seguintes imports:
import { applyPolyfills, defineCustomElements } from '@sula-tech/webcomponents/loader';
defineCustomElements();
Aplicações React
npm i @sula-tech/webcomponents
No seu arquivo src/index.js
ou src/index.tsx
(para projetos TypeScript), adicione os seguintes imports, preferencialmente antes da renderização do React:
import { applyPolyfills, defineCustomElements } from '@sula-tech/webcomponents/loader';
defineCustomElements();
Quero contribuir
Veja o guia de contribuição.