@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.