Grid
Component for creating grid layouts.
use radix_yew_themes::Grid;
use yew::prelude::*;
use crate::decorative_box::DecorativeBox;
#[function_component]
pub fn GridExample() -> Html {
html! {
<Grid columns=3 gap=3 rows="repeat(2, 64px)" width="auto">
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
</Grid>
}
}
API Reference
TODO
Examples
Responsive
All props marked Responsive
, such as columns
and rows
accept a breakpoint values. For example, the following grid starts with 1 column, and uses 2 columns from the medium breakpoint.
use radix_yew_themes::{Box, Breakpoint, Grid, ResponsiveValues};
use yew::prelude::*;
use crate::decorative_box::DecorativeBox;
#[function_component]
pub fn GridResponsiveExample() -> Html {
html! {
<Grid columns={ResponsiveValues::from([(Breakpoint::Initial, 1), (Breakpoint::Md, 2)])} gap=3 width="auto">
<Box height="64px">
<DecorativeBox />
</Box>
<Box height="64px">
<DecorativeBox />
</Box>
</Grid>
}
}