الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

# vue3-bootstrap-5 modal modal modonn

عرض مباشر

https://florianbgt.github.io/vue3-bootstrap5-modal/

التبعيات:

يتطلب هذا المكون تثبيت Bootstrap 5 و Popper 

 npm install bootstrap@next
npm install @popperjs/core

يمكنك بعد ذلك تضمينهم في ملف main.js الخاص بك: 

 import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap'

إعداد المكون:

يمكنك استيراده Globaly في ملف main.js الخاص بك: 

 import Modal form 'path to file/Modal.vue'
...
app.component('Modal', Modal);

أو يمكنك استيراده المحلي في كل مكون عندما تحتاجه: 

 import Modal from 'path to file/Modal.vue'

بمجرد الاستيراد ، يمكنك استخدام المكون على النحو التالي: 

 <Modal v-model="modal" header="Modal">
  <p>This modal have to be closed from the parent</p>
  <p>This modal will be close from the parent in 5 seconds</p>
</Modal>

استخدام المكون:

المكون المشروط يأخذ 5 الدعائم:

  • ModelValue (منطقية ، مطلوبة): لنموذج V المكون
  • قابلة للإغلاق (منطقية): السماح بإغلاق الوسائط باستخدام زر إغلاق أو خلفية انقر فوق
  • رأس (سلسلة): محتوى رأس الوسيط
  • الحاوية (سلسلة): لكل افتراضي ، يتم تمرير فئة Bootstrap "الحاوية" إلى المكون. إذا تم تعيين هذا الدعامة على "SM" ، فسيتم إضافة فئة "حاوية الحاوية"
  • Max-Width (سلسلة): أقصى عرض للوسائط. يمكن أن يكون ٪ ، px ...
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل