blueprintui

Una colección de herramientas y componentes de la interfaz de usuario para construir UIs web que funcionan en todas partes.

• Componentes web fáciles de usar
• Funciona en cualquier marco (Angular, React, Vue ...)
• Temas receptivos y personalizables
• Diseño, tipografía e íconos utilitos

Paquete	Descargas	Estado de CI	CDN

Documentación

• Documentación
• JavaScript CDN
• Angular
• Vue
• Reaccionar

Instalación

Los componentes de la interfaz de usuario de BluePrint se construyen como componentes web. Esto les permite trabajar en una variedad de marcos y bibliotecas. La interfaz de usuario de Blueprint se divide en varios paquetes que se pueden usar de forma independiente. Para usar componentes su instalación lo siguiente,

npm install @blueprintui/components

Los paquetes opcionales para utilidades de diseño y tipografía también están disponibles.

npm install @blueprintui/layout @blueprintui/typography

CSS

Para usar componentes, el archivo CSS del tema base debe cargarse en la página. Esto se puede hacer a través de un enlace CSS Import o HTML.

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

o

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

CDN

Los componentes de la interfaz de usuario de Blueprint se pueden usar a través de CDN para prototipos rápidos y fáciles.

 < 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 un componente

Una vez que se carga el tema CSS, los componentes se pueden importar a través de las importaciones de JavaScript.

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

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

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

</ body >