Descarga de vrembem - Descargar el código fuente de vrembem

vrembem

Componentes de terceros

v3.0.20

Descargar

Vrembem

Una biblioteca de componentes basada en la metodología BEM.

Acerca de

Vrembem es una biblioteca de componentes frontal escrita para poner a disposición patrones de interfaz web comunes. Esto permite a los desarrolladores y diseñadores implementar componentes robustos en sus proyectos web, al tiempo que los mantiene flexibles y personalizables mediante el uso de la metodología BEM y el lenguaje de extensión CSS SASS.

Este repositorio de Vrembem se administra como un monorepo que contiene todos los componentes disponibles. Incluya todos los componentes utilizando el conveniente paquete Vrembem todo en uno.

Enlaces rápidos

Documentación
Componentes
Colegio de cambios

Empezando

Usando CDN

Si desea usar Vrembem para la creación de prototipos o simplemente desea tomarlo para una prueba de manejo, puede aprovechar la versión CDN Unpkg de un componente o toda la biblioteca 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 >

Vea también example.html para una demostración de trabajo más completa de usar Vrembem a través de CDN.

Referencias de CDN

Vrembem empaquetan todos los paquetes en dos áreas, dist contiene todos los paquetes de producción comprimidos listos y dev contiene versiones sin comprimir (todas utilizando los mismos nombres de archivo). Los componentes que se envían con JavaScript incluyen 4 paquetes:

Tipo	Extensión	Descripción
Umd	`.umd.js`	Bundos de definición del módulo universal que se pueden usar directamente en el navegador a través de una etiqueta `<script>` . Este es el archivo predeterminado de `pkg.unpkg` apuntando a `scripts.umd.js` .
ESM	`.esm.js`	Bundles del módulo ES que están destinados a usarse con agrupadores modernos como Webpack 2 o Rollup. Este es el archivo predeterminado de `pkg.module` que apunta a `scripts.esm.js` .
CJS	`.js`	Los paquetes CommonJS que están destinados a agrupadores más antiguos como Browserify o Webpack 1. Este es el archivo predeterminado de `pkg.main` que apunta a `scripts.js` .
Moderno	`.modern.js`	Bundles modernos especialmente diseñados para funcionar en todos los navegadores modernos. Se compila específicamente hasta los navegadores que admiten `<script type="module">` que son más pequeños y más rápidos de ejecutar que el paquete `esm` .

Formato de enlace 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

Por ejemplo, si desea incluir los estilos y scripts para el componente @vrembem/drawer , puede usar el siguiente enlace y etiquetas de script:

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

Usando NPM

Para usar un componente Vrembem, primero deberá instalarlo como dependencia. Para este ejemplo, usaremos el componente modal:

npm install @vrembem/modal

CSS

Incluya el componente en el archivo de manifiesto SASS de su compilación:

 @use " @vrembem/modal " ;

Vrembem utiliza el sistema de módulos de Sass, pase en variables personalizadas utilizando la with clave.

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

Javascript

Algunos paquetes también han incluido módulos para su funcionalidad. Puede incluirlos en sus archivos JavaScript importando, instanciando e inicializarse:

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

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

Alternativamente, puede usar la opción autoInit para inicializar automáticamente y opcionalmente omitir guardar la instancia en una variable si la API devuelta no se necesitará más adelante.

 new Modal ( { autoInit : true } ) ;

Html

Incluya el marcado del componente en su proyecto. Use los documentos en línea para obtener información y ejemplos de código como marcado y modificadores disponibles para cada componente.

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

Todo en uno

También es posible incluir todos los componentes Vrembem utilizando el único paquete vrembem todo en uno:

npm install vrembem

A través del archivo de manifiesto SASS de su proyecto:

 @use " vrembem " ;

Anular las variables predeterminadas usando el sistema del módulo SASS y la palabra clave with la palabra clave. Las variables tienen prefijo por el nombre de su componente. También puede personalizar las variables principales que todos los componentes heredan desde el uso de $core- prefijo.

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

A través del archivo manifiesto JavaScript de su proyecto:

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