vrembem 다운로드 vrembem 소스 코드 다운로드

vrembem

타사 구성 요소

v3.0.20

다운로드

vrembem

BEM 방법론을 기반으로 한 구성 요소 라이브러리.

에 대한

Vrembem은 일반적인 웹 인터페이스 패턴을 사용할 수 있도록 프론트 엔드 구성 요소 라이브러리입니다. 이를 통해 개발자와 디자이너는 BEM 방법론 및 SASS CSS Extension 언어를 사용하여 유연하고 사용자 정의 할 수 있도록 강력한 구성 요소를 웹 프로젝트에 구현할 수 있습니다.

이 vrembem 저장소는 사용 가능한 모든 구성 요소를 포함하는 Monorepo로 관리됩니다. 편리한 올인원 Vrembem 패키지를 사용하여 모든 구성 요소를 포함하십시오.

빠른 링크

선적 서류 비치
구성 요소
changelog

시작하기

CDN 사용

프로토 타이핑에 vrembem을 사용하거나 테스트 드라이브를 위해 가져 가려면 구성 요소의 UNBKG 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 패키지 모든 번들이 두 가지 영역의 모든 번들, dist 에는 모든 압축 생산 준비 번들이 포함되어 있으며 dev 에는 압축되지 않은 버전이 포함되어 있습니다 (모두 동일한 파일 이름을 사용). JavaScript로 배송되는 구성 요소에는 4 개의 번들이 포함됩니다.

유형	확대	설명
음	`.umd.js`	`<script>` 태그를 통해 브라우저에서 직접 사용할 수있는 범용 모듈 정의 번들. 이것은 `scripts.umd.js` 를 가리키는 `pkg.unpkg` 의 기본 파일입니다.
ESM	`.esm.js`	Webpack 2 또는 Rollup과 같은 최신 번들과 함께 사용하기위한 ES 모듈 번들. 이것은 `scripts.esm.js` 를 가리키는 `pkg.module` 의 기본 파일입니다.
CJS	`.js`	Browserify 또는 Webpack 1과 같은 구형 번들을위한 Commonjs 번들 `scripts.js` 이것은 `pkg.main` 의 기본 파일입니다.
현대의	`.modern.js`	모든 현대식 브라우저에서 작동하도록 특별히 설계된 현대 번들. `esm` 번들보다 더 작고 빠른 `<script type="module">` 지원하는 브라우저로 구체적으로 컴파일합니다.

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 Manifest 파일에 구성 요소를 포함시킵니다.

 @use " @vrembem/modal " ;

Vrembem은 Sass의 모듈 시스템을 사용하여 with 키워드를 사용하여 사용자 정의 변수를 전달합니다.

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

자바 스크립트

일부 패키지에는 기능에 대한 모듈도 포함되어 있습니다. 가져 오기, 인스턴스화 및 초기화를 통해 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 Manifest 파일을 통해 :

 @use " vrembem " ;

SASS 모듈 시스템 및 with 키워드를 사용하여 기본 변수를 재정의하십시오. 변수는 구성 요소 이름으로 접두사입니다. 또한 모든 구성 요소가 $core- 접두사를 사용하여 상속하는 핵심 변수를 사용자 정의 할 수도 있습니다.

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

프로젝트의 JavaScript Manifest 파일을 통해 :

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