Обзор
Section.Root группирует связанное содержимое. Section.Header объединяет Заголовок с описанием и необязательным содержимым actions. Описания — это обычный текст, связанный с заголовком, поэтому они не добавляют уровни в структуру документа.
Использование
Добавьте описание и действие
Section.Root по умолчанию представляет собой div на всю ширину с выравниванием по левому краю и основным цветом текста. Используйте align, color и fullWidth, чтобы настроить обёртку содержимого.
Section.Header также можно использовать отдельно. Его level, size и color настраивают заголовок и по умолчанию имеют значения 2, md и primary. После заголовка есть один отступ spacing-4. Используйте нативные style или className, чтобы настроить этот отступ.
Переполнение описания
Описания строк отображаются не более чем в пяти строках. Установите дляdescriptionLineClamp положительное целое число, чтобы выбрать другое ограничение, или false, чтобы отобразить полное описание без всплывающей подсказки при переполнении. При наведении отображается текст, не помещающийся в строке. Описания по умолчанию не добавляют точку остановки Tab; установите isDescriptionFocusable, чтобы включить доступ к всплывающей подсказке с помощью фокуса. Клавиша Escape закрывает всплывающую подсказку.
Заголовок поддерживает содержимое узла. Выбирайте level для структуры документа независимо от визуальных size и color. Явно компонуйте ссылки и другое форматированное содержимое в описании узла.
Передайте узел React для более насыщенного дополнительного содержимого. Расширенные описания отображаются в переданном виде, без автоматического усечения или всплывающих подсказок.
Композиция
Обе части передают нативные атрибуты, refs, имена классов, стили иrender своему внешнему элементу. Например, Section.Root render={<section aria-label="Workspace settings" />} предоставляет именованный раздел, а Section.Header render={<header />} использует контейнер заголовка.
При миграции замените adornment на actions. При необходимости включайте фокусировку описания с помощью isDescriptionFocusable. SectionRootProps и SectionHeaderProps экспортируются из twenty-ui/components/layout.
Свойства
Section.Root
"center" | "left"
по умолчанию:"left"
Text alignment within the section. Defaults to
left."primary" | "secondary" | "tertiary"
по умолчанию:"primary"
Text color within the section. Defaults to
primary.boolean
по умолчанию:"true"
Whether the section fills the available width. Defaults to
true.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
ReactNode
Content alongside the heading, such as an action button or status.
"primary" | "secondary" | "tertiary"
по умолчанию:"primary"
Theme font color. Defaults to
primary.ReactNode
Supporting text associated with the heading. Strings have optional truncation and overflow tooltips; React nodes render as supplied.
number | false
по умолчанию:"5"
Maximum visible lines for a string description. Defaults to
5; use false to display the full description without a tooltip.boolean
по умолчанию:"false"
Adds a tab stop to a truncated string description so its overflow tooltip can open on focus. Defaults to
false.1 | 2 | 3 | 4 | 5 | 6
по умолчанию:"2"
Semantic heading level, from
h1 through h6. Does not change the visual size. Defaults to 2.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."lg" | "md" | "sm" | "xl" | "xs" | "xxl"
по умолчанию:"md"
Visual font size from
xs through xxl, independent of the heading level. Uses the matching font token. Defaults to md.ReactNode
обязательно
Content of the section heading.