Skip to content

Layout Blocks

Layout blocks take other blocks as parameters and lay them out. Interactive layout blocks (such as tabs and selects) don't require a backend server and can be used in standalone HTML reports.

This includes columns:

dip.Group(
    dip.BigNumber(heading="Left", value="1234"),
    dip.BigNumber(heading="Middle", value="4321"),
    dip.BigNumber(heading="Right", value="2314"),
    columns=3,
)

Interactive tabs:

dip.Select(
    blocks=[
        dip.Text("Hello World 1", label="Page 1"),
        dip.Text("Hello World 2", label="Page 2"),
        dip.Text("Hello World 3", label="Page 3"),
    ]
)

And many other supported layout blocks.

Nesting

Layout blocks can be arbitrarily nested, allowing you to create complex user interfaces.

dip.Group(
    dip.Text("This is the left side of a two-column layout"),
    dip.Group(
        dip.Text("This is the right side of a two-column layout"),
        dip.Text("Below we have three tabs with different content"),
        dip.Select(
            blocks=[
                dip.Text("Hello World 1", label="Page 1"),
                dip.Text("Hello World 2", label="Page 2"),
                dip.Text("Hello World 3", label="Page 3"),
            ]
        ),
    ),
    columns=2,
)

Available Blocks

Check out more layout block examples in the API Reference: