Skip to content

Commit 5f057d8

Browse files
sjefvanleeuwensjefvanleeuwen
committed
Some grid samples, testing the grid system.
1 parent c9e1e4c commit 5f057d8

File tree

4 files changed

+79
-1
lines changed

4 files changed

+79
-1
lines changed

‎src/Blazor.AdminLte.Site.Shared/MainLayout.razor‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,15 @@
7979
<SideBarMenu>
8080
<SideBarMenuItem Link="widgets" Icon="fas fa-th">
8181
Widgets
82-
<span class="right badge badge-danger">New</span>
8382
</SideBarMenuItem>
83+
<SideBarTreeView MenuState="MenuState.Closed" Icon="fas fa-copy">
84+
<Title>Layout Options</Title>
85+
<Items>
86+
<SideBarMenuItem Icon="far fa-circle" Link="layout/grid-system">
87+
Grid System
88+
</SideBarMenuItem>
89+
</Items>
90+
</SideBarTreeView>
8491
<SideBarTreeView MenuState="MenuState.Open" Icon="fas fa-tachometer-alt">
8592
<Title>Starter Pages</Title>
8693
<Items>

‎src/Blazor.AdminLte.Site.Shared/Pages/Layout/GridSystem.razor‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
@page "/layout/grid-system"
2+
<ContentHeader>
3+
<Header>
4+
<PageTitle Title="Grid System" />
5+
</Header>
6+
</ContentHeader>
7+
<ContentMain>
8+
<Card>
9+
<Title><CardTitle>Simple</CardTitle></Title>
10+
<Body>
11+
<Row>
12+
<Column Classes="col.sm"><Card><Title>One of three Columns</Title></Card></Column>
13+
<Column Classes="col.sm"><Card><Title>One of three Columns</Title></Card></Column>
14+
<Column Classes="col.sm"><Card><Title>One of three Columns</Title></Card></Column>
15+
</Row>
16+
</Body>
17+
</Card>
18+
<Card>
19+
<Title><CardTitle>Auto-layout columns</CardTitle></Title>
20+
<Body>
21+
<Row>
22+
<Column Classes="col._"><Card><Title>1 of 2</Title></Card></Column>
23+
<Column Classes="col._"><Card><Title>2 of 2</Title></Card></Column>
24+
</Row>
25+
<Row>
26+
<Column Classes="col._"><Card><Title>1 of 3</Title></Card></Column>
27+
<Column Classes="col._"><Card><Title>2 of 3</Title></Card></Column>
28+
<Column Classes="col._"><Card><Title>3 of 3</Title></Card></Column>
29+
</Row>
30+
</Body>
31+
</Card>
32+
<Card>
33+
<Title><CardTitle>Setting one column width</CardTitle></Title>
34+
<Body>
35+
<Row>
36+
<Column Classes="col._"><Card><Title>1 of 3</Title></Card></Column>
37+
<Column Classes="col._6"><Card><Title>2 of 3 (wider)</Title></Card></Column>
38+
<Column Classes="col._"><Card><Title>3 of 3</Title></Card></Column>
39+
</Row>
40+
<Row>
41+
<Column Classes="col._"><Card><Title>1 of 3</Title></Card></Column>
42+
<Column Classes="col._5"><Card><Title>2 of 3 (wider)</Title></Card></Column>
43+
<Column Classes="col._"><Card><Title>3 of 3</Title></Card></Column>
44+
</Row>
45+
</Body>
46+
</Card>
47+
<Card>
48+
<Title><CardTitle>Variable width content</CardTitle></Title>
49+
<Body>
50+
Use col-{breakpoint}-auto classes to size columns based on the natural width of their content.
51+
<Row>
52+
<Column Classes="col._.col.lg._2"><Card><Title>1 of 3</Title></Card></Column>
53+
<Column Classes="col.md.auto"><Card><Title>Variable width content</Title></Card></Column>
54+
<Column Classes="col._.col.lg._2"><Card><Title>3 of 3</Title></Card></Column>
55+
</Row>
56+
<Row>
57+
<Column Classes="col._"><Card><Title>1 of 3</Title></Card></Column>
58+
<Column Classes="col.md.auto"><Card><Title>Variable width content</Title></Card></Column>
59+
<Column Classes="col._.col.lg._2"><Card><Title>3 of 3</Title></Card></Column>
60+
</Row>
61+
</Body>
62+
</Card>
63+
</ContentMain>

‎src/Blazor.AdminLte/Container.razor‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div class="container">
2+
@ChildContent
3+
</div>
4+
@code {
5+
[Parameter]
6+
public RenderFragment ChildContent { get; set; }
7+
}

‎src/Blazor.AdminLte/Layout/Column.razor.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ namespace Blazor.AdminLte
55
{
66
public static class col
77
{
8+
public static FluentColumn _ { get { return new FluentColumn(""); } }
89
public static FluentColumn xs { get { return new FluentColumn("-xs"); } }
910
public static FluentColumn sm { get { return new FluentColumn("-sm"); } }
1011
public static FluentColumn md { get { return new FluentColumn("-md"); } }

0 commit comments

Comments
 (0)