ColumnsResponsive
Lay our children in columns, on a 12 point grid system that is responsive to screen size.
@solara.component
def ColumnsResponsive(
default=None,
small=None,
medium=None,
large=None,
xlarge=None,
children=[],
wrap=True,
gutters=True,
gutters_dense=False,
classes: List[str] = [],
style: Optional[str] = None,
):
...
If a single number is specified, or less values than children, the values will be cycled. The total width of this system is 12, so if you want to have 3 columns, each taking up 4 points, you would specify [4, 4, 4] or 4.
with ColumnsResponsive([4, 4, 4]):
...
with ColumnsResponsive(4): # same effect
...
If you want the first column to take up 4 points, and the second column to take up the remaining 8 points, you would specify [4, 8].
with ColumnsResponsive([4, 8]):
...
If you want your columns to be full width on large screen, and next to eachother on larger screens.
with ColumnsResponsive(12, large=[4, 8]):
...
Arguments
- default: Width of column for >= 0 px.
- small: Width of column for >= 600 px.
- medium: Width of column >= 960 px.
- large: Width of column for >= 1264 px.
- xlarge: Width of column for >= 1904 px.
Example
Controls
6
4
3
2
1
Current screensize is xsmall/default, each child is 6 points wide
Current screensize is small, each child is 4 points wide
Current screensize is medium, each child is 3 points wide
Current screensize is large, each child is 2 points wide
Current screensize is xlarge, each child is 1 points wide
Change the screen size to see the effect of the different columns sizes.
0
1
2
3
4
5
6
7
8
9
10
11