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 HTML reports.

Group

import altair as alt
from vega_datasets import data

df = data.iris()

plot_base = alt.Chart(df).mark_point().interactive()

ar.Group(
    "Iris analysis",
    ar.Select(
       ar.DataTable(df, label='Data'),
       ar.Group(
           ar.Plot(plot_base.encode(x='sepalLength', y='sepalWidth', color='species')),
           ar.Plot(plot_base.encode(x='petalLength', y='petalWidth', color='species')),
           columns=2,
           label='Plots'
       )
    )
)

This includes columns:

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

Select

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

Nesting

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

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

Compute

Compute block is for composing an HTML form with control blocks.

ar.Compute(
    ar.TextBox("text"),
    ar.NumberBox("number")
)

Available Blocks

Check out more layout block examples in the API Reference: