@betha-plataforma/nopaper-componentes

Coleção de Web Components NoPaper.

Compatível com qualquer stack front-end que utilize HTML, CSS e JavaScript.

Componentes 📦

Ferramentas

• nopaper-detalhes-assinatura
• nopaper-assinatura

Instalando

NPM

npm install @betha-plataforma/nopaper-componentes

Yarn

yarn add @betha-plataforma/nopaper-componentes

CDN (unpkg)

<script type="module" src="https://unpkg.com/@betha-plataforma/nopaper-componentes/dist/nopaper-componentes/nopaper-componentes.esm.js"></script>
<script nomodule src="https://unpkg.com/@betha-plataforma/nopaper-componentes/dist/nopaper-componentes/nopaper-componentes.js"></script>

<!-- ... ou caso queira suportar somente navegadores modernos -->
<script type="module">
  import { defineCustomElements } from 'https://unpkg.com/@betha-plataforma/nopaper-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/nopaper-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/nopaper-componentes/dist/nopaper-componentes/nopaper-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

• Vanilla JavaScript
• Angular
• Vue
• React

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.