blueprintui

Uma coleção de ferramentas e componentes da interface do usuário para a construção de UIs da web que funcionam em todos os lugares.

• Componentes da Web fáceis de usar
• Funciona em qualquer estrutura (Angular, React, Vue ...)
• Temas responsivos e personalizáveis
• Layout, tipografia e ícones utilitários

Pacote	Downloads	Status do CI	CDN

Documentação

• Documentação
• JavaScript CDN
• Angular
• Vue
• Reagir

Instalação

Os componentes da interface do usuário do Blueprint são construídos como componentes da web. Isso lhes permite trabalhar em uma variedade de estruturas e bibliotecas. A interface do usuário do Blueprint é dividida em vários pacotes que podem ser usados de forma independente. Para usar componentes, instale o seguinte,

npm install @blueprintui/components

Pacotes opcionais para utilidades de layout e tipografia também estão disponíveis.

npm install @blueprintui/layout @blueprintui/typography

CSS

Para usar componentes, o arquivo CSS do tema base deve ser carregado na página. Isso pode ser feito através de um link de importação ou html CSS.

 @import '@blueprintui/themes/index.min.css' ;
@import '@blueprintui/themes/dark/index.min.css' ;

ou

 < link rel =" stylesheet " href =" @blueprintui/themes/index.min.css " > 
< link rel =" stylesheet " href =" @blueprintui/themes/dark/index.min.css " > 

CDN

Os componentes da interface do usuário do Blueprint podem ser usados via CDNs para prototipagem rápida e fácil.

 < link rel =" stylesheet " href =" https://unpkg.com/@blueprintui/themes/index.min.css " >
< link rel =" stylesheet " href =" https://unpkg.com/@@blueprintui/themes/dark/index.min.css " >

< script type =" module " >
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/alert.js/+esm' ;
</ script > 

Usando um componente

Depois que o tema CSS é carregado, os componentes podem ser importados via JavaScript Imports.

 import '@blueprintui/components/include/alert.js' ; 

 < body bp-theme =" { theme: 'dark' }); " >

  < bp-alert status =" success " > hello there! </ bp-alert >

</ body >