Panoramica
Section.Root raggruppa contenuti correlati. Section.Header combina Heading con una descrizione e contenuto actions facoltativo. Le descrizioni sono testo normale associato all’intestazione, pertanto non aggiungono livelli alla struttura del documento.
Utilizzo
Aggiungere una descrizione e un’azione
Section.Root per impostazione predefinita è un div a larghezza intera con allineamento a sinistra e il colore del testo principale. Usa align, color e fullWidth per regolare il wrapper del contenuto.
Section.Header può essere utilizzato anche da solo. I relativi level, size e color configurano l’intestazione e per impostazione predefinita sono 2, md e primary. Dopo l’intestazione è presente un margine spacing-4. Usa style o className nativi per regolare quella spaziatura.
Overflow della descrizione
Le descrizioni delle stringhe mostrano fino a cinque righe. ImpostadescriptionLineClamp su un numero intero positivo per scegliere un altro limite oppure su false per visualizzare la descrizione completa senza un tooltip di overflow. Al passaggio del mouse viene visualizzato il testo in eccesso. Per impostazione predefinita, le descrizioni non aggiungono una destinazione di tabulazione; imposta isDescriptionFocusable per abilitare l’accesso tramite stato attivo al tooltip. Esc chiude il tooltip.
L’intestazione accetta contenuti del nodo. Scegli level per la struttura del documento indipendentemente da size e color visivi. Componi esplicitamente collegamenti e altri contenuti avanzati in una descrizione del nodo.
Passa un nodo React per contenuti di supporto più ricchi. Le descrizioni avanzate vengono visualizzate come fornite, senza troncamento automatico né tooltip.
Composizione
Entrambe le parti inoltrano attributi nativi, ref, nomi di classe, stili erender al proprio elemento esterno. Ad esempio, Section.Root render={<section aria-label="Workspace settings" />} fornisce una sezione denominata e Section.Header render={<header />} utilizza un contenitore header.
Durante la migrazione, sostituisci adornment con actions. Attiva lo stato attivo della descrizione con isDescriptionFocusable quando necessario. SectionRootProps e SectionHeaderProps vengono esportati da twenty-ui/components/layout.
Props
Section.Root
"center" | "left"
predefinito:"left"
Text alignment within the section. Defaults to
left."primary" | "secondary" | "tertiary"
predefinito:"primary"
Text color within the section. Defaults to
primary.boolean
predefinito:"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"
predefinito:"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
predefinito:"5"
Maximum visible lines for a string description. Defaults to
5; use false to display the full description without a tooltip.boolean
predefinito:"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
predefinito:"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"
predefinito:"md"
Visual font size from
xs through xxl, independent of the heading level. Uses the matching font token. Defaults to md.ReactNode
obbligatorio
Content of the section heading.