blueprintui

Коллекция инструментов и компонентов пользовательского интерфейса для создания веб -интерфейсов, которые работают повсюду.

• Простые в использовании веб -компонентов
• Работает в любой структуре (Angular, React, Vue ...)
• Отзывчивые и настраиваемые темы
• Макет, типография и утилиты иконки

Упаковка	Загрузки	Статус CI	CDN

Документация

• Документация
• JavaScript CDN
• Угловой
• Vue
• Реагировать

Установка

Компоненты пользовательского интерфейса Blueprint созданы как веб -компоненты. Это позволяет им работать в различных структурах и библиотеках. Пользовательский интерфейс Blueprint разделен на несколько пакетов, которые можно использовать независимо. Чтобы использовать компоненты, установите следующее,

npm install @blueprintui/components

Доступны дополнительные пакеты для компоновки и типографии также доступны.

npm install @blueprintui/layout @blueprintui/typography

CSS

Для использования компонентов базовый файл CSS базовой темы должен быть загружен на страницу. Это может быть сделано по ссылке CSS -импорта или HTML.

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

или

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

CDN

Компоненты пользовательского интерфейса Blueprint можно использовать с помощью CDN для быстрого и легкого прототипирования.

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

Используя компонент

Как только тема CSS загружена, компоненты могут быть импортированы с помощью импорта JavaScript.

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

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

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

</ body >