blueprintui

Une collection d'outils et de composants d'interface utilisateur pour la création d'UIS Web qui fonctionnent partout.

• Composants Web faciles à utiliser
• Fonctionne dans n'importe quel cadre (Angular, React, Vue ...)
• Thèmes réactifs et personnalisables
• Disposition, typographie et icônes Utilites

Emballer	Téléchargements	Statut de CI	Monnaie

Documentation

• Documentation
• Cdn javascript
• Angulaire
• Vue
• Réagir

Installation

Les composants d'interface utilisateur du plan du plan sont construits sous forme de composants Web. Cela leur permet de travailler dans une variété de cadres et de bibliothèques. L'interface utilisateur du Blueprint est divisée en plusieurs packages qui peuvent être utilisés indépendamment. Pour utiliser les composants son installation ce qui suit,

npm install @blueprintui/components

Des packages en option pour les utilitaires de mise en page et de typographie sont également disponibles.

npm install @blueprintui/layout @blueprintui/typography

CSS

Pour utiliser les composants, le fichier CSS du thème de base doit être chargé dans la page. Cela peut être fait via une liaison CSS Import ou HTML.

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

Monnaie

Les composants d'interface utilisateur du plan plan peuvent être utilisés via des CDN pour un prototypage rapide et facile.

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

Utilisation d'un composant

Une fois le thème CSS chargé, les composants peuvent être importés via des importations JavaScript.

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

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

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

</ body >