مرجع API

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

المدخلات

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

الاسم	النوع	الافتراضي	الوصف
`animation`	`boolean`	—	إذا كانت true، سيُحرَّك فتح وإغلاق portal. الافتراضي: true
`ariaLabelledBy`	`string`	—	قيمة السمة `aria-labelledby` لضبطها على نافذة portal
`ariaDescribedBy`	`string`	—	قيمة السمة `aria-describedby` لضبطها على نافذة portal
`beforeDismiss`	`() => boolean \| Promise<boolean>`	—	دالة استدعاء قبل صرف portal مباشرة. أرجِع false لمنع الصرف.
`container`	`string \| HTMLElement`	—	محدِّد يعيّن العنصر الذي يجب إلحاق جميع نوافذ portal الجديدة به. إذا لم يُحدَّد، سيكون `body`.
`injector`	`Injector`	—	`Injector` المراد استخدامه لمحتوى portal لتفعيل حقن الاعتماديات.
`keyboard`	`boolean`	—	إذا كانت true، سيُغلَق portal عند الضغط على مفتاح Escape. الافتراضي: true
`scrollable`	`boolean`	—	محتوى portal قابل للتمرير (false افتراضيًا).
`windowClass`	`string`	—	فئة مخصصة لإلحاقها بنافذة portal للتنسيق والتموضع المخصصين.
`portalDialogClass`	`string`	—	فئة مخصصة لإلحاقها بحاوية مربع حوار portal.
`portalContentClass`	`string`	—	فئة مخصصة لإلحاقها بغلاف محتوى portal.
`headerSelector`	`string`	—	محدِّد مخصص لعنصر رأس نافذة portal. مفيد لاستهداف أقسام portal محددة.
`footerSelector`	`string`	—	محدِّد مخصص لعنصر تذييل نافذة portal. مفيد لاستهداف أقسام portal محددة.
`dismissSelector`	`string`	—	محدِّد مخصص للعناصر التي يمكنها تشغيل صرف نافذة portal. الافتراضي: `[data-dismiss="portal"]`
`closeSelector`	`string`	—	محدِّد مخصص للعناصر التي يمكنها تشغيل إغلاق نافذة portal. الافتراضي: `[data-close="portal"]`

المخرجات

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

القوالب

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

الاسم	الوصف	مثال
`Portal Template`	مرجع قالب يمكن تمريره إلى خدمة HubPortal للعرض الديناميكي	`<ng-template #portalTemplate> <div class="portal-content"> <div class="portal-header"> <h4>Portal Title</h4> <button data-dismiss="portal">×</button> </div> <div class="portal-body"> Portal content goes here </div> <div class="portal-footer"> <button data-dismiss="portal">Cancel</button> <button data-close="portal">OK</button> </div> </div> </ng-template> <!-- Open the portal --> <button (click)="portal.open(portalTemplate)">Open Portal</button>`

متغيّرات CSS

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

متغيرات Portal الأساسية

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

المتغيّر	الافتراضي	النوع	الوصف
`--portal-zindex`	`1050`	number	Z-index الخاص بطبقة تراكب portal
`--portal-padding`	`1rem`	length	الحشو الافتراضي لمحتوى portal
`--portal-margin`	`0.5rem`	length	الهامش حول مربع حوار portal

مظهر Portal

متغيّرات تتحكم في ألوان portal وحدوده وتأثيراته المرئية

المتغيّر	الافتراضي	النوع	الوصف
`--portal-bg`	`#ffffff`	color	لون خلفية محتوى portal
`--portal-color`	`#212529`	color	لون نص محتوى portal
`--portal-border-color`	`#dee2e6`	color	لون حد portal
`--portal-border-width`	`1px`	border	عرض حد portal
`--portal-border-radius`	`0.375rem`	border	نصف قطر زوايا portal
`--portal-box-shadow`	`0 0.5rem 1rem rgba(0, 0, 0, 0.15)`	shadow	ظل صندوق لارتفاع portal

رأس وتذييل Portal

متغيّرات التنسيق لقسمي رأس وتذييل portal

المتغيّر	الافتراضي	النوع	الوصف
`--portal-header-padding`	`1rem`	length	حشو رأس portal
`--portal-header-border-color`	`#dee2e6`	color	لون حد رأس portal
`--portal-footer-padding`	`1rem`	length	حشو تذييل portal
`--portal-footer-border-color`	`#dee2e6`	color	لون حد تذييل portal

الخلفية والتراكب

متغيّرات تتحكم في مظهر الخلفية وسلوكها

المتغيّر	الافتراضي	النوع	الوصف
`--portal-backdrop-bg`	`rgba(0, 0, 0, 0.5)`	color	لون خلفية portal الخلفية
`--portal-backdrop-zindex`	`1040`	number	Z-index الخاص بالخلفية (يجب أن يكون أقل من Z-index الخاص بـ portal)

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

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