vrembem下載 - vrembem源代碼下載

vrembem

三方組件

v3.0.20

下載

Vrembem

基於BEM方法論的組件庫。

關於

VREMBEM是編寫的前端組件庫，以使通用的Web接口模式可用。這使開發人員和設計人員可以通過使用BEM方法和SASS CSS擴展語言來使其在其Web項目中實現強大的組件，同時使其靈活和自定義。

該VREMBEM存儲庫被視為包含所有可用組件的MonorePo。使用便捷的多合一Vrembem軟件包包含所有組件。

快速鏈接

文件
成分
ChangElog

入門

使用CDN

如果您想將VREMBEM用於原型製作或只是想將其用於測試驅動器，則可以利用組件或整個VREMBEM庫的UNPKG CDN版本。

 <!-- 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有關通過CDN使用VREMBEM的更全面的演示。

CDN參考

VREMBEM軟件包在兩個區域中的所有捆綁dist包含所有壓縮生產的Ready Bundles，而dev包含未壓縮版本（所有使用相同的文件名）。帶有JavaScript發貨的組件包括4個捆綁包：

類型	擴大	描述
UMD	`.umd.js`	通用模塊定義捆綁包可以通過`<script>`標籤直接在瀏覽器中使用。這是從`pkg.unpkg`指向`scripts.umd.js`的默認文件。
ESM	`.esm.js`	ES模塊捆綁包，旨在與WebPack 2或crolup等現代捆綁機一起使用。這是`pkg.module`指向`scripts.esm.js`的默認文件。
CJS	`.js`	旨在用於瀏覽或webpack 1的舊捆綁機的commonj捆綁包。這是`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 ( ) ;

另外，如果以後不需要返回的API，則可以使用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軟件包包含所有VREMBEM組件：

npm install vrembem

通過您的項目的SASS清單文件：

 @use " vrembem " ;

使用SASS的模塊系統和with關鍵字覆蓋默認變量。變量由其組件名稱前綴。您還可以自定義核心變量，這些變量所有組件都從使用$core- prefix繼承。

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