@betha-plataforma/estrutura-componentes
v1.7.0
Published
Coleção de Web Components para compor a estrutura de uma aplicação front-end da Betha Sistemas.
Downloads
444
Maintainers
Readme
@betha-plataforma/estrutura-componentes
Coleção de Web Components para compor a estrutura de uma aplicação front-end da Betha Sistemas.
Compatível com qualquer stack front-end que utilize HTML, CSS e JavaScript.
Componentes 📦
Estrutura
Marca e produto
Ferramentas
Instalando
NPM
npm install @betha-plataforma/estrutura-componentes
Yarn
yarn add @betha-plataforma/estrutura-componentes
CDN (unpkg)
<script type="module" src="https://unpkg.com/@betha-plataforma/estrutura-componentes/dist/estrutura-componentes/estrutura-componentes.esm.js"></script>
<script nomodule src="https://unpkg.com/@betha-plataforma/estrutura-componentes/dist/estrutura-componentes/estrutura-componentes.js"></script>
<!-- ... ou caso queira suportar somente navegadores modernos -->
<script type="module">
import { defineCustomElements } from 'https://unpkg.com/@betha-plataforma/estrutura-componentes/loader/index.es2017.mjs';
defineCustomElements();
</script>
Como usar 🔨
Fonte
Deve conter a fonte Open Sans instalada.
- O @betha-plataforma/theme-bootstrap4 já possui essa fonte e suas variações.
Caso não utilize o framework acima, é possível obter as definições nos arquivos de distribuição ao instalar este projeto.
<link rel="stylesheet" href="https://unpkg.com/@betha-plataforma/estrutura-componentes/dist/collection/assets/fonts.css">
Ícones
Deve conter a fonte Material Design Icons instalada
- A versão suportada é a 5.0.45
- Neste link está a tabela de referência de ícones disponíveis
<link rel="stylesheet" href="https://unpkg.com/@mdi/[email protected]/css/materialdesignicons.min.css">
Essa biblioteca de ícones pode ser instalada através de um gerenciador de pacotes npm install @mdi/[email protected]
Estilos
Os estilos globais da biblioteca devem ser importados
<link rel="stylesheet" href="https://unpkg.com/@betha-plataforma/estrutura-componentes/dist/estrutura-componentes/estrutura-componentes.css">
Registrando componentes
A integração com frameworks frontend, pode exigir algumas configurações específicas.
Abaixo alguns exemplos de como registrar e utilizar os web components
Mais informações sobre integração com frameworks podem ser vistas na documentação oficial do StencilJS
Configurando componentes
A comunicação com os componentes é feita através de propriedades, atributos, métodos e eventos do DOM, e cada componente tem suas específicações documentadas individualmente, siga o índice no topo deste documento ou navegue através dos diretórios para consultar.
Exemplos
Exemplos podem ser encontrados em betha-plataforma/exemplos
Compatibilidade 📜
Para entender melhor a abrangência de suporte entre navegadores, consulte a tabela no site oficial do Stencil.
Dúvidas
Possíveis dúvidas foram esclarecidas nesta documentação
Contribuindo 👥
Contribua para a evolução dos componentes Como contribuir.