vrembem скачать - скачать исходный код vrembem

vrembem

Сторонние компоненты

v3.0.20

Скачать

Врембем

Библиотека компонентов, основанная на методологии BEM.

О

Vrembem-это библиотека компонентов, написанная передней частью компонентов, записанная для создания общих шаблонов веб-интерфейса. Это позволяет разработчикам и дизайнерам внедрять надежные компоненты в свои веб -проекты, сохраняя при этом гибкие и настраиваемые с помощью методологии BEM и языка расширения CSS SASS CSS.

Этот репозиторий Vrembem управляется как монорепо, который содержит все доступные компоненты. Включите все компоненты, используя удобный пакет Vrembem All-In-One.

Быстрые ссылки

Документация
Компоненты
Изменение

Начиная

Используя CDN

Если вы хотите использовать VREMBEM для прототипирования или просто хотите взять его на тестовый диск, вы можете использовать версию CDN UNPKG CDN или всю библиотеку Vrembem.

 <!-- Include Vrembem styles -->
< link rel =" stylesheet " href =" https://unpkg.com/vrembem/dist/styles.css " >

<!-- Render a component -->
< button data-modal-open =" modal-id " class =" link " > Open modal </ button >
< div id =" modal-id " class =" modal modal_size_sm " >
  < div class =" modal__dialog dialog " role =" dialog " aria-modal =" true " >
    < p > Hello, world! </ p >
    < button data-modal-close class =" link " > Close </ button >
  </ div >
</ div >

<!-- Include Vrembem JavaScript -->
< script src =" https://unpkg.com/vrembem " > </ script >

<!-- Instantiate the component rendered in the document -->
< script >
  const modal = new vrembem . Modal ( ) ;
  modal . init ( ) ;
</ script >

Также см. example.html для более полной рабочей демонстрации использования Vrembem через CDN.

Ссылки CDN

Vrembem Packages Все пучки в двух областях, dist содержит все сжатые производственные пучки, а dev содержит несжатые версии (все используют одни и те же имена файлов). Компоненты, которые поставляются с JavaScript, включают 4 пакета:

Тип	Расширение	Описание
Герметичный	`.umd.js`	Универсальные модульные определения пучков, которые можно использовать непосредственно в браузере с помощью тега `<script>` . Это файл по умолчанию от `pkg.unpkg` , указывающий на `scripts.umd.js` .
Эсм	`.esm.js`	ES Module Puckles, предназначенные для использования с современными пучками, такими как Webpack 2 или Rollup. Это файл по умолчанию от `pkg.module` , указывающий на `scripts.esm.js` .
CJS	`.js`	Commonjs пакеты, которые предназначены для более старых пучков, таких как Browserify или Webpack 1. Это файл по умолчанию от `pkg.main` , указывающий на `scripts.js` .
Современный	`.modern.js`	Современные пакеты, специально разработанные для работы во всех современных браузерах. В частности, компилируется в браузерах, которые поддерживают `<script type="module">` , которые меньше и быстрее выполнять, чем пакет `esm` .

CDN ссылка формат

# Styles
Uncompressed: https://unpkg.com/[COMPONENT]/dev/styles.css
Compressed:   https://unpkg.com/[COMPONENT]/dist/styles.css

# Scripts
Uncompressed: https://unpkg.com/[COMPONENT]/dev/scripts.umd.js
Compressed:   https://unpkg.com/[COMPONENT]/dist/scripts.umd.js

Например, если вы хотите включить стили и сценарии для компонента @vrembem/drawer , вы можете использовать следующую ссылку и теги скрипта:

 <!-- Component specific styles (expanded or compressed) -->
< link rel =" stylesheet " href =" https://unpkg.com/@vrembem/drawer/dev/styles.css " >
< link rel =" stylesheet " href =" https://unpkg.com/@vrembem/drawer/dist/styles.css " >

<!-- Component specific scripts -->
< script src =" https://unpkg.com/@vrembem/drawer/dev/scripts.umd.js " > </ script >
< script src =" https://unpkg.com/@vrembem/drawer/dist/scripts.umd.js " > </ script >

<!-- A modern bundle specially designed to work in all modern browsers with UMD fallback -->
< script type =" module " src =" https://unpkg.com/@vrembem/drawer/dist/scripts.modern.js " > </ script >
< script nomodule src =" https://unpkg.com/@vrembem/drawer/dist/scripts.umd.js " > </ script >

Используя NPM

Чтобы использовать компонент Vrembem, вам сначала нужно установить его в качестве зависимости. Для этого примера мы будем использовать модальный компонент:

npm install @vrembem/modal

CSS

Включите компонент в файл манифеста SASS вашей сборки:

 @use " @vrembem/modal " ;

Vrembem использует модульную систему Sass, пропустите пользовательские переменные, используя with слово.

 @use " @vrembem/modal " with (
  $background : #fff ,
  $background-alpha : 0.9
);

JavaScript

Некоторые пакеты также включали модули для их функциональности. Вы можете включить их в свои файлы JavaScript, импортируя, экземпляр и инициализируйте:

 // Import your component
import Modal from "@vrembem/modal" ;

// Instantiate and initialize
const modal = new Modal ( ) ;
modal . init ( ) ;

В качестве альтернативы, вы можете использовать опцию autoInit для автоматической инициализации и, необязательно, сохранение экземпляра с переменной, если возвращаемый API не понадобится позже.

 new Modal ( { autoInit : true } ) ;

HTML

Включите наценку компонента в свой проект. Используйте онлайн -документы для получения информации и примеров кода, таких как разметка и доступные модификаторы для каждого компонента.

 < button data-modal-open =" [unique-id] " > Modal </ button >
< div id =" [unique-id] " class =" modal " >
  < div class =" modal__dialog " role =" dialog " aria-modal =" true " >
    < button data-modal-close > Close </ button >
    ...
  </ div >
</ div >

Все в одном

Также можно включить все компоненты Vrembem с использованием одного пакета vrembem All-In-One:

npm install vrembem

Через файл манифеста вашего проекта:

 @use " vrembem " ;

Переопределите переменные по умолчанию с помощью модульной системы Sass и with ключевым словом. Переменные префиксируются по имени их компонента. Вы также можете настроить основные переменные, которые все компоненты наследуют от использования префикса $core- .

 @use " vrembem " with (
  $core-prefix-block : " vb- " ,
  $modal-background : #fff ,
  $modal-background-alpha : 0.9
);

Через файл манифеста JavaScript вашего проекта:

 // Import all under the vb namespace
import * as vb from "vrembem" ;
const drawer = new vb . Drawer ( { autoInit : true } ) ;

// Or import individual components
import { Drawer } from "vrembem" ;
const drawer = new Drawer ( { autoInit : true } ) ;