نظرة عامة
يوفرSkeleton شكل عنصر نائب بألوان النسق وتمييز متحرك. أنشئ الأشكال وفق تخطيط المحتوى الذي يتم تحميله. يمتلك التطبيق حالة التحميل والتخطيطات الخاصة بالميزات.
استخدام
layout="inline" لوضع عنصر نائب داخل سطر من النص.
تستخدم الأبعاد الرقمية وحدات البكسل. أطوال CSS، مثل النسب المئوية وem، مدعومة أيضًا. من دون أبعاد، يملأ العنصر النائب العرض المتاح ويستخدم ارتفاع الخط الموروث. استخدم أبعادًا متساوية وborderRadius="50%" لدائرة.
يوفر SKELETON_HEIGHT_SIZES ارتفاعات مشتركة لـ xs (13px) وs (16px) وm (24px) وl (32px) وxl (40px). احتفظ بالأبعاد الخاصة بالتخطيط في التطبيق.
يعرض كل Skeleton عنصرًا نائبًا واحدًا. احتفظ بالأسطر المتكررة وتباعد أسطر النص ومناطق التحميل في مكونات التطبيق التي تغلف العنصر البدائي.
الحركة وإمكانية الوصول
تُعد الهياكل العظمية زخرفية ولديهاaria-hidden="true" افتراضيًا. احتفظ بإعلانات التحميل في منطقة حالة يملكها المضيف بدلًا من الإعلان عن كل شكل. لا يقبل Skeleton عناصر فرعية.
ينتقل التمييز من اليسار إلى اليمين في حلقة مدتها 1.5 ثانية بتأثير تسارع وتباطؤ، ويُخفى عندما يفضّل المستخدم تقليل الحركة. مرر animated={false} لعنصر نائب ثابت.
التركيب والسمة
تستهدف الخصائص الأصلية وclassName وstyle وref امتداد العنصر النائب. استخدم render لتركيب عنصر آخر. تتجاوز الأنماط الأصلية الصريحة خصائص الأبعاد واللون.
تُضبط الألوان الأساسية وألوان التمييز افتراضيًا على الخلفية الثالثة للسمة والخلفية الشفافة الفاتحة. استخدم baseColor وhighlightColor وborderRadius لتجاوزها. تبقى الزوايا مستديرة، بما في ذلك عندما تستخدم السمة أشكال سكويركل. يستخدم نصف القطر الافتراضي رمز السمة smRound (4px). مرّر themeCssVariables.border.radius.mdRound من twenty-ui/theme للحصول على زوايا بمقدار 8px. تظل أنصاف الأقطار المخصصة بالبكسل وCSS مدعومة، بما في ذلك borderRadius={80} لكبسولة ضيقة وborderRadius="50%" لدائرة. لا حاجة إلى موفر أو استيراد ورقة أنماط خاص بالهيكل العظمي بعد تحميل twenty-ui/style.css وسمة واجهة المستخدم.
الإزاحة
boolean
افتراضي:"true"
Animate the highlight by default. Reduced-motion preferences always disable animation.
Placeholders are decorative and hidden from assistive technology by default. The host owns loading announcements.
BackgroundColor
Placeholder background color. Defaults to the theme tertiary background.
BorderRadius<string | number>
Round corner radius in pixels or a CSS length. Defaults to the 4px smRound theme token. Use mdRound for 8px corners or a custom radius for circles and capsules.
string
CSS class merged with the placeholder class.
Height<string | number>
Placeholder height in pixels or a CSS length. Defaults to the inherited font height.
BackgroundColor
Animated highlight color. Defaults to the theme lighter transparent background.
"block" | "inline"
افتراضي:"block"
block renders a block without a text node. inline sizes and aligns the placeholder like a line of text.Ref<HTMLSpanElement>
Ref to the placeholder span, or the element supplied through render.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Element or render callback composed through Base UI useRender.
CSSProperties
Native styles merged with the placeholder dimensions and colors. Explicit styles win.
Width<string | number>
Placeholder width in pixels or a CSS length. Defaults to the available width and never exceeds the container.