Resumen
Section.Root agrupa contenido relacionado. Section.Header combina Heading con una descripción y contenido actions opcional. Las descripciones son texto normal asociado al encabezado, por lo que no añaden niveles al esquema del documento.
”Uso”
Añade una descripción y una acción
Section.Root usa de forma predeterminada un div de ancho completo con alineación a la izquierda y el color de texto principal. Usa align, color y fullWidth para ajustar el contenedor de contenido.
Section.Header también puede usarse por sí solo. Sus level, size y color configuran el encabezado y, de forma predeterminada, son 2, md y primary. El encabezado tiene un margen de espaciado 4 después de él. Usa style o className nativos para ajustar ese espaciado.
Desbordamiento de la descripción
Las descripciones de cadenas muestran hasta cinco líneas. EstablecedescriptionLineClamp en un entero positivo para elegir otro límite, o en false para mostrar la descripción completa sin una información sobre herramientas de desbordamiento. Al pasar el cursor se muestra el texto desbordado. Las descripciones no añaden una parada de tabulación de forma predeterminada; establece isDescriptionFocusable para habilitar el acceso mediante el foco a la información sobre herramientas. Escape descarta la información sobre herramientas.
El encabezado acepta contenido de nodo. Elija level para el esquema del documento independientemente de size y color visuales. Componga explícitamente enlaces y otro contenido enriquecido en una descripción de nodo.
Pasa un nodo de React para obtener contenido complementario más enriquecido. Las descripciones enriquecidas se representan tal como se proporcionan, sin truncamiento automático ni información sobre herramientas.
Composición
Ambas partes reenvían atributos nativos, refs, nombres de clase, estilos yrender a su elemento externo. Por ejemplo, Section.Root render={<section aria-label="Workspace settings" />} proporciona una sección con nombre, y Section.Header render={<header />} usa un contenedor de encabezado.
Al migrar, reemplace adornment por actions. Active el enfoque de la descripción con isDescriptionFocusable cuando sea necesario. SectionRootProps y SectionHeaderProps se exportan desde twenty-ui/components/layout.
”Props”
Section.Root
"center" | "left"
predeterminado:"left"
Text alignment within the section. Defaults to
left."primary" | "secondary" | "tertiary"
predeterminado:"primary"
Text color within the section. Defaults to
primary.boolean
predeterminado:"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"
predeterminado:"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
predeterminado:"5"
Maximum visible lines for a string description. Defaults to
5; use false to display the full description without a tooltip.boolean
predeterminado:"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
predeterminado:"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"
predeterminado:"md"
Visual font size from
xs through xxl, independent of the heading level. Uses the matching font token. Defaults to md.ReactNode
requerido
Content of the section heading.