Skip to content

Commit

Permalink
Add Themes demo page
Browse files Browse the repository at this point in the history
  • Loading branch information
@yordanov
yordanov committed Aug 10, 2023
1 parent 95b099d commit 0e9338a
Show file tree
Hide file tree
Showing 4 changed files with 223 additions and 2 deletions.
1 change: 1 addition & 0 deletions RadzenBlazorDemos/Pages/Index.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,7 @@
</ul>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.H3" class="rz-mt-6">UI Fundamentals</RadzenText>
<ul>
<li><a href="/themes">Themes</a></li>
<li><a href="/colors">Colors</a></li>
<li><a href="/typography">Typography</a></li>
<li><a href="/icon">Icons</a></li>
Expand Down
212 changes: 212 additions & 0 deletions RadzenBlazorDemos/Pages/ThemesPage.razor
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
@page "/themes"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
Themes
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-pb-4">
The Radzen Blazor Components package features an array of both free and premium themes, allowing you to choose the style that best suits your project's requirements.
</RadzenText>
<RadzenRow RowGap="2rem" class="rz-pt-6">
<RadzenColumn Size="12" SizeSM="6" SizeMD="4">
<RadzenCard Variant="Variant.Outlined" class="rz-p-7">
<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2">
Free Themes
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
These themes are free for commercial use. The source SCSS files are licensed under MIT and available on <a href="https://github.com/radzenhq/radzen-blazor" target="_blank">GitHub</a>.
</RadzenText>
<RadzenStack Gap="1rem">
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem" Wrap="FlexWrap.Wrap">
<svg width="160" height="120" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg" style="border-radius: 4px; overflow: hidden; outline: var(--rz-border-disabled); min-width: 80px;">
<rect width="80" height="60" fill="#f5f5f5"></rect>
<rect x="0" y="4" width="16" height="56" fill="#ffffff"></rect>
<rect x="24" y="17" width="48" height="32" rx="2" fill="#ffffff"></rect>
<rect x="43" y="41" width="12" height="4" rx="1" fill="#e91e63"></rect>
<rect x="28" y="21" width="16" height="2" rx="1" fill="#212121"></rect>
<rect x="28" y="27" width="40" height="2" rx="1" fill="#bdbdbd"></rect>
<rect x="28" y="31" width="40" height="2" rx="1" fill="#bdbdbd"></rect>
<rect x="28" y="35" width="16" height="2" rx="1" fill="#bdbdbd"></rect>
<rect x="28" y="41" width="12" height="4" rx="1" fill="#4340d2"></rect>
<rect width="80" height="6" fill="#4340d2"></rect>
</svg>
Material
</RadzenStack>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem" Wrap="FlexWrap.Wrap">
<svg width="160" height="120" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg" style="border-radius: 4px; overflow: hidden; outline: var(--rz-border-disabled); min-width: 80px;">
<rect width="80" height="60" fill="#f4f5f9"></rect>
<rect x="0" y="4" width="16" height="56" fill="#262526"></rect>
<rect x="24" y="17" width="48" height="32" rx="2" fill="#ffffff"></rect>
<rect x="43" y="41" width="12" height="4" rx="1" fill="rgba(17, 81, 243, 0.16)"></rect>
<rect x="28" y="21" width="16" height="2" rx="1" fill="#262526"></rect>
<rect x="28" y="27" width="40" height="2" rx="1" fill="#afafb2"></rect>
<rect x="28" y="31" width="40" height="2" rx="1" fill="#afafb2"></rect>
<rect x="28" y="35" width="16" height="2" rx="1" fill="#afafb2"></rect>
<rect x="28" y="41" width="12" height="4" rx="1" fill="#1151f3"></rect>
<rect width="80" height="6" fill="#ffffff"></rect>
</svg>
Standard
</RadzenStack>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem" Wrap="FlexWrap.Wrap">
<svg width="160" height="120" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg" style="border-radius: 4px; overflow: hidden; outline: var(--rz-border-disabled); min-width: 80px;">
<rect width="80" height="60" fill="#f6f7fa"></rect>
<rect x="0" y="4" width="16" height="56" fill="#3a474d"></rect>
<rect x="24" y="17" width="48" height="32" rx="2" fill="#ffffff"></rect>
<rect x="43" y="41" width="12" height="4" rx="1" fill="#35a0d7"></rect>
<rect x="28" y="21" width="16" height="2" rx="1" fill="#28363c"></rect>
<rect x="28" y="27" width="40" height="2" rx="1" fill="#95a4a8"></rect>
<rect x="28" y="31" width="40" height="2" rx="1" fill="#95a4a8"></rect>
<rect x="28" y="35" width="16" height="2" rx="1" fill="#95a4a8"></rect>
<rect x="28" y="41" width="12" height="4" rx="1" fill="#ff6d41"></rect>
<rect width="80" height="6" fill="#ffffff"></rect></svg>
Default
</RadzenStack>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem" Wrap="FlexWrap.Wrap">
<svg width="160" height="120" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg" style="border-radius: 4px; overflow: hidden; outline: var(--rz-border-disabled); min-width: 80px;">
<rect width="80" height="60" fill="#28363c"></rect>
<rect x="0" y="4" width="16" height="56" fill="#38474e"></rect>
<rect x="24" y="17" width="48" height="32" rx="2" fill="#38474e"></rect>
<rect x="43" y="41" width="12" height="4" rx="1" fill="#35a0d7"></rect>
<rect x="28" y="21" width="16" height="2" rx="1" fill="#ffffff"></rect>
<rect x="28" y="27" width="40" height="2" rx="1" fill="#a8b4b8"></rect>
<rect x="28" y="31" width="40" height="2" rx="1" fill="#a8b4b8"></rect>
<rect x="28" y="35" width="16" height="2" rx="1" fill="#a8b4b8"></rect>
<rect x="28" y="41" width="12" height="4" rx="1" fill="#ff6d41"></rect>
<rect width="80" height="6" fill="#38474e"></rect>
</svg>
Dark
</RadzenStack>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem" Wrap="FlexWrap.Wrap">
<svg width="160" height="120" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg" style="border-radius: 4px; overflow: hidden; outline: var(--rz-border-disabled); min-width: 80px;">
<rect width="80" height="60" fill="#f3f5f7"></rect>
<rect x="0" y="4" width="16" height="56" fill="#30445f"></rect>
<rect x="24" y="17" width="48" height="32" rx="2" fill="#ffffff"></rect>
<rect x="43" y="41" width="12" height="4" rx="1" fill="#3ba5fc"></rect>
<rect x="28" y="21" width="16" height="2" rx="1" fill="#2b3a50"></rect>
<rect x="28" y="27" width="40" height="2" rx="1" fill="#7293b6"></rect>
<rect x="28" y="31" width="40" height="2" rx="1" fill="#7293b6"></rect>
<rect x="28" y="35" width="16" height="2" rx="1" fill="#7293b6"></rect>
<rect x="28" y="41" width="12" height="4" rx="1" fill="#d64d42"></rect>
<rect width="80" height="6" fill="#ffffff"></rect>
</svg>
Humanistic
</RadzenStack>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem" Wrap="FlexWrap.Wrap">
<svg width="160" height="120" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg" style="border-radius: 4px; overflow: hidden; outline: var(--rz-border-disabled); min-width: 80px;">
<rect width="80" height="60" fill="#f6f7fa"></rect>
<rect x="0" y="4" width="16" height="56" fill="#3a474d"></rect>
<rect x="24" y="17" width="48" height="32" rx="2" fill="#ffffff"></rect>
<rect x="43" y="41" width="12" height="4" rx="1" fill="#80a4ab"></rect>
<rect x="28" y="21" width="16" height="2" rx="1" fill="#28363c"></rect>
<rect x="28" y="27" width="40" height="2" rx="1" fill="#95a4a8"></rect>
<rect x="28" y="31" width="40" height="2" rx="1" fill="#95a4a8"></rect>
<rect x="28" y="35" width="16" height="2" rx="1" fill="#95a4a8"></rect>
<rect x="28" y="41" width="12" height="4" rx="1" fill="#598087"></rect>
<rect width="80" height="6" fill="#ffffff"></rect>
</svg>
Software
</RadzenStack>
</RadzenStack>
</RadzenCard>
</RadzenColumn>
<RadzenColumn Size="12" SizeSM="6" SizeMD="4">
<RadzenCard Variant="Variant.Outlined" class="rz-p-7">
<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2">
Premium Themes <RadzenBadge title="To use it in your application you need an active Radzen Professional or Enterprise subscription." Shade="Shade.Light" Style="vertical-align: top;">PRO</RadzenBadge>
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
Premium themes can be used with an active <a href="https://www.radzen.com/pricing/" title="See Radzen Pricing" target="_blank">Radzen Professional or Enterprise subscription</a>.
</RadzenText>
<RadzenStack Gap="1rem">
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem" Wrap="FlexWrap.Wrap">
<svg width="160" height="120" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg" style="border-radius: 4px; overflow: hidden; outline: var(--rz-border-disabled); min-width: 80px;">
<rect width="80" height="60" fill="#121212"></rect>
<rect x="0" y="4" width="16" height="56" fill="#252525"></rect>
<rect x="24" y="17" width="48" height="32" rx="2" fill="#252525"></rect>
<rect x="43" y="41" width="12" height="4" rx="1" fill="#01a299"></rect>
<rect x="28" y="21" width="16" height="2" rx="1" fill="#ffffff"></rect>
<rect x="28" y="27" width="40" height="2" rx="1" fill="#a0a0a0"></rect>
<rect x="28" y="31" width="40" height="2" rx="1" fill="#a0a0a0"></rect>
<rect x="28" y="35" width="16" height="2" rx="1" fill="#a0a0a0"></rect>
<rect x="28" y="41" width="12" height="4" rx="1" fill="#bb86fc"></rect>
<rect width="80" height="6" fill="#333333"></rect>
</svg>
Material Dark
</RadzenStack>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem" Wrap="FlexWrap.Wrap">
<svg width="160" height="120" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg" style="border-radius: 4px; overflow: hidden; outline: var(--rz-border-disabled); min-width: 80px;">
<rect width="80" height="60" fill="#f4f5f9"></rect>
<rect x="0" y="4" width="16" height="56" fill="#262526"></rect>
<rect x="24" y="17" width="48" height="32" rx="2" fill="#ffffff"></rect>
<rect x="43" y="41" width="12" height="4" rx="1" fill="rgba(17, 81, 243, 0.16)"></rect>
<rect x="28" y="21" width="16" height="2" rx="1" fill="#262526"></rect>
<rect x="28" y="27" width="40" height="2" rx="1" fill="#afafb2"></rect>
<rect x="28" y="31" width="40" height="2" rx="1" fill="#afafb2"></rect>
<rect x="28" y="35" width="16" height="2" rx="1" fill="#afafb2"></rect>
<rect x="28" y="41" width="12" height="4" rx="1" fill="#1151f3"></rect>
<rect width="80" height="6" fill="#ffffff"></rect>
</svg>
Material 3
</RadzenStack>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem" Wrap="FlexWrap.Wrap">
<svg width="160" height="120" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg" style="border-radius: 4px; overflow: hidden; outline: var(--rz-border-disabled); min-width: 80px;">
<rect width="80" height="60" fill="#121418"></rect>
<rect x="0" y="4" width="16" height="56" fill="#1f2226"></rect>
<rect x="24" y="17" width="48" height="32" rx="2" fill="#1b1d20"></rect>
<rect x="43" y="41" width="12" height="4" rx="1" fill="#c2cbdc"></rect>
<rect x="28" y="21" width="16" height="2" rx="1" fill="#e0e0e9"></rect>
<rect x="28" y="27" width="40" height="2" rx="1" fill="#e0e0e9"></rect>
<rect x="28" y="31" width="40" height="2" rx="1" fill="#e0e0e9"></rect>
<rect x="28" y="35" width="16" height="2" rx="1" fill="#e0e0e9"></rect>
<rect x="28" y="41" width="12" height="4" rx="1" fill="#94c1ff"></rect>
<rect width="80" height="6" fill="#1f2226"></rect>
</svg>
Material 3 Dark
</RadzenStack>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem" Wrap="FlexWrap.Wrap">
<svg width="160" height="120" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg" style="border-radius: 4px; overflow: hidden; outline: var(--rz-border-disabled); min-width: 80px;">
<rect width="80" height="60" fill="#f5f5f5"></rect>
<rect x="0" y="4" width="16" height="56" fill="gray"></rect>
<rect x="24" y="17" width="48" height="32" rx="2" fill="white"></rect>
<rect x="43" y="41" width="12" height="4" rx="1" fill="#2b88d8"></rect>
<rect x="28" y="21" width="16" height="2" rx="1" fill="black"></rect>
<rect x="28" y="27" width="40" height="2" rx="1" fill="black"></rect>
<rect x="28" y="31" width="40" height="2" rx="1" fill="black"></rect>
<rect x="28" y="35" width="16" height="2" rx="1" fill="black"></rect>
<rect x="28" y="41" width="12" height="4" rx="1" fill="#0078d4"></rect>
<rect width="80" height="6" fill="white"></rect>
</svg>
Fluent
</RadzenStack>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem" Wrap="FlexWrap.Wrap">
<svg width="160" height="120" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg" style="border-radius: 4px; overflow: hidden; outline: var(--rz-border-disabled); min-width: 80px;">
<rect width="80" height="60" fill="#292929"></rect>
<rect x="0" y="4" width="16" height="56" fill="#141414"></rect>
<rect x="24" y="17" width="48" height="32" rx="2" fill="#333333"></rect>
<rect x="43" y="41" width="12" height="4" rx="1" fill="#5c5c5c"></rect>
<rect x="28" y="21" width="16" height="2" rx="1" fill="#ffffff"></rect>
<rect x="28" y="27" width="40" height="2" rx="1" fill="#d6d6d6"></rect>
<rect x="28" y="31" width="40" height="2" rx="1" fill="#d6d6d6"></rect>
<rect x="28" y="35" width="16" height="2" rx="1" fill="#d6d6d6"></rect>
<rect x="28" y="41" width="12" height="4" rx="1" fill="#0078d4"></rect>
<rect width="80" height="6" fill="#141414"></rect>
</svg>
Fluent Dark
</RadzenStack>
</RadzenStack>
</RadzenCard>
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="4">
<RadzenCard Variant="Variant.Outlined" class="rz-p-7">
<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2">
Swatches <RadzenBadge title="To use it in your application you need an active Radzen Professional or Enterprise subscription." Shade="Shade.Light" Style="vertical-align: top;">PRO</RadzenBadge>
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
Swatches are a premium feature of Radzen Blazor Studio. Each theme contains a collection of predefined color swatches to pick from.
</RadzenText>
<RadzenLink Path="https://www.radzen.com/blazor-studio/documentation/appearance/themes-and-swatches/#swatches" target="_blank">
<RadzenImage Path="images/radzen-blazor-material3-theme.gif" Style="width: 100%" Class="rz-mb-6"></RadzenImage>
Read more about swatches ↗
</RadzenLink>
</RadzenCard>
</RadzenColumn>
</RadzenRow>
12 changes: 10 additions & 2 deletions RadzenBlazorDemos/Services/ExampleService.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,19 @@ public class ExampleService
Name = "UI Fundamentals",
Icon = "&#xe749",
Children = new [] {
new Example()
{
Name = "Themes",
Path = "themes",
Title = "Blazor Themes",
Icon = "&#xe40a",
Tags = new[] { "theme", "color", "background", "border", "utility", "css", "var"}
},
new Example()
{
Name = "Colors",
Path = "colors",
Title = "Blazor theme colors",
Title = "Blazor Theme Colors",
Icon = "&#xe891",
Tags = new[] { "color", "background", "border", "utility", "css", "var"}
},
Expand Down Expand Up @@ -1311,7 +1319,7 @@ public class ExampleService
Name = "Timeline",
New = true,
Path = "timeline",
Title = "Timeline component",
Title = "Blazor Timeline component",
Icon = "&#xe00d",
Tags = new [] { "timeline", "time", "line" }
},
Expand Down
Binary file added RadzenBlazorDemos/wwwroot/images/radzen-blazor-material3-theme.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 0e9338a

Please sign in to comment.