Skip to content

Commit 32503ec

Browse files
stsrkistsrki
committed
Demo: rewrite dashboard page
1 parent 7ea0bdd commit 32503ec

1 file changed

Lines changed: 181 additions & 170 deletions

File tree

‎Demos/Blazorise.Demo/Pages/Dashboard.razor‎

Lines changed: 181 additions & 170 deletions
Original file line numberDiff line numberDiff line change
@@ -1,185 +1,196 @@
11
@page "/"
22
@inject IVersionProvider VersionProvider
33

4-
<Heading Size="HeadingSize.Is1" Margin="Margin.Is3.OnY">
5-
Blazorise UI Components for Blazor
6-
</Heading>
4+
<Card Background="Background.Primary.Subtle" Shadow="Shadow.Default" Margin="Margin.Is4.OnY">
5+
<CardBody Padding="Padding.Is4">
6+
<Row>
7+
<Column ColumnSize="ColumnSize.Is8.OnDesktop.Is12.OnMobile">
8+
<Heading Size="HeadingSize.Is1" Margin="Margin.Is2.FromBottom">
9+
Blazorise Demo App
10+
</Heading>
11+
12+
<Lead Margin="Margin.Is3.FromBottom">
13+
The shared testing ground for every Blazorise provider.
14+
</Lead>
15+
16+
<Paragraph>
17+
This app exists to exercise the same Blazorise pages across providers, validate component behavior, and cover real UI scenarios in one consistent environment.
18+
</Paragraph>
19+
20+
<Div Flex="Flex.Wrap" Gap="Gap.Is2" Margin="Margin.Is3.FromTop">
21+
<Badge Color="Color.Light" Pill>All providers</Badge>
22+
<Badge Color="Color.Light" Pill>UI scenarios</Badge>
23+
<Badge Color="Color.Light" Pill>All components</Badge>
24+
</Div>
25+
</Column>
26+
27+
<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is12.OnMobile">
28+
<Card Background="Background.White" Shadow="Shadow.Default" Margin="Margin.Is3.FromTop">
29+
<CardBody>
30+
<Heading Size="HeadingSize.Is5" TextColor="TextColor.Dark" Margin="Margin.Is2.FromBottom">
31+
What we verify here
32+
</Heading>
33+
34+
<Paragraph TextColor="TextColor.Body" Margin="Margin.Is2.FromBottom">
35+
Provider coverage across the full Blazorise stack.
36+
</Paragraph>
37+
38+
<Paragraph TextColor="TextColor.Body" Margin="Margin.Is2.FromBottom">
39+
Component behavior from basic inputs to advanced extensions.
40+
</Paragraph>
741

8-
<Lead Margin="Margin.Is4.OnY">
9-
Blazorise is a component library built on top of Blazor and CSS frameworks like <Anchor To="https://getbootstrap.com/" Target="Target.Blank">Bootstrap</Anchor>, <Anchor To="https://tailwindcss.com/" Target="Target.Blank">Tailwind</Anchor>, <Anchor To="https://bulma.io/" Target="Target.Blank">Bulma</Anchor>, <Anchor To="https://ant.design/" Target="Target.Blank">Ant Design</Anchor>, and <Anchor To="http://daemonite.github.io/material/" Target="Target.Blank">Material</Anchor>. It can be used to build responsive, single-page web applications.
10-
</Lead>
42+
<Paragraph TextColor="TextColor.Body" Margin="Margin.Is0.FromBottom">
43+
Real layouts, forms, overlays, data workflows, and utility-driven pages.
44+
</Paragraph>
45+
</CardBody>
46+
</Card>
47+
</Column>
48+
</Row>
49+
</CardBody>
50+
</Card>
1151

1252
<Row>
13-
<Column Margin="Margin.Is3.FromBottom">
14-
<Paragraph>
15-
This demo app is designed to showcase a variety of UI elements and how they behave in different scenarios. With the demo app, you can explore the features and functionality of Blazorise, a component library for building modern web applications with <Anchor To="https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor" Target="Target.Blank">Blazor</Anchor>. You'll find a range of UI elements, including buttons, forms, tables, and more, all of which are fully interactive and responsive.
16-
</Paragraph>
17-
18-
<Paragraph>
19-
Whether you're new to Blazorise or an experienced developer, this demo app is a great way to get a feel for how the components work and how they can be used in your own projects. So go ahead and start exploring – we hope you find the demo app useful and informative!
20-
</Paragraph>
53+
<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is12.OnMobile" Margin="Margin.Is4.FromBottom">
54+
<Card Shadow="Shadow.Default" Height="Height.Is100">
55+
<CardBody>
56+
<Icon Name="IconName.Wrench" IconSize="IconSize.x2" TextColor="TextColor.Primary" Margin="Margin.Is2.FromBottom" />
57+
<CardTitle Size="HeadingSize.Is4">Provider testing</CardTitle>
58+
<CardText>
59+
We run the same demo content against Blazorise providers to catch styling, rendering, and interaction differences quickly.
60+
</CardText>
61+
</CardBody>
62+
</Card>
63+
</Column>
64+
65+
<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is12.OnMobile" Margin="Margin.Is4.FromBottom">
66+
<Card Shadow="Shadow.Default" Height="Height.Is100">
67+
<CardBody>
68+
<Icon Name="IconName.Dashboard" IconSize="IconSize.x2" TextColor="TextColor.Info" Margin="Margin.Is2.FromBottom" />
69+
<CardTitle Size="HeadingSize.Is4">Scenario coverage</CardTitle>
70+
<CardText>
71+
The pages test forms, grids, navigation, dialogs, uploads, charts, utilities, and other UI combinations used in real apps.
72+
</CardText>
73+
</CardBody>
74+
</Card>
75+
</Column>
76+
77+
<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is12.OnMobile" Margin="Margin.Is4.FromBottom">
78+
<Card Shadow="Shadow.Default" Height="Height.Is100">
79+
<CardBody>
80+
<Icon Name="IconName.PuzzlePiece" IconSize="IconSize.x2" TextColor="TextColor.Success" Margin="Margin.Is2.FromBottom" />
81+
<CardTitle Size="HeadingSize.Is4">Component coverage</CardTitle>
82+
<CardText>
83+
Core components, extensions, and utilities all live here, so this homepage points directly into the main areas of the catalog.
84+
</CardText>
85+
</CardBody>
86+
</Card>
2187
</Column>
2288
</Row>
2389

24-
<Heading Size="HeadingSize.Is2" Margin="Margin.Is4.OnY">
25-
Most popular Blazor components
26-
</Heading>
90+
<Alert Color="Color.Light" Visible Margin="Margin.Is4.FromBottom">
91+
<AlertMessage>Why this app matters</AlertMessage>
92+
<AlertDescription>
93+
It is not just a showcase. It is the place where Blazorise changes are exercised across providers and where UI behavior can be checked under different usage patterns before moving on.
94+
</AlertDescription>
95+
</Alert>
2796

28-
<Grid Rows="GridRows.Are2" Columns="GridColumns.Are4.OnDesktop.Are1.OnMobile">
29-
<Card Height="Height.Is100">
30-
<CardBody>
31-
<Media>
32-
<MediaLeft>
33-
<Icon Name="IconName.Dashboard" IconSize="IconSize.x3" Padding="Padding.Is3" />
34-
</MediaLeft>
35-
<MediaBody>
36-
<Anchor To="tests/datagrid" Stretched TextColor="TextColor.Body">
37-
<Heading Size="HeadingSize.Is5">Blazor DataGrid</Heading>
38-
</Anchor>
39-
<Paragraph>
40-
An incredibly quick and responsive grid component that allows users to display and manipulate data in a grid format within a Blazor application.
41-
</Paragraph>
42-
</MediaBody>
43-
</Media>
44-
</CardBody>
45-
</Card>
46-
<Card Height="Height.Is100">
47-
<CardBody>
48-
<Media>
49-
<MediaLeft>
50-
<Icon Name="IconName.ChartPie" IconSize="IconSize.x3" Padding="Padding.Is3" />
51-
</MediaLeft>
52-
<MediaBody>
53-
<Anchor To="tests/charts" Stretched TextColor="TextColor.Body">
54-
<Heading Size="HeadingSize.Is5">Blazor Charts</Heading>
55-
</Anchor>
56-
<Paragraph>
57-
The chart component offers various options for presenting data and is efficient and lightweight.
58-
</Paragraph>
59-
</MediaBody>
60-
</Media>
61-
</CardBody>
62-
</Card>
63-
<Card Height="Height.Is100">
64-
<CardBody>
65-
<Media>
66-
<MediaLeft>
67-
<Icon Name="IconName.CalendarDay" IconSize="IconSize.x3" Padding="Padding.Is3" />
68-
</MediaLeft>
69-
<MediaBody>
70-
<Anchor To="tests/forms" Stretched TextColor="TextColor.Body">
71-
<Heading Size="HeadingSize.Is5">Blazor Editors</Heading>
72-
</Anchor>
73-
<Paragraph>
74-
UI elements that allow users to enter and submit data in a form, such as text boxes, dropdown lists, and checkboxes.
75-
</Paragraph>
76-
</MediaBody>
77-
</Media>
78-
</CardBody>
79-
</Card>
80-
<Card Height="Height.Is100">
81-
<CardBody>
82-
<Media>
83-
<MediaLeft>
84-
<Icon Name="IconName.FileUpload" IconSize="IconSize.x3" Padding="Padding.Is3" />
85-
</MediaLeft>
86-
<MediaBody>
87-
<Anchor To="tests/file-picker" Stretched TextColor="TextColor.Body">
88-
<Heading Size="HeadingSize.Is5">Blazor Upload</Heading>
89-
</Anchor>
90-
<Paragraph>
91-
An intuitive Blazor UI element created to track and control the file upload procedure in real time.
92-
</Paragraph>
93-
</MediaBody>
94-
</Media>
95-
</CardBody>
96-
</Card>
97-
<Card Height="Height.Is100">
98-
<CardBody>
99-
<Media>
100-
<MediaLeft>
101-
<Icon Name="IconName.Check" IconSize="IconSize.x3" Padding="Padding.Is3" />
102-
</MediaLeft>
103-
<MediaBody>
104-
<Anchor To="tests/validations" Stretched TextColor="TextColor.Body">
105-
<Heading Size="HeadingSize.Is5">Blazor Validation</Heading>
106-
</Anchor>
107-
<Paragraph>
108-
Validation is a component that provides support for form validation in Blazor applications.
109-
</Paragraph>
110-
</MediaBody>
111-
</Media>
112-
</CardBody>
113-
</Card>
114-
<Card Height="Height.Is100">
115-
<CardBody>
116-
<Media>
117-
<MediaLeft>
118-
<Icon Name="IconName.Expand" IconSize="IconSize.x3" Padding="Padding.Is3" />
119-
</MediaLeft>
120-
<MediaBody>
121-
<Anchor To="tests/modals" Stretched TextColor="TextColor.Body">
122-
<Heading Size="HeadingSize.Is5">Blazor Modal</Heading>
123-
</Anchor>
124-
<Paragraph>
125-
Displays content in a separate window or overlay on top of the current page, often used to display additional information or to prompt the user for input.
126-
</Paragraph>
127-
</MediaBody>
128-
</Media>
129-
</CardBody>
130-
</Card>
131-
<Card Height="Height.Is100">
132-
<CardBody>
133-
<Media>
134-
<MediaLeft>
135-
<Icon Name="IconName.Search" IconSize="IconSize.x3" Padding="Padding.Is3" />
136-
</MediaLeft>
137-
<MediaBody>
138-
<Anchor To="tests/autocomplete" Stretched TextColor="TextColor.Body">
139-
<Heading Size="HeadingSize.Is5">Blazor Autocomplete</Heading>
140-
</Anchor>
141-
<Paragraph>
142-
Provides suggestions as the user types, based on a pre-defined list of options, in order to help the user quickly find and select the desired item.
143-
</Paragraph>
144-
</MediaBody>
145-
</Media>
146-
</CardBody>
147-
</Card>
148-
<Card Height="Height.Is100">
149-
<CardBody>
150-
<Media>
151-
<MediaLeft>
152-
<Icon Name="IconName.Link" IconSize="IconSize.x3" Padding="Padding.Is3" />
153-
</MediaLeft>
154-
<MediaBody>
155-
<Anchor To="tests/qrcode" Stretched TextColor="TextColor.Body">
156-
<Heading Size="HeadingSize.Is5">Blazor QRCode</Heading>
157-
</Anchor>
158-
<Paragraph>
159-
Generates and displays a QR code image, which can be scanned by a QR code reader to access information or a website URL.
160-
</Paragraph>
161-
</MediaBody>
162-
</Media>
163-
</CardBody>
164-
</Card>
165-
</Grid>
166-
167-
<Heading Size="HeadingSize.Is2" Margin="Margin.Is4.OnY">
168-
Where can I find the code?
97+
<Heading Size="HeadingSize.Is2" Margin="Margin.Is4.FromBottom">
98+
Start with these areas
16999
</Heading>
170100

171-
<Paragraph>
172-
Full source code for this demo application can be found on <Anchor To="https://github.com/Megabit/Blazorise/tree/master/Demos/Blazorise.Demo" Target="Target.Blank">GitHub</Anchor>.
173-
</Paragraph>
101+
<Row>
102+
<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is6.OnTablet.Is12.OnMobile" Margin="Margin.Is4.FromBottom">
103+
<Card Shadow="Shadow.Default" Height="Height.Is100">
104+
<CardBody>
105+
<Icon Name="IconName.Wrench" IconSize="IconSize.x2" TextColor="TextColor.Primary" Margin="Margin.Is2.FromBottom" />
106+
<Anchor To="tests/buttons" Stretched TextColor="TextColor.Body">
107+
<CardTitle Size="HeadingSize.Is4">UI Elements</CardTitle>
108+
</Anchor>
109+
<CardText>
110+
Buttons, alerts, cards, tabs, modals, tables, and the rest of the core building blocks.
111+
</CardText>
112+
</CardBody>
113+
</Card>
114+
</Column>
174115

175-
<Paragraph>
176-
If you wish to learn more about Blazorise please go to the <Anchor To="https://blazorise.com/docs/" Target="Target.Blank">official documentation</Anchor>.
177-
</Paragraph>
116+
<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is6.OnTablet.Is12.OnMobile" Margin="Margin.Is4.FromBottom">
117+
<Card Shadow="Shadow.Default" Height="Height.Is100">
118+
<CardBody>
119+
<Icon Name="IconName.Edit" IconSize="IconSize.x2" TextColor="TextColor.Warning" Margin="Margin.Is2.FromBottom" />
120+
<Anchor To="tests/forms" Stretched TextColor="TextColor.Body">
121+
<CardTitle Size="HeadingSize.Is4">Forms</CardTitle>
122+
</Anchor>
123+
<CardText>
124+
Inputs, validation flows, pickers, focus handling, and more involved editing scenarios.
125+
</CardText>
126+
</CardBody>
127+
</Card>
128+
</Column>
178129

179-
<Row>
180-
<Column Margin="Margin.Is4.OnY">
181-
<Paragraph>
182-
<Strong>Demo application for</Strong>: Blazorise @($"v{VersionProvider.MilestoneVersion}")
183-
</Paragraph>
130+
<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is6.OnTablet.Is12.OnMobile" Margin="Margin.Is4.FromBottom">
131+
<Card Shadow="Shadow.Default" Height="Height.Is100">
132+
<CardBody>
133+
<Icon Name="IconName.Table" IconSize="IconSize.x2" TextColor="TextColor.Info" Margin="Margin.Is2.FromBottom" />
134+
<Anchor To="tests/datagrid" Stretched TextColor="TextColor.Body">
135+
<CardTitle Size="HeadingSize.Is4">DataGrid</CardTitle>
136+
</Anchor>
137+
<CardText>
138+
Sorting, filtering, grouping, editing, virtualization, state management, and selection behavior.
139+
</CardText>
140+
</CardBody>
141+
</Card>
142+
</Column>
143+
144+
<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is6.OnTablet.Is12.OnMobile" Margin="Margin.Is4.FromBottom">
145+
<Card Shadow="Shadow.Default" Height="Height.Is100">
146+
<CardBody>
147+
<Icon Name="IconName.ChartPie" IconSize="IconSize.x2" TextColor="TextColor.Danger" Margin="Margin.Is2.FromBottom" />
148+
<Anchor To="tests/charts" Stretched TextColor="TextColor.Body">
149+
<CardTitle Size="HeadingSize.Is4">Extensions</CardTitle>
150+
</Anchor>
151+
<CardText>
152+
Charts, autocomplete, markdown, scheduler, video, QR code, tree view, and other advanced features.
153+
</CardText>
154+
</CardBody>
155+
</Card>
156+
</Column>
157+
158+
<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is6.OnTablet.Is12.OnMobile" Margin="Margin.Is4.FromBottom">
159+
<Card Shadow="Shadow.Default" Height="Height.Is100">
160+
<CardBody>
161+
<Icon Name="IconName.Flask" IconSize="IconSize.x2" TextColor="TextColor.Secondary" Margin="Margin.Is2.FromBottom" />
162+
<Anchor To="tests/utilities/grid" Stretched TextColor="TextColor.Body">
163+
<CardTitle Size="HeadingSize.Is4">Utilities</CardTitle>
164+
</Anchor>
165+
<CardText>
166+
Layout, spacing, colors, borders, shadows, positioning, and the utility layer used across the pages.
167+
</CardText>
168+
</CardBody>
169+
</Card>
170+
</Column>
171+
172+
<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is6.OnTablet.Is12.OnMobile" Margin="Margin.Is4.FromBottom">
173+
<Card Shadow="Shadow.Default" Height="Height.Is100">
174+
<CardBody>
175+
<Icon Name="IconName.Smartphone" IconSize="IconSize.x2" TextColor="TextColor.Success" Margin="Margin.Is2.FromBottom" />
176+
<Anchor To="apps/todo" Stretched TextColor="TextColor.Body">
177+
<CardTitle Size="HeadingSize.Is4">Sample Apps</CardTitle>
178+
</Anchor>
179+
<CardText>
180+
Small app-style demos that show how Blazorise components work together in a more complete workflow.
181+
</CardText>
182+
</CardBody>
183+
</Card>
184184
</Column>
185-
</Row>
185+
</Row>
186+
187+
<Alert Color="Color.Info" Visible Margin="Margin.Is4.FromBottom">
188+
<AlertMessage>Source and documentation</AlertMessage>
189+
<AlertDescription>
190+
Full source code for this demo application is available on <Anchor To="https://github.com/Megabit/Blazorise/tree/master/Demos/Blazorise.Demo" Target="Target.Blank">GitHub</Anchor>. For component documentation and usage guidance, visit the <Anchor To="https://blazorise.com/docs/" Target="Target.Blank">official Blazorise docs</Anchor>.
191+
</AlertDescription>
192+
</Alert>
193+
194+
<Paragraph TextColor="TextColor.Muted">
195+
<Strong>Demo application for</Strong>: Blazorise @($"v{VersionProvider.MilestoneVersion}")
196+
</Paragraph>

0 commit comments

Comments
 (0)