Lays out children in columns, with relative widths specified as a list of floats or ints.
@solara.component def Columns( widths: List[Union[float, int]] = , wrap=True, gutters=True, gutters_dense=False, children=, classes: List[str] = , style: Union[str, Dict[str, str], None] = None, ): ...
Widths are relative to each other, so [1, 2, 1] will result in 1/4, 1/2, 1/4 width columns. Columns with a width of 0 will take up the minimal amount of space.
If there are more children than widths, the width list will be cycled.
with solara.Columns([1, 2, 1]): solara.Text("I am on the left") with solara.Card("Middle"): ... with solara.Column(): ...
When three children are added to this component, they will be laid out in three columns, with the first and last column taking up 1/4 of the width, and the middle column taking up 1/2 of the width.
import solara @solara.component def Page(): with solara.Columns([0, 1, 2]): solara.Text("I am as small as possible") solara.Select("I strech", values=["a", "b", "c"], value="a") solara.Select("I strech twice the amount", values=["a", "b", "c"], value="a")
I am as small as possible
widths: List of floats or ints, specifying the relative widths of the columns.
wrap: Whether to wrap the columns to the next row if there is not enough space available. This only happens when using widths of 0.
gutters: Whether to add gutters between the columns.
gutters_dense: Make gutters smaller.
children: List of children to be laid out in columns.
style: CSS style to apply to the top level element.
classes: List of CSS classes to be applied to the top level element.
This column has a relative width of 2, the columns to the left and right have a relative width of 1.
This column has a relative width of 1, the columns to the left has a relative width of 2.