html sheet element

عنصر ورقة HTML

HTML عنصر مخصص لإنشاء أوراق. يتم عرضها كورقة قاع على الهاتف المحمول وورقة مركزية على سطح المكتب.

سمات

• يوجد مقبض في الجزء العلوي من الورقة التي يمكن استخدامها لفتح أو إغلاق الورقة
• يمكن إغلاق الورقة باستخدام زر في رأس الورقة ، أو باستخدام مفتاح Esc ، أو بالنقر فوق الورقة السفلية
  • هذا السلوك قابل للتكوين. يمكنك إيقاف تشغيل Esc أو النقر خارج الورقة عندما تريد.
• يشبه API العنصر <dialog>
  • يدعم النماذج بداخلها
  • يستخدم أسماء الطرق المألوفة ونفس أسماء الأحداث
• هناك العديد من خيارات التخصيص

تثبيت

يمكنك تثبيت هذه المكتبة من سجل NPM:

npm install @ivteplo/html-sheet-element

أو يمكنك استيراده بشكل ديناميكي من CDN:

 const { SheetElement } = await import ( "https://unpkg.com/@ivteplo/[email protected]/build/index.js" ) 

الاستخدام

قبل أن تتمكن من استخدام العنصر في HTML الخاص بك ، تحتاج إلى تحديد اسم علامة له باستخدام JavaScript:

 import { SheetElement } from "@ivteplo/html-sheet-element"

// You can choose another tag name instead of `ui-sheet`
customElements . define ( "ui-sheet" , SheetElement )

ثم يمكنك استخدام العلامة في HTML الخاص بك:

 < ui-sheet id =" sheet " >
  < p > Hello World! </ p >
</ ui-sheet >

لفتح ورقة ، اتصل بالطريقة showModal للعنصر:

 const sheet = document . querySelector ( "sheet" )
sheet . showModal ( ) 

وثائق API

يمكنك العثور على وثائق API هنا.

تطوير

المتطلبات الأساسية

تحتاج إلى الحصول على git و node.js و deno وأي متصفح مثبت.

يثبت

1. افتح المحطة الخاصة بك

2. استنساخ هذا المستودع

   git clone https://github.com/ivteplo/html-sheet-element/

3. انتقل إلى الدليل المستنسخ

    cd html-sheet-element

4. تثبيت التبعيات

   npm install

5. ابدأ خادم التطوير

   npm run dev

6. بناء المكتبة

   npm run build

7. بناء وثائق API

   npm run docs:api

8. قرصنة سعيدة؟