Skip to content

Commit

Permalink
UI Blocks (#1806)
Browse files Browse the repository at this point in the history 
Add UI Blocks
  • Loading branch information
@yordanov
yordanov authored Nov 21, 2024
1 parent a0f1545 commit eed82f2
Show file tree
Hide file tree
Showing 12 changed files with 779 additions and 3 deletions.
1 change: 1 addition & 0 deletions RadzenBlazorDemos/Models/Example.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ public class Example
{
public bool New { get; set; }
public bool Updated { get; set; }
public bool Pro { get; set; }
public string Name { get; set; }
public string Icon { get; set; }
public string Path { get; set; }
Expand Down
15 changes: 15 additions & 0 deletions RadzenBlazorDemos/Pages/Index.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,21 @@
</RadzenColumn>
</RadzenRow>
<RadzenRow class="rz-mt-8 rz-mt-sm-6 rz-pt-sm-6 rz-mt-lg-12 rz-pt-lg-12">
<RadzenColumn Size="12" SizeMD="3" SizeLG="2" SizeXL="3">
<RadzenText TextStyle="TextStyle.H4" TagName="TagName.H3">UI Blocks <RadzenBadge BadgeStyle="BadgeStyle.Danger" Text="Pro" Title="Pro" Style="vertical-align: top;" /></RadzenText>
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="9" SizeLG="10" SizeXL="9" class="rz-ps-6 rz-ps-md-0 components-list">
<RadzenRow RowGap="1.5rem">
<RadzenColumn Size="12" SizeXS="6" SizeSM="4" SizeLG="3"><RadzenLink Path="/ui-blocks-cards"><RadzenIcon aria-hidden="true" Icon="&#xe991" /><span>Cards</span><RadzenBadge BadgeStyle="BadgeStyle.Success" Title="New"><RadzenIcon aria-hidden="true" Icon="&#xe061" /><span>New</span></RadzenBadge></RadzenLink></RadzenColumn>
<RadzenColumn Size="12" SizeXS="6" SizeSM="4" SizeLG="3"><RadzenLink Path="/ui-blocks-cta"><RadzenIcon aria-hidden="true" Icon="&#xe06c" /><span>Call-to-Action</span><RadzenBadge BadgeStyle="BadgeStyle.Success" Title="New"><RadzenIcon aria-hidden="true" Icon="&#xe061" /><span>New</span></RadzenBadge></RadzenLink></RadzenColumn>
<RadzenColumn Size="12" SizeXS="6" SizeSM="4" SizeLG="3"><RadzenLink Path="/ui-blocks-features"><RadzenIcon aria-hidden="true" Icon="&#xe031" /><span>Features</span><RadzenBadge BadgeStyle="BadgeStyle.Success" Title="New"><RadzenIcon aria-hidden="true" Icon="&#xe061" /><span>New</span></RadzenBadge></RadzenLink></RadzenColumn>
<RadzenColumn Size="12" SizeXS="6" SizeSM="4" SizeLG="3"><RadzenLink Path="/ui-blocks-footers"><RadzenIcon aria-hidden="true" Icon="&#xf7e6" /><span>Footers</span><RadzenBadge BadgeStyle="BadgeStyle.Success" Title="New"><RadzenIcon aria-hidden="true" Icon="&#xe061" /><span>New</span></RadzenBadge></RadzenLink></RadzenColumn>
<RadzenColumn Size="12" SizeXS="6" SizeSM="4" SizeLG="3"><RadzenLink Path="/ui-blocks-page-headings"><RadzenIcon aria-hidden="true" Icon="&#xe9ea" /><span>Page Headings</span><RadzenBadge BadgeStyle="BadgeStyle.Success" Title="New"><RadzenIcon aria-hidden="true" Icon="&#xe061" /><span>New</span></RadzenBadge></RadzenLink></RadzenColumn>
</RadzenRow>
</RadzenColumn>
</RadzenRow>
<RadzenRow class="rz-mt-8 rz-mt-sm-6 rz-pt-sm-6 rz-mt-lg-12 rz-pt-lg-12">
<RadzenColumn Size="12" SizeMD="3" SizeLG="2" SizeXL="3">
<RadzenText TextStyle="TextStyle.H4" TagName="TagName.H3">Images</RadzenText>
Expand Down
133 changes: 133 additions & 0 deletions RadzenBlazorDemos/Pages/UIBlocksCardPage.razor
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
@page "/ui-blocks-cards"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
Cards
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4" Style="max-width: 1000px;">
A Card block is a modular UI component used in web and app design to present information in a visually compact and organized manner. It groups related content, such as text, images, and actions, into a single container, making it easy for users to scan and interact with.
</RadzenText>

<RadzenText Anchor="ui-blocks-footers#footer-with-sitemap" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
Simple stats
</RadzenText>
<RadzenCard class="rz-p-0 rz-material-3-demo-card">
<RadzenTabs class="example-tabs">
<Tabs>
<RadzenTabsItem Text="Outlined card">
<RadzenCard Variant="Radzen.Variant.Outlined" class="rz-my-12 rz-mx-auto" Style="width: 300px;">
<RadzenText Text="Unique visitors" TextStyle="Radzen.Blazor.TextStyle.Overline" TagName="Radzen.Blazor.TagName.H4" class="rz-mb-1" />
<RadzenText Text="31,861" TagName="Radzen.Blazor.TagName.P" TextStyle="Radzen.Blazor.TextStyle.H4" />
</RadzenCard>
</RadzenTabsItem>
<UIBlocks />
</Tabs>
</RadzenTabs>
</RadzenCard>

<RadzenText Anchor="ui-blocks-footers#centered-footer" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
Simple stats with icon
</RadzenText>
<RadzenCard class="rz-p-0 rz-material-3-demo-card">
<RadzenTabs class="example-tabs">
<Tabs>
<RadzenTabsItem Text="Filled card">
<RadzenCard class="rz-my-12 rz-mx-auto" Style="width: 400px;">
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="1rem" AlignItems="Radzen.AlignItems.Center" Wrap="Radzen.FlexWrap.Wrap">
<RadzenIcon Icon="account_circle" class="rz-background-color-primary-light rz-color-on-primary-light rz-border-radius-10" Style="font-size: 32px; min-height: 56px; min-width: 56px"></RadzenIcon>
<RadzenStack Gap="0">
<RadzenText Text="Unique visitors" TextStyle="Radzen.Blazor.TextStyle.Overline" TagName="Radzen.Blazor.TagName.H4" class="rz-mb-1 rz-overflow-hidden" />
<RadzenText Text="31,861" TagName="Radzen.Blazor.TagName.P" TextStyle="Radzen.Blazor.TextStyle.H4" />
</RadzenStack>
</RadzenStack>
</RadzenCard>
</RadzenTabsItem>
<UIBlocks />
</Tabs>
</RadzenTabs>
</RadzenCard>

<RadzenText Anchor="ui-blocks-footers#centered-footer" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
Stats with trends
</RadzenText>
<RadzenCard class="rz-p-0 rz-material-3-demo-card">
<RadzenTabs class="example-tabs">
<Tabs>
<RadzenTabsItem Text="Outlined card">
<RadzenCard Variant="Radzen.Variant.Outlined" class="rz-my-12 rz-mx-auto" Style="width: 400px;">
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="1rem" AlignItems="Radzen.AlignItems.Center" Wrap="Radzen.FlexWrap.Wrap">
<RadzenIcon Icon="web_traffic" class="rz-background-color-primary-light rz-color-on-primary-light rz-border-radius-10" Style="font-size: 32px; min-width: 56px; min-height: 56px"></RadzenIcon>
<RadzenStack Gap="0">
<RadzenText Text="Avg. Click Rate" TextStyle="Radzen.Blazor.TextStyle.Overline" TagName="Radzen.Blazor.TagName.H4" class="rz-mb-1" />
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.End" Wrap="Radzen.FlexWrap.Wrap">
<RadzenText Text="13.56%" TagName="Radzen.Blazor.TagName.P" TextStyle="Radzen.Blazor.TextStyle.H4" class="rz-m-0" />
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.25rem" AlignItems="Radzen.AlignItems.Center">
<RadzenIcon Icon="trending_up" class="rz-color-success"></RadzenIcon>
<RadzenText Text="23%" TextStyle="Radzen.Blazor.TextStyle.Body1" class="rz-color-success rz-m-0" />
</RadzenStack>
</RadzenStack>
</RadzenStack>
</RadzenStack>
</RadzenCard>
</RadzenTabsItem>
<UIBlocks />
</Tabs>
</RadzenTabs>
</RadzenCard>

<RadzenText Anchor="ui-blocks-footers#centered-footer" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
Stats with trends to the right
</RadzenText>
<RadzenCard class="rz-p-0 rz-material-3-demo-card">
<RadzenTabs class="example-tabs">
<Tabs>
<RadzenTabsItem Text="Flat card">
<RadzenCard Variant="Radzen.Variant.Flat" class="rz-my-12 rz-mx-auto" Style="width: 400px;">
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="1rem" AlignItems="Radzen.AlignItems.Center">
<RadzenIcon Icon="timer" class="rz-background-color-primary-light rz-color-on-primary-light rz-border-radius-10" Style="font-size: 32px; min-width: 64px; min-height: 64px"></RadzenIcon>
<RadzenStack Gap="0" class="rz-w-100">
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" JustifyContent="Radzen.JustifyContent.SpaceBetween" AlignItems="Radzen.AlignItems.Start" Wrap="Radzen.FlexWrap.Wrap">
<RadzenText Text="Time on site" TextStyle="Radzen.Blazor.TextStyle.Subtitle1" TagName="Radzen.Blazor.TagName.H4" class="rz-m-0" />
<RadzenBadge BadgeStyle="Radzen.BadgeStyle.Success" Shade="Radzen.Shade.Light" IsPill="true">
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.125rem" Style="padding: 0.25rem; text-transform: none;">
<RadzenIcon Icon="south" Style="font-size: 0.75rem"></RadzenIcon><span style="font-size: 0.75rem">12s</span>
</RadzenStack>
</RadzenBadge>
</RadzenStack>
<RadzenText Text="2m 31s" TagName="Radzen.Blazor.TagName.P" TextStyle="Radzen.Blazor.TextStyle.H3" class="rz-m-0" />
</RadzenStack>
</RadzenStack>
</RadzenCard>
</RadzenTabsItem>
<UIBlocks />
</Tabs>
</RadzenTabs>
</RadzenCard>

<RadzenText Anchor="ui-blocks-footers#centered-footer" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
Stats with square icon
</RadzenText>
<RadzenCard class="rz-p-0 rz-material-3-demo-card">
<RadzenTabs class="example-tabs">
<Tabs>
<RadzenTabsItem Text="Outlined card">
<RadzenCard Variant="Radzen.Variant.Outlined" class="rz-my-12 rz-mx-auto" Style="width: 400px;">
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="1rem" AlignItems="Radzen.AlignItems.Start">
<RadzenIcon Icon="timer" class="rz-background-color-primary-light rz-color-on-primary-light rz-border-radius-2" Style="font-size: 32px; min-width: 64px; min-height: 64px"></RadzenIcon>
<RadzenStack Gap="0">
<RadzenText Text="Avg. Visit Duration" TextStyle="Radzen.Blazor.TextStyle.Subtitle1" TagName="Radzen.Blazor.TagName.H4" class="rz-m-0" />
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.End">
<RadzenText Text="2m 31s" TagName="Radzen.Blazor.TagName.P" TextStyle="Radzen.Blazor.TextStyle.H3" class="rz-m-0" />
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.25rem" AlignItems="Radzen.AlignItems.Center">
<RadzenIcon Icon="trending_down" class="rz-color-danger"></RadzenIcon>
<RadzenText Text="12s" TextStyle="Radzen.Blazor.TextStyle.Body1" class="rz-color-danger rz-m-0" />
</RadzenStack>
</RadzenStack>
</RadzenStack>
</RadzenStack>
</RadzenCard>
</RadzenTabsItem>
<UIBlocks />
</Tabs>
</RadzenTabs>
</RadzenCard>
Loading

0 comments on commit eed82f2

Please sign in to comment.