vrembemダウンロードvrembemソースコードのダウンロード

vrembem

サードパーティ製コンポーネント

v3.0.20

ダウンロード

VREMBEM

BEM方法論に基づくコンポーネントライブラリ。

について

VREMBEMは、一般的なWebインターフェイスパターンを作成するために書かれたフロントエンドコンポーネントライブラリです。これにより、開発者と設計者は、BEM方法論とSASS CSS拡張言語を使用して柔軟でカスタマイズ可能に保つ一方で、堅牢なコンポーネントをWebプロジェクトに実装できます。

このVREMBEMリポジトリは、利用可能なすべてのコンポーネントを含むモノレポとして管理されています。便利なオールインワンVREMBEMパッケージを使用して、すべてのコンポーネントを含めます。

クイックリンク

ドキュメント
コンポーネント
Changelog

はじめる

CDNを使用します

VREMBEMをプロトタイピングに使用したい場合、またはテストドライブに使用する場合は、コンポーネントの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 >

また、CDNを介してVREMBEMを使用するより包括的な作業デモについては、 example.html参照してください。

CDN参照

VREMBEMパッケージ2つの領域にすべてのバンドルがあり、 distはすべての圧縮生産準備完了バンドルが含まれており、 devには非圧縮バージョンが含まれています（すべて同じファイル名を使用しています）。 JavaScriptを使用して出荷するコンポーネントには、4つのバンドルが含まれています。

タイプ	拡大	説明
umd	`.umd.js`	`<script>`タグを介してブラウザで直接使用できるユニバーサルモジュール定義バンドル。これは、 `scripts.umd.js`を指す`pkg.unpkg`のデフォルトファイルです。
ESM	`.esm.js`	ESモジュールバンドルは、Webpack 2やロールアップなどの最新のバンドラーで使用することを目的としています。これは、 `scripts.esm.js`を指す`pkg.module`のデフォルトファイルです。
CJS	`.js`	BrowserifyやWebpackなどの古いバンドラーを対象としたCommonJSバンドル1。これは、 `scripts.js`を指す`pkg.main`のデフォルトファイルです。
モダンな	`.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 Keywordを使用してカスタム変数を渡します。

 @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オプションを使用して自動初期化し、オプションでインスタンスを変数に保存することをオプションで省略します。

 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コンポーネントを1つのオールインワンvrembemパッケージを使用して含めることもできます。

npm install vrembem

プロジェクトのSASSマニフェストファイルを介して：

 @use " vrembem " ;

SASSのモジュールシステムとwithキーワードを使用して、デフォルト変数をオーバーライドします。変数には、コンポーネント名が付いています。また、すべてのコンポーネントが$core- freixの使用から継承するコア変数をカスタマイズすることもできます。

 @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 } ) ;