blueprintui

Eine Sammlung von Tools und UI -Komponenten zum Erstellen von Web -UIs, die überall funktionieren.

• Einfach zu verwendende Webkomponenten
• Funktioniert in jedem Gerüst (Angular, React, Vue ...)
• Reaktionsschnelle und anpassbare Themen
• Layout, Typografie und Icons Utilites

Paket	Downloads	CI -Status	CDN

Dokumentation

• Dokumentation
• JavaScript CDN
• Eckig
• Vue
• Reagieren

Installation

Die UI -Komponenten der Blaupause werden als Webkomponenten erstellt. Auf diese Weise können sie in einer Vielzahl von Frameworks und Bibliotheken arbeiten. Die UI der Blaupause ist in mehrere Pakete aufgeteilt, die unabhängig verwendet werden können. Um Komponenten zu verwenden, installieren Sie Folgendes,

npm install @blueprintui/components

Optionale Pakete für Layout- und Typografie -Dienstprogramme sind ebenfalls verfügbar.

npm install @blueprintui/layout @blueprintui/typography

CSS

Um Komponenten zu verwenden, muss die CSS -Datei Basisthema in die Seite geladen werden. Dies kann über einen CSS -Import oder einen HTML -Link erfolgen.

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

oder

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

CDN

Die UI -Komponenten der Blaupause können über CDNs zum schnellen und einfachen Prototyping verwendet werden.

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

Mit einer Komponente

Sobald das Thema CSS geladen ist, können Komponenten über JavaScript -Importe importiert werden.

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

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

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

</ body >