مرجع API

إليك العقد الكامل لـ modal: كل ما يمكنك ربطه والاستماع إليه وإسقاطه وتنسيقه، مجموعاً في مكان واحد. اربط ما تحتاجه ونسّق ما تريده — إنه standalone وملائم للـ Signals.

المدخلات

اضبط modal عبر 14 مدخلات. اربطها مثل أي @Input في Angular.

الاسم	النوع	الافتراضي	الوصف
`animation`	`boolean`	—	إذا كانت true، سيُحرَّك فتح وإغلاق modal. الافتراضي: true
`backdrop`	`boolean \| "static"`	—	إذا كانت true، سيُنشأ عنصر الخلفية. بدلًا من ذلك، حدّد "static" لخلفية لا تغلق modal عند النقر. الافتراضي: true
`centered`	`boolean`	—	إذا كانت true، سيُتوسَّط modal رأسيًا. الافتراضي: false
`placement`	`HubModalPlacement`	—	يتحكم في موضع modal داخل منفذ العرض. الافتراضي: HubModalPlacement.Center
`keyboard`	`boolean`	—	إذا كانت true، سيُغلَق modal عند الضغط على مفتاح Escape. الافتراضي: true
`closeOnNavigation`	`boolean`	—	إذا كانت true، سيُغلَق modal عندما يتنقل المستخدم للخلف في سجل المتصفح (history.back()، زر الرجوع في المتصفح). الافتراضي: true
`size`	`"sm" \| "lg" \| "xl" \| string`	—	حجم نافذة modal
`windowClass`	`string`	—	فئة مخصصة لإلحاقها بنافذة modal
`backdropClass`	`string`	—	فئة مخصصة لإلحاقها بخلفية modal
`dismissSelector`	`string`	—	محدِّد مخصص للعناصر التي يمكنها تشغيل صرف نافذة modal. الافتراضي: "[data-dismiss=\"modal\"]"
`closeSelector`	`string`	—	محدِّد مخصص للعناصر التي يمكنها تشغيل إغلاق نافذة modal. الافتراضي: "[data-close=\"modal\"]"
`headerSelector`	`string`	—	محدِّد مخصص لعنصر رأس نافذة modal
`footerSelector`	`string`	—	محدِّد مخصص لعنصر تذييل نافذة modal
`data`	`any`	—	بيانات إضافية يلزم تمريرها إلى نافذة modal عند فتحها

المخرجات

لم يتم توثيق أي مخرجات بعد.

القوالب

اجعله خاصاً بك — 1 فتحات قوالب تتيح لك إسقاط ترميز مخصّص.

الاسم	الوصف	مثال
`Modal Template`	مرجع قالب يمكن تمريره إلى خدمة modal	`<ng-template #modalTemplate let-close="close" let-dismiss="dismiss"> <div class="modal-header"> <h4 class="modal-title">Modal Title</h4> </div> <div class="modal-body"> Modal content goes here </div> <div class="modal-footer"> <button class="btn btn-secondary" (click)="dismiss()">Cancel</button> <button class="btn btn-primary" (click)="close('result')">OK</button> </div> </ng-template>`

متغيّرات CSS

نسّق كل بكسل عبر 17 متغيّرات CSS. تجاوزها عند :root أو حدّد نطاقها على غلاف.

متغيرات الـ modal الأساسية

متغيرات التنسيق الأساسية لبنية الـ modal وتموضعه

المتغيّر	الافتراضي	النوع	الوصف
`--bs-modal-zindex`	`1055`	number	Z-index الخاص بـ modal
`--bs-modal-width`	`500px`	length	العرض الافتراضي لـ modal
`--bs-modal-padding`	`1rem`	length	الحشو حول محتوى modal
`--bs-modal-margin`	`0.5rem`	length	الهامش حول مربع حوار modal

مظهر الـ modal

متغيرات تتحكّم في ألوان الـ modal وحدوده وتأثيراته البصرية

المتغيّر	الافتراضي	النوع	الوصف
`--bs-modal-color`	`var(--bs-body-color)`	color	لون نص محتوى modal
`--bs-modal-bg`	`var(--bs-body-bg)`	color	لون خلفية محتوى modal
`--bs-modal-border-color`	`var(--bs-border-color-translucent)`	color	لون حد modal
`--bs-modal-border-width`	`var(--bs-border-width)`	border	عرض حد modal
`--bs-modal-border-radius`	`var(--bs-border-radius-lg)`	border	نصف قطر حد modal
`--bs-modal-box-shadow`	`0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)`	shadow	ظل صندوق modal

رأس الـ modal

متغيرات تنسيق لقسم رأس الـ modal

المتغيّر	الافتراضي	النوع	الوصف
`--bs-modal-header-padding-x`	`1rem`	length	الحشو الأفقي لرأس modal
`--bs-modal-header-padding-y`	`1rem`	length	الحشو الرأسي لرأس modal
`--bs-modal-header-border-color`	`var(--bs-border-color)`	color	لون حد رأس modal
`--bs-modal-header-border-width`	`0 0 var(--bs-border-width) 0`	border	عرض حد رأس modal

تذييل الـ modal

متغيرات تنسيق لقسم تذييل الـ modal

المتغيّر	الافتراضي	النوع	الوصف
`--bs-modal-footer-gap`	`0.5rem`	length	الفجوة بين العناصر في تذييل modal
`--bs-modal-footer-border-color`	`var(--bs-border-color)`	color	لون حد تذييل modal
`--bs-modal-footer-border-width`	`var(--bs-border-width) 0 0 0`	border	عرض حد تذييل modal

التنسيق والسمات

لم يتم توثيق أي أمثلة تنسيق بعد. سيتضمّن هذا القسم وصفات التخصيص وأمثلة السمات.