mirror of
https://github.com/adoyle0/thaw.git
synced 2025-03-13 05:59:49 -04:00
125 lines
4 KiB
Rust
125 lines
4 KiB
Rust
use crate::components::{Demo, DemoCode};
|
|
use leptos::*;
|
|
use melt_ui::*;
|
|
use prisms::highlight_str;
|
|
|
|
#[component]
|
|
pub fn GridPage() -> impl IntoView {
|
|
mount_style(
|
|
"grid-demo",
|
|
r#".melt-grid-item {
|
|
height: 130px;
|
|
color: white;
|
|
text-align: center;
|
|
line-height: 130px;
|
|
}
|
|
.melt-grid-item:nth-child(odd) {
|
|
background-color: #3d8ae5dd;
|
|
}
|
|
.melt-grid-item:nth-child(even) {
|
|
background-color: #3d8ae5aa;
|
|
}"#,
|
|
);
|
|
view! {
|
|
<div style="width: 896px; margin: 0 auto;">
|
|
<h1>"Grid"</h1>
|
|
<Demo>
|
|
<Space vertical=true>
|
|
<Grid>
|
|
<GridItem>"123"</GridItem>
|
|
<GridItem>"456"</GridItem>
|
|
<GridItem>"789"</GridItem>
|
|
</Grid>
|
|
|
|
<Grid cols=2>
|
|
<GridItem>"123"</GridItem>
|
|
<GridItem>"456"</GridItem>
|
|
<GridItem>"789"</GridItem>
|
|
</Grid>
|
|
</Space>
|
|
<DemoCode
|
|
slot
|
|
html=highlight_str!(
|
|
r#"
|
|
<Grid>
|
|
<GridItem>"123"</GridItem>
|
|
<GridItem>"456"</GridItem>
|
|
<GridItem>"789"</GridItem>
|
|
</Grid>
|
|
|
|
<Grid :cols=2>
|
|
<GridItem>"123"</GridItem>
|
|
<GridItem>"456"</GridItem>
|
|
<GridItem>"789"</GridItem>
|
|
</Grid>
|
|
"#,
|
|
"rust"
|
|
)
|
|
>
|
|
|
|
""
|
|
</DemoCode>
|
|
</Demo>
|
|
<h3>"gap"</h3>
|
|
<Demo>
|
|
<Grid cols=3 x_gap=8 y_gap=8>
|
|
<GridItem>"123"</GridItem>
|
|
<GridItem>"321"</GridItem>
|
|
<GridItem>"123"</GridItem>
|
|
<GridItem>"456"</GridItem>
|
|
<GridItem>"7"</GridItem>
|
|
<GridItem>"123"</GridItem>
|
|
<GridItem>"123"</GridItem>
|
|
<GridItem span=2>"1234"</GridItem>
|
|
<GridItem>"567"</GridItem>
|
|
<GridItem>"567"</GridItem>
|
|
</Grid>
|
|
<DemoCode
|
|
slot
|
|
html=highlight_str!(
|
|
r#"
|
|
<Grid cols=3 x_gap=8 y_gap=8>
|
|
<GridItem>"123"</GridItem>
|
|
<GridItem>"321"</GridItem>
|
|
<GridItem>"123"</GridItem>
|
|
<GridItem>"456"</GridItem>
|
|
<GridItem>"7"</GridItem>
|
|
<GridItem>"123"</GridItem>
|
|
<GridItem>"123"</GridItem>
|
|
<GridItem span=2>"1234"</GridItem>
|
|
<GridItem >"567"</GridItem>
|
|
<GridItem >"567"</GridItem>
|
|
</Grid>
|
|
"#,
|
|
"rust"
|
|
)
|
|
>
|
|
|
|
""
|
|
</DemoCode>
|
|
</Demo>
|
|
<h3>"gap"</h3>
|
|
<Demo>
|
|
<Grid cols=4>
|
|
<GridItem offset=2>"123"</GridItem>
|
|
<GridItem>"456"</GridItem>
|
|
</Grid>
|
|
<DemoCode
|
|
slot
|
|
html=highlight_str!(
|
|
r#"
|
|
<Grid cols=4>
|
|
<GridItem offset=2>"123"</GridItem>
|
|
<GridItem>"456"</GridItem>
|
|
</Grid>
|
|
"#,
|
|
"rust"
|
|
)
|
|
>
|
|
|
|
""
|
|
</DemoCode>
|
|
</Demo>
|
|
</div>
|
|
}
|
|
}
|