تنزيل vrembem - تنزيل رمز المصدر vrembem

vrembem

مكونات الطرف الثالث

v3.0.20

تنزيل

فريم

مكتبة مكونة على أساس منهجية BEM.

عن

Vrembem هي مكتبة مكونة في الواجهة الأمامية مكتوبة لإتاحة أنماط واجهة الويب الشائعة. يتيح ذلك للمطورين والمصممين تنفيذ مكونات قوية في مشاريع الويب الخاصة بهم مع إبقائها مرنة وقابلة للتخصيص من خلال استخدام منهجية BEM ولغة تمديد SASS CSS.

تتم إدارة مستودع VRembem هذا باعتباره monorepo يحتوي على جميع المكونات المتاحة. قم بتضمين جميع المكونات باستخدام حزمة VREMBEM ملائمة.

روابط سريعة

الوثائق
عناصر
Changelog

ابدء

باستخدام 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 المخصصة للاستخدام مع الحزم الحديثة مثل WebPack 2 أو Rollup. هذا هو الملف الافتراضي من `pkg.module` يشير إلى `scripts.esm.js` .
CJS	`.js`	حزم CommonJS المخصصة للحزم القديمة مثل 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 الخاص بـ Build الخاص بك:

 @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 للتهيئة تلقائيًا وحذفه اختياريًا حفظ المثيل إلى متغير إذا لم يكن هناك حاجة إلى واجهة برمجة التطبيقات التي تم إرجاعها لاحقًا.

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

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