Prezentare generală
Section.Root grupează conținut asociat. Section.Header combină Heading cu o descriere și conținut opțional actions. Descrierile sunt text obișnuit asociat titlului, deci nu adaugă niveluri la structura documentului.
Utilizare
Adăugați o descriere și o acțiune
Section.Root este implicit un div pe toată lățimea, cu aliniere la stânga și culoarea principală a textului. Utilizați align, color și fullWidth pentru a ajusta containerul de conținut.
Section.Header poate fi utilizat și singur. level, size și color ale acestuia configurează titlul și au implicit valorile 2, md și primary. Antetul are după el o margine de spacing-4. Utilizați style sau className native pentru a ajusta acea spațiere.
Depășirea descrierii
Descrierile șirurilor afișează până la cinci rânduri. SetațidescriptionLineClamp la un număr întreg pozitiv pentru a alege o altă limită sau la false pentru a afișa descrierea completă fără un indiciu pentru depășire. Trecerea cu cursorul dezvăluie textul care depășește spațiul disponibil. Descrierile nu adaugă implicit o oprire de tabulare; setați isDescriptionFocusable pentru a activa accesul prin focalizare la indiciul contextual. Escape închide indiciul contextual.
Titlul acceptă conținut de nod. Alegeți level pentru structura documentului independent de size și color vizuale. Compuneți explicit linkuri și alt conținut îmbogățit într-o descriere de nod.
Transmiteți un nod React pentru conținut suplimentar mai bogat. Descrierile bogate sunt randate așa cum sunt furnizate, fără trunchiere automată sau indicații contextuale.
Compoziție
Ambele părți redirecționează atributele native, referințele, numele de clase, stilurile șirender către elementul lor exterior. De exemplu, Section.Root render={<section aria-label="Workspace settings" />} oferă o secțiune denumită, iar Section.Header render={<header />} utilizează un container de antet.
La migrare, înlocuiți adornment cu actions. Activați focalizarea descrierii cu isDescriptionFocusable atunci când este necesar. SectionRootProps și SectionHeaderProps sunt exportate din twenty-ui/components/layout.
Proprietăți
Section.Root
"center" | "left"
implicit:"left"
Text alignment within the section. Defaults to
left."primary" | "secondary" | "tertiary"
implicit:"primary"
Text color within the section. Defaults to
primary.boolean
implicit:"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"
implicit:"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
implicit:"5"
Maximum visible lines for a string description. Defaults to
5; use false to display the full description without a tooltip.boolean
implicit:"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
implicit:"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"
implicit:"md"
Visual font size from
xs through xxl, independent of the heading level. Uses the matching font token. Defaults to md.ReactNode
obligatoriu
Content of the section heading.