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