Skip to main content
Section(children: Component): Component;
Section(children: Component[]): Component;
Section(props: { header?: Component, footer?: Component }, children: Component[]): Component;

​
Parameters

​
children
Component | Component[]
A single child component or an array of child components to organize within the section.
​
props
{ header?: Component, footer?: Component }
Configuration options for the section.

​
Support

​
Usage

​
Basic section

Section([
    Text("Item 1"),
    Text("Item 2"),
    Text("Item 3")
])

​
Section with header

Section(
    { header: Text("Settings").font("headline") },
    [
        Text("Option 1"),
        Text("Option 2"),
        Text("Option 3")
    ]
)

Section(
    {
        header: Text("Account").font("headline"),
        footer: Text("Your account information is private.").font("caption")
    },
    [
        Text("Username: john_doe"),
        Text("Email: [email protected]")
    ]
)

​
Section in List

Sections are commonly used within List components to group related items: 
List([
    Section(
        { header: Text("General") },
        [
            Text("Profile"),
            Text("Settings")
        ]
    ),
    Section(
        { header: Text("Content") },
        [
            Text("Posts"),
            Text("Comments")
        ]
    )
])