ดาวน์โหลด vrembem - ดาวน์โหลดซอร์สโค้ด vrembem

vrembem

ส่วนประกอบของบุคคลที่สาม

v3.0.20

ดาวน์โหลด

Vrembem

ไลบรารีส่วนประกอบตามวิธีการ BEM

เกี่ยวกับ

Vrembem เป็นไลบรารีส่วนประกอบส่วนหน้าที่เขียนขึ้นเพื่อให้มีรูปแบบเว็บอินเตอร์เฟสทั่วไปที่มีอยู่ สิ่งนี้ช่วยให้นักพัฒนาและนักออกแบบสามารถใช้ส่วนประกอบที่มีประสิทธิภาพในโครงการเว็บของพวกเขาในขณะที่ทำให้พวกเขามีความยืดหยุ่นและปรับแต่งได้ผ่านการใช้วิธี BEM และภาษาส่วนขยาย SASS CSS

พื้นที่เก็บข้อมูล Vrembem นี้ได้รับการจัดการเป็น monorepo ที่มีส่วนประกอบที่มีอยู่ทั้งหมด รวมส่วนประกอบทั้งหมดโดยใช้แพ็คเกจ Vrembem All-in-One ที่สะดวก

ลิงค์ด่วน

เอกสาร
ส่วนประกอบ
การเปลี่ยนแปลง

เริ่มต้น

ใช้ 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 >

ดู example.html สำหรับการสาธิตการทำงานที่ครอบคลุมมากขึ้นในการใช้ vrembem ผ่าน CDN

การอ้างอิง CDN

VREMBEM แพ็คเกจการรวมกลุ่มทั้งหมดในสองพื้นที่ dist มีการรวมกลุ่มพร้อมการผลิตทั้งหมดและ dev มีรุ่นที่ไม่บีบอัด (ทั้งหมดใช้ชื่อไฟล์เดียวกัน) ส่วนประกอบที่จัดส่งด้วย JavaScript รวม 4 ชุดรวม:

พิมพ์	ส่วนขยาย	คำอธิบาย
umd	`.umd.js`	ชุดคำจำกัดความของโมดูลสากลที่สามารถใช้โดยตรงในเบราว์เซอร์ผ่านแท็ก `<script>` นี่คือไฟล์เริ่มต้นจาก `pkg.unpkg` ชี้ไปที่ `scripts.umd.js`
ESM	`.esm.js`	การรวมกลุ่มโมดูล ES ที่มีไว้สำหรับใช้กับ Bundlers สมัยใหม่เช่น Webpack 2 หรือ Rollup นี่คือไฟล์เริ่มต้นจาก `pkg.module` ชี้ไปที่ `scripts.esm.js`
CJS	`.js`	กลุ่ม CommonJS ที่มีไว้สำหรับ Bundlers รุ่นเก่าเช่น Browserify หรือ Webpack 1 นี่คือไฟล์เริ่มต้นจาก `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 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 ( ) ;

อีกทางเลือกหนึ่งคุณสามารถใช้ตัวเลือก autoInit เพื่อเริ่มต้นอัตโนมัติและไม่เลือกการบันทึกอินสแตนซ์ไปยังตัวแปรหากไม่จำเป็นต้องใช้ API ที่ส่งคืนในภายหลัง

 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 แบบ All-in-One เดียว:

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