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

# قسم

> جمّع المحتوى مع عنوان ووصف داعم وإجراء اختياري.

## نظرة عامة

`Section.Root` يجمع المحتوى ذي الصلة. يجمع `Section.Header` بين [العنوان](https://docs.twenty.com/ar/ui/primitives/typography/heading.md) ووصف ومحتوى `actions` اختياري. الأوصاف هي نص عادي مرتبط بالعنوان، لذا لا تضيف مستويات إلى مخطط المستند.

**Light**

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

**Dark**

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

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

## استخدام

```tsx theme={null}
import { Section } from 'twenty-ui/components/layout';
import { Text } from 'twenty-ui/primitives/typography';

export const WorkspaceSection = () => (
  <Section.Root>
    <Section.Header
      title="Workspace settings"
      description="Manage your workspace name and preferences."
    />
    <Text>Workspace preferences appear here.</Text>
  </Section.Root>
);
```

## أضف وصفًا وإجراءً

```tsx theme={null}
import { Section } from 'twenty-ui/components/layout';
import { Button } from 'twenty-ui/primitives/input';
import { Text } from 'twenty-ui/primitives/typography';

export const WorkspaceSection = () => (
  <Section.Root>
    <Section.Header
      title="Workspace settings"
      description="Manage your workspace name and preferences."
      actions={<Button>Edit workspace</Button>}
    />
    <Text>Workspace preferences appear here.</Text>
  </Section.Root>
);
```

يكون `Section.Root` افتراضيًا عنصر `div` بعرض كامل مع محاذاة إلى اليسار ولون النص الأساسي. استخدم `align` و`color` و`fullWidth` لضبط حاوية المحتوى.

يمكن أيضًا استخدام `Section.Header` بمفرده. تضبط قيم `level` و`size` و`color` العنوان، وتكون افتراضيًا `2` و`md` و`primary`. يحتوي الرأس على هامش واحد بمسافة 4 بعده. استخدم `style` أو `className` الأصلي لضبط تلك المسافة.

## تجاوز سعة الوصف

تعرض أوصاف السلاسل النصية ما يصل إلى خمسة أسطر. عيّن `descriptionLineClamp` إلى عدد صحيح موجب لاختيار حد آخر، أو إلى `false` لعرض الوصف الكامل دون تلميح أداة للفيض. يكشف التمرير فوقه النص الفائض. لا تضيف الأوصاف نقطة توقف Tab افتراضيا؛ عيّن `isDescriptionFocusable` لتمكين الوصول عبر التركيز إلى تلميح الأداة. يؤدي Escape إلى إخفاء تلميح الأداة.

يقبل العنوان محتوى عقدة. اختر `level` للمخطط التفصيلي للمستند بشكل مستقل عن `size` و`color` المرئيين. أنشئ الروابط والمحتوى المنسق الآخر صراحةً في وصف العقدة.

مرّر عقدة React للحصول على محتوى داعم أكثر ثراءً. تُعرض الأوصاف الغنية كما تم توفيرها، من دون اقتطاع تلقائي أو تلميحات.

## التركيب

يمرّر كلا الجزأين السمات الأصلية والمراجع وأسماء الفئات والأنماط و`render` إلى عنصرهما الخارجي. على سبيل المثال، يوفّر `Section.Root render={<section aria-label="Workspace settings" />}` قسمًا مسمّى، ويستخدم `Section.Header render={<header />}` حاوية رأس.

عند الترحيل، استبدل `adornment` بـ `actions`. فعّل تركيز الوصف باستخدام `isDescriptionFocusable` عند الحاجة. يتم تصدير `SectionRootProps` و`SectionHeaderProps` من `twenty-ui/components/layout`.

## الإزاحة

### Section.Root

**Root.align** `"center" | "left"` (default: left)

Text alignment within the section. Defaults to `left`.

**Root.color** `"primary" | "secondary" | "tertiary"` (default: primary)

Text color within the section. Defaults to `primary`.

**Root.fullWidth** `boolean` (default: true)

Whether the section fills the available width. Defaults to `true`.

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

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

### Section.Header

**Header.actions** `ReactNode`

Content alongside the heading, such as an action button or status.

**Header.color** `"primary" | "secondary" | "tertiary"` (default: primary)

Theme font color. Defaults to `primary`.

**Header.description** `ReactNode`

Supporting text associated with the heading. Strings have optional truncation and overflow tooltips; React nodes render as supplied.

**Header.descriptionLineClamp** `number | false` (default: 5)

Maximum visible lines for a string description. Defaults to `5`; use `false` to display the full description without a tooltip.

**Header.isDescriptionFocusable** `boolean` (default: false)

Adds a tab stop to a truncated string description so its overflow tooltip can open on focus. Defaults to `false`.

**Header.level** `1 | 2 | 3 | 4 | 5 | 6` (default: 2)

Semantic heading level, from `h1` through `h6`. Does not change the visual size. Defaults to `2`.

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

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Header.size** `"lg" | "md" | "sm" | "xl" | "xs" | "xxl"` (default: md)

Visual font size from `xs` through `xxl`, independent of the heading level. Uses the matching font token. Defaults to `md`.

**Header.title** `ReactNode` *required*

Content of the section heading.


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