> ## 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.

# صف المقاييس

> محاذاة تسمية مقياس وقيمة منسقة مع تقدم اختياري.

## نظرة عامة

`MetricRow` يحاذي تسمية وأيقونة اختيارية وقيمة منسقة مسبقًا. تستخدم [ProgressRing](https://docs.twenty.com/ar/ui/primitives/feedback/progress-ring.md) الاختيارية التسمية المرئية بوصفها اسم إمكانية الوصول الخاص بها.

**Light**

[مثال على صف المقياس (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-metricrow--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[مثال على صف المقياس (dark)](https://storybook.twenty.com/iframe.html?id=ui-data-display-metricrow--display\&viewMode=story\&globals=colorScheme:dark)

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

## استخدام

```tsx theme={null}
import { MetricRow } from 'twenty-ui/components/data-display';
import { IconFiles } from 'twenty-ui/icon';

export const ImportMetric = () => (
  <MetricRow
    startIcon={<IconFiles size={14} />}
    value="75 of 100"
    progress={75}
  >
    Imported files
  </MetricRow>
);
```

مرر تسمية نصية غير فارغة كعناصر فرعية مطلوبة، والقيمة المنسقة عبر `value`. أضف `progress` عندما يحتوي المقياس على نسبة مئوية معروفة.

يتولى التطبيق مسؤولية الحسابات والوحدات وتنسيق الأرقام ومعنى المقياس. يقبل `progressColor` لون CSS للقوس المعبأ.

## قيم بدون تقدم

احذف `progress` لعرض قيمة عادية. تُعرض القيمة الرقمية صفر بالشكل `0`؛ ولا يُستبدل المحتوى مطلقًا بعنصر نائب. وفّر عنصرًا نائبًا خاصًا بك عندما لا تكون البيانات متاحة.

```tsx theme={null}
import { MetricRow } from 'twenty-ui/components/data-display';

export const CompletedMetric = () => (
  <MetricRow value={0}>Completed imports</MetricRow>
);
```

## التركيب وإمكانية الوصول

يقبل محتوى التسمية العُقد. يُسمّي النص المتاح الخاص به حلقة التقدّم عبر `aria-labelledby`، بما في ذلك النص المتداخل. وفّر تسمية مرئية ذات معنى. تُعرَض أيضًا قيمة سلسلة نصية غير فارغة كنص قيمة يمكن الوصول إليه. بالنسبة إلى محتوى القيمة المنسقة، وفّر `progressValueText` عندما لا تصف النسبة المئوية المقياس بالكامل. يتجاوز هذا النص القيمة الاحتياطية للسلسلة النصية. من دونه، يحتفظ المحتوى الآخر بنص قيمة النسبة المئوية للحلقة. يستخدم `progressValueText` الفارغ أيضًا النسبة المئوية، بما في ذلك عندما تكون `value` سلسلة نصية. العقدة الاختيارية `startIcon` للزينة. يتحكم المستدعي في أبعادها وحدّها.

```tsx theme={null}
import { MetricRow } from 'twenty-ui/components/data-display';
import { Text } from 'twenty-ui/primitives/typography';

export const FormattedStorageMetric = () => (
  <MetricRow
    value={<Text render={<bdi />}>12 / 20 GB</Text>}
    progress={60}
    progressValueText="12 of 20 gigabytes used"
  >
    <Text render={<strong />}>Storage</Text>
  </MetricRow>
);
```

استبدل `startIcon={IconDatabase}` بـ `startIcon={<IconDatabase size={14} />}`. تظل القيم منسقة مسبقًا بواسطة التطبيق.

تستهدف السمات الأصلية و`className` و`style` و`ref` الصف الخارجي. يمكن لـ `render` استبدال ذلك العنصر. يبقى التقدم خاضعًا للتحكم ومحصورًا بين 0 و100، مع سلوك الحركة المخفّضة نفسه المتبع في `ProgressRing`.

## الإزاحة

**children** `ReactNode` *required*

Label content whose accessible text also names the optional progress ring.

**className** `string`

CSS class applied to the row root.

**progress** `number`

Optional controlled progress from 0 to 100. Omitting it displays the value without a ring.

**progressColor** `string`

CSS color of the filled arc when progress is provided.

**progressValueText** `string`

Accessible value text for the progress ring. Nonempty text overrides the string value fallback; an empty string uses the ring percentage. Supply it when formatted content needs more context than a percentage.

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

Replaces the row root element while preserving its contents.

**startIcon** `ReactNode`

Decorative node content before the label. The caller controls icon geometry.

**style** `CSSProperties`

Inline styles applied to the row root.

**value** `ReactNode` *required*

Preformatted value displayed at the end of the row. Nonempty string values also supply the progress ring accessible value text.


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