مرجع API

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

المدخلات

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

المخرجات

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

القوالب

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

متغيّرات CSS

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

تخطيط الأعمدة وبنيتها

تحكَّم في التخطيط العام والتباعد وبنية أعمدة board

المتغيّر	الافتراضي	النوع	الوصف
`--hub-column-bg`	`#f8f9fa`	color	لون خلفية أعمدة board `#ffffff#f8f9fatransparent`
`--hub-column-color`	`#212529`	color	لون النص داخل أعمدة board `#333333rgb(33, 37, 41)var(--bs-body-color)`
`--hub-column-border-color`	`#dee2e6`	color	لون الحدود حول أعمدة board `#e9ecefvar(--bs-border-color)transparent`
`--hub-column-border-width`	`1px`	length	عرض حدود العمود `02px0.5rem`
`--hub-column-border-radius`	`0.375rem`	length	نصف قطر استدارة زوايا العمود `00.5rem1rem16px`
`--hub-column-gap`	`1rem`	length	التباعد بين الأعمدة `0.5rem1.5rem2rem`
`--hub-column-padding`	`1rem`	length	الحشو الداخلي ضمن الأعمدة `0.75rem1.25rem1.5rem`

رؤوس الأعمدة وتذييلاتها

خصِّص مظهر رؤوس الأعمدة وتذييلاتها

المتغيّر	الافتراضي	النوع	الوصف
`--hub-column-cap-bg`	`#ffffff`	color	لون خلفية رؤوس الأعمدة `#f8f9favar(--bs-light)transparent`
`--hub-column-cap-color`	`#212529`	color	لون نص رؤوس الأعمدة `#495057var(--bs-dark)#333`
`--hub-column-cap-padding`	`0.75rem 1rem`	length	الحشو داخل رؤوس الأعمدة `0.5rem 1rem1rem 1.25rem1rem`
`--hub-column-cap-border-bottom`	`1px solid #dee2e6`	border	الحد السفلي لرؤوس الأعمدة `2px solid #dee2e6none1px dashed #ccc`

تنسيق البطاقات

خصِّص مظهر البطاقات الفردية ضمن الأعمدة

المتغيّر	الافتراضي	النوع	الوصف
`--hub-card-bg`	`#ffffff`	color	لون خلفية البطاقات `#f8f9fargba(255,255,255,0.9)transparent`
`--hub-card-color`	`#212529`	color	لون نص البطاقات `#333333var(--bs-body-color)#495057`
`--hub-card-border`	`1px solid #dee2e6`	border	الحدود حول البطاقات `2px solid #dee2e6none1px dashed #ccc`
`--hub-card-border-radius`	`0.375rem`	length	نصف قطر استدارة زوايا البطاقة `00.5rem0.75rem12px`
`--hub-card-padding`	`1rem`	length	الحشو الداخلي ضمن البطاقات `0.75rem1.25rem1rem 1.5rem`
`--hub-card-margin`	`0.5rem 0`	length	الهامش حول البطاقات `0.25rem 00.75rem 01rem 0`
`--hub-card-shadow`	`0 2px 4px rgba(0,0,0,0.1)`	shadow	ظل الصندوق للبطاقات `0 1px 3px rgba(0,0,0,0.1)0 4px 8px rgba(0,0,0,0.15)none`

حالات السحب والإفلات

التغذية الراجعة البصرية والحالات لتفاعلات السحب والإفلات

المتغيّر	الافتراضي	النوع	الوصف
`--hub-card-hover-shadow`	`0 4px 8px rgba(0,0,0,0.15)`	shadow	ظل محسَّن عند المرور فوق البطاقات `0 6px 12px rgba(0,0,0,0.2)0 2px 6px rgba(0,0,0,0.1)none`
`--hub-card-dragging-opacity`	`0.5`	number	شفافية البطاقات أثناء سحبها `0.30.70.8`
`--hub-drop-zone-bg`	`rgba(0,123,255,0.1)`	color	لون خلفية مناطق الإفلات النشطة `rgba(40,167,69,0.1)rgba(255,193,7,0.1)transparent`
`--hub-drop-zone-border`	`2px dashed #007bff`	border	نمط الحدود لمناطق الإفلات النشطة `3px solid #28a7451px dotted #ffc107none`

الحركات والانتقالات

تحكَّم في التوقيت والتخفيف للحركات والانتقالات

المتغيّر	الافتراضي	النوع	الوصف
`--hub-transition-duration`	`0.2s`	string	مدة الانتقالات القياسية `0.15s0.3s0.4s`
`--hub-transition-easing`	`ease-in-out`	string	دالة التخفيف للانتقالات `easelinearcubic-bezier(0.4, 0, 0.2, 1)`

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

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