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

# رقاقة

> اعرض محتوى مضغوطًا مملوكًا للمستدعي مع خانات اختيارية في البداية والنهاية.

## نظرة عامة

استخدم `Chip` للإشارات المضغوطة إلى الأشخاص أو السجلات أو الملفات. استخدم [علامة](https://docs.twenty.com/ar/ui/primitives/data-display/tag.md) للفئات الملوّنة و[حالة](https://docs.twenty.com/ar/ui/primitives/data-display/status.md) لحالات سير العمل.

**Light**

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

**Dark**

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

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

## استخدام

```tsx theme={null}
import { Avatar, Chip } from 'twenty-ui/primitives/data-display';

export const AssigneeChip = () => (
  <Chip
    variant="soft"
    startElement={
      <Avatar name="Jane" size="sm" shape="circle" imageProps={{ alt: '' }} />
    }
  >
    Jane
  </Chip>
);
```

تقبل العناصر التابعة نصًا أو عُقدًا. يقبل `startElement` و`endElement` صورًا رمزية أو أيقونات أو محتوى آخر. يضيف `endElementDivider` فاصلاً قبل المحتوى اللاحق. الشريحة الافتراضية هي `div`؛ ويمكن أن تحتوي فتحاتها على إجراء منفصل بينما تظل الشريحة نفسها للعرض فقط.

لا تُدرج Chip تسمية أبدًا. وفّر نصًا احتياطيًا مترجمًا من تطبيقك عند الحاجة. احذف العناصر الفرعية للمحتوى المُنشأ بالكامل من الفتحات. تحتاج الشريحة التفاعلية التي تحتوي على أيقونة فقط إلى اسم متاح يوفّره المستدعي.

## المظهر

**Light**

[أنواع وأحجام الشرائح (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-chip--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[أنواع وأحجام الشرائح (dark)](https://storybook.twenty.com/iframe.html?id=ui-data-display-chip--catalog\&viewMode=story\&globals=colorScheme:dark)

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

يقبل `size` القيمتين `sm` أو `md`، بارتفاعين إجماليين قدرهما 20px و24px. يقبل `variant` القيم `ghost` أو `soft` أو `solid` أو `plain` أو `outline`؛ والقيمة `ghost` هي الافتراضية. لا تحتوي شرائح plain على تعبئة في حالة السكون أو حشو بادئ. تحتوي شرائح outline على حد قوي بسماكة 1px، وتعبئة أخف في حالة السكون، وحشوة داخلية بمقدار 8px على كل جانب، مع الارتفاع الإجمالي نفسه للمتغيرات الأخرى. تستخدم شرائح plain وoutline القابلة للنقر خلفيات ghost عند التمرير والضغط، ومؤشرًا على شكل يد، وحلقة تركيز. استخدم `shape="round"` لشكل كبسولة، و`weight="medium"` للتأكيد، و`color="secondary"` للنص الثانوي.

## الأزرار والروابط

```tsx theme={null}
import { Avatar, Chip } from 'twenty-ui/primitives/data-display';

type AssigneeActionProps = {
  onOpenAssignee: () => void;
  disabled?: boolean;
};

export const AssigneeAction = ({
  onOpenAssignee,
  disabled,
}: AssigneeActionProps) => (
  <Chip
    render={<button type="button" disabled={disabled} />}
    onClick={onOpenAssignee}
    aria-label="Open Jane's record"
    startElement={
      <Avatar name="Jane" size="sm" shape="circle" imageProps={{ alt: '' }} />
    }
  >
    Jane
  </Chip>
);
```

يؤدي توفير `onClick` إلى الإبقاء على `div` الافتراضي. استخدم `render` لتكوين زر أصلي صريح، أو رابط ارتساء، أو رابط موجّه، أو عنصر مناسب آخر. تصل السمات الأصلية والمعالجات والأنماط ومرجع الجذر إلى ذلك العنصر. يوفر الزر الأصلي التفعيل بلوحة المفاتيح وسلوك التعطيل. تتعرف Chip على حالة التعطيل الأصلية و`aria-disabled` للمظهر؛ ولا يمنع `aria-disabled` وحده التفعيل.

يتحكم `clickable` في مظهر التمرير والمؤشر، ويكون افتراضيًا بحسب ما إذا كان `onClick` مُوفّرًا. عيّنه صراحةً لرابط من دون معالج نقر. لا تُضمّن أزرارًا أو روابط داخل شريحة تفاعلية بحد ذاتها.

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

export const DocumentationChip = () => (
  <Chip
    variant="outline"
    shape="round"
    render={<a href="https://twenty.com/developers" />}
    clickable
  >
    Documentation
  </Chip>
);
```

يبقى نص عنوان URL نصًا عاديًا. تنتمي الروابط المقصودة إلى محتوى المستدعي أو إلى تكوين الجذر الصريح.

## الاقتطاع وتلميحات الأدوات

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

export const FileChip = () => (
  <Chip variant="soft" maxWidth={180} tooltipPlace="top">
    Quarterly customer research.pdf
  </Chip>
);
```

`maxWidth` يقيّد عرض الشريحة المعروضة بالبكسل، بما في ذلك الحشو وأي حد للمخطط الخارجي. ينطبق الحد نفسه على الشرائح العادية ذات الحشوة غير المتماثلة. يُقتطع المحتوى بعلامة حذف افتراضيًا؛ ويترك `truncate={false}` المحتوى دون قيود بسبب الاقتطاع. توفر العناصر الفرعية النصية نص تلميح الأداة الخاص بها. عيّن `tooltipContent` للنص المخصص أو محتوى العقدة، و`tooltipDelay` لتأخير الفتح، و`isTooltipMultiline` للحفاظ على فواصل الأسطر. يُفعّل `alwaysShowTooltip` أيضًا تلميح الأداة عندما يكون المحتوى ملائمًا. تتبع هذه الخيارات [OverflowingTextWithTooltip](https://docs.twenty.com/ar/ui/primitives/typography/overflowing-text-with-tooltip.md). أبقِ المعلومات الأساسية متاحة دون الاعتماد على التمرير.

## الترحيل

استبدل `emptyLabel` بعناصر فرعية احتياطية يوفرها المستدعي، واستبدل `forceEmptyText` أو `isLabelHidden` بعناصر فرعية محذوفة. احتفظ بالنصوص الاحتياطية المترجمة للمنتج في التطبيق. استبدل `tooltipLabel` بـ `tooltipContent`. انقل `disabled` إلى العنصر التفاعلي الصريح وأزل `nativeButton`. أضف زرًا أصليًا أو رابطًا عبر `render` حيثما كانت الشريحة تعتمد سابقًا على `onClick` لاختيار عنصرها.

استبدل تجاوزات الحشوة البادئة بـ `variant="plain"`. أبقِ `clickable` مفعّلًا للروابط والأزرار الأصلية التي تحتاج إلى تغذية راجعة عند التمرير والضغط.

## الخصائص

تُنشأ الأنواع والقيم الافتراضية من أنواع المكونات العامة. تُقبل أيضًا السمات الأصلية ومعالجات الأحداث.

**alwaysShowTooltip** `boolean` (default: false)

Shows the content tooltip even when the content is not truncated.

**children** `ReactNode`

Caller-owned content. Missing or empty children add no fallback label.

**clickable** `boolean` (default: isDefined(onClick))

Enables hover and pointer styling. Defaults to whether `onClick` is supplied; does not change the default div or add keyboard behavior.

**color** `"primary" | "secondary"` (default: primary)

Primary or secondary text color.

**endElement** `ReactNode`

Content after the label. Avoid interactive content when the chip itself is a button or link.

**endElementDivider** `boolean` (default: false)

Adds a divider before `endElement` when that slot has content.

**isTooltipMultiline** `boolean`

Preserves line breaks in the tooltip text.

**maxWidth** `number`

Maximum rendered chip width in pixels, including its leading and trailing padding and any outline border.

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

Replaces the default div. Compose a native button or link explicitly; that owner supplies disabled and native interaction behavior.

**shape** `"round" | "square"` (default: square)

Square or round corners.

**size** `"md" | "sm"` (default: sm)

Visual size of the chip.

**startElement** `ReactNode`

Content before the label, such as an avatar or icon.

**tooltipContent** `string`

Tooltip text. Defaults to string children. Supply text explicitly for node content.

**tooltipDelay** `number`

Delay in milliseconds before the tooltip opens.

**tooltipPlace** `"bottom" | "inline-end" | "inline-start" | "left" | "right" | "top"`

Position of the content tooltip.

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

Truncates overflowing content with an ellipsis. Defaults to true.

**variant** `"ghost" | "outline" | "plain" | "soft" | "solid"` (default: ghost)

Background and border treatment. Outline has a strong border, lighter resting fill and 8px inline padding. Plain has no resting fill or leading padding. Both use ghost hover and pressed feedback when clickable.

**weight** `"medium" | "regular"` (default: regular)

Font weight of the content.


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