مرجع API

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

المدخلات

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

الاسم	النوع	الافتراضي	الوصف
`preset`	`string \| null`	`null`	اسم preset مُجمَّع أو مُسجَّل. عند توفيره، يحلّ المكوّن الإعدادات الافتراضية والمتغيّرات وتركيب الأسماء البديلة من سجل preset.
`template`	`string \| HubSkeletonTemplateDefinition \| null`	`null`	سلسلة DSL مضمّنة بأسلوب Emmet أو كائن تعريف قالب مع تجاوزات اختيارية لنقاط التوقف المتجاوبة.
`params`	`HubSkeletonParams`	`{}`	معاملات قابلة للتسلسل تُدرَج في العناصر النائبة `{{param}}` قبل التحليل وتوسيع preset.
`variant`	`string \| null`	`null`	اسم متغيّر preset اختياري، مثل `compact`، يُستخدم لتبديل إعدادات القالب الافتراضية أو تجاوز قالب preset الأساسي.
`animated`	`boolean`	`true`	يفعّل أو يعطّل حركة الوميض مع الحفاظ على تخطيط العنصر النائب ذاته.
`appearance`	`'default' \| 'subtle' \| 'contrast'`	`'default'`	يغيّر الكثافة المرئية لأسطح skeleton دون تغيير التخطيط المحلول.
`ariaLabel`	`string`	`'Loading placeholder'`	تسمية متاحة للوصول تُطبَّق على عنصر الحاوية للتقنيات المساعِدة.

المخرجات

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

القوالب

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

الاسم	الوصف	مثال
`Bundled Presets`	أسماء preset المتاحة في الفهرس الأولي: card، list-item، table-row، detail-view، form-section، dashboard-widget، stat-card، chart-panel، profile-summary، master-detail، kanban-card، feed-item، search-result، table-toolbar، filter-bar و empty-state-skeleton.	`<hub-skeleton preset="table-row" [params]="{ columns: 4 }"></hub-skeleton>`
`Preset DSL`	صيغة سلسلة مدمجة تدعم أسماء العقد، والمُعدِّلات، وتركيب الأشقّاء بـ `+`، وتداخل الأبناء بـ `>`، والتكرار بـ `*N`.	`<hub-skeleton template="stack(gap:12)>circle(size:40)+stack(gap:8)>line(width:42%)+line(width:72%)"></hub-skeleton>`
`provideHubSkeletonPresets`	يسجّل presets مخصصة في حقن اعتماديات Angular بحيث يمكن لأي مكوّن عرضها بالاسم.	`providers: [provideHubSkeletonPresets([{ name: 'profile-card', template: 'stack(gap:16)>circle(size:72)+line(width:48%)' }])]`

متغيّرات CSS

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

tokens مرئية

خصائص CSS المخصصة الأساسية التي يكشفها المكوّن المضيف.

المتغيّر	الافتراضي	النوع	الوصف
`--hub-skeleton-bg`	`rgba(148, 163, 184, 0.18)`	color	لون العنصر النائب الأساسي المستخدم لأسطح skeleton المرئية.
`--hub-skeleton-highlight`	`rgba(255, 255, 255, 0.52)`	color	لون التمييز المستخدم بواسطة تدرّج الوميض.
`--hub-skeleton-radius`	`12px`	length	نصف قطر الحد الافتراضي لعقد block و line.
`--hub-skeleton-gap`	`12px`	length	الفجوة الافتراضية المستخدمة بواسطة عقد stack و grid عند عدم تجاوزها بالمُعدِّلات.
`--hub-skeleton-animation-duration`	`1.35s`	transition	مدة دورة حركة الوميض.

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

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