> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# هيكل عظمي

> اعرض أشكال العناصر النائبة ذات النسق أثناء تحميل المحتوى.

## نظرة عامة

يوفر `Skeleton` شكل عنصر نائب بألوان النسق وتمييز متحرك. أنشئ الأشكال وفق تخطيط المحتوى الذي يتم تحميله. يمتلك التطبيق حالة التحميل والتخطيطات الخاصة بالميزات.

**Light**

[أشكال الهيكل العظمي (light)](https://storybook.twenty.com/iframe.html?id=ui-feedback-skeleton--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[أشكال الهيكل العظمي (dark)](https://storybook.twenty.com/iframe.html?id=ui-feedback-skeleton--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-feedback-skeleton--display)

## استخدام

```tsx theme={null}
import { Skeleton, SKELETON_HEIGHT_SIZES } from 'twenty-ui/primitives/feedback';
import { Text } from 'twenty-ui/primitives/typography';

export const LoadingProfile = () => (
  <Text render={<div />} style={{ display: 'flex', gap: 16 }}>
    <Skeleton width={40} height={40} borderRadius="50%" />
    <Text
      render={<div />}
      style={{ display: 'flex', flexDirection: 'column', gap: 8 }}
    >
      <Skeleton width={180} height={SKELETON_HEIGHT_SIZES.s} />
      <Skeleton width={120} height={SKELETON_HEIGHT_SIZES.xs} />
    </Text>
  </Text>
);
```

يُعرَض 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}` لعنصر نائب ثابت.

**Light**

[هيكل عظمي ثابت (light)](https://storybook.twenty.com/iframe.html?id=ui-feedback-skeleton--static\&viewMode=story\&globals=colorScheme:light)

**Dark**

[هيكل عظمي ثابت (dark)](https://storybook.twenty.com/iframe.html?id=ui-feedback-skeleton--static\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-feedback-skeleton--static)

## التركيب والسمة

تستهدف الخصائص الأصلية و`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` وسمة واجهة المستخدم.

## الإزاحة

**animated** `boolean` (default: true)

Animate the highlight by default. Reduced-motion preferences always disable animation.

**aria-hidden** `Booleanish`

Placeholders are decorative and hidden from assistive technology by default. The host owns loading announcements.

**baseColor** `BackgroundColor`

Placeholder background color. Defaults to the theme tertiary background.

**borderRadius** `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.

**className** `string`

CSS class merged with the placeholder class.

**height** `Height\<string | number\>`

Placeholder height in pixels or a CSS length. Defaults to the inherited font height.

**highlightColor** `BackgroundColor`

Animated highlight color. Defaults to the theme lighter transparent background.

**layout** `"block" | "inline"` (default: block)

`block` renders a block without a text node. `inline` sizes and aligns the placeholder like a line of text.

**ref** `Ref\<HTMLSpanElement\>`

Ref to the placeholder span, or the element supplied through render.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Element or render callback composed through Base UI useRender.

**style** `CSSProperties`

Native styles merged with the placeholder dimensions and colors. Explicit styles win.

**width** `Width\<string | number\>`

Placeholder width in pixels or a CSS length. Defaults to the available width and never exceeds the container.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.