From 37032ec4395169859e5bc9e970faa5af601a28eb Mon Sep 17 00:00:00 2001 From: yordanov Date: Tue, 19 Nov 2024 17:32:22 +0200 Subject: [PATCH 1/6] Add UI blocks --- RadzenBlazorDemos/Models/Example.cs | 1 + RadzenBlazorDemos/Pages/UIBlocksCtaPage.razor | 192 ++++++++++++++++++ .../Pages/UIBlocksFooterPage.razor | 181 +++++++++++++++++ .../Pages/UIBlocksHeaderPage.razor | 136 +++++++++++++ RadzenBlazorDemos/Services/ExampleService.cs | 44 +++- RadzenBlazorDemos/Shared/MainLayout.razor | 5 +- RadzenBlazorDemos/Shared/NavigationItem.razor | 3 +- RadzenBlazorDemos/wwwroot/css/site.css | 6 + 8 files changed, 565 insertions(+), 3 deletions(-) create mode 100644 RadzenBlazorDemos/Pages/UIBlocksCtaPage.razor create mode 100644 RadzenBlazorDemos/Pages/UIBlocksFooterPage.razor create mode 100644 RadzenBlazorDemos/Pages/UIBlocksHeaderPage.razor diff --git a/RadzenBlazorDemos/Models/Example.cs b/RadzenBlazorDemos/Models/Example.cs index 692005fc292..17c7c1021bf 100644 --- a/RadzenBlazorDemos/Models/Example.cs +++ b/RadzenBlazorDemos/Models/Example.cs @@ -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; } diff --git a/RadzenBlazorDemos/Pages/UIBlocksCtaPage.razor b/RadzenBlazorDemos/Pages/UIBlocksCtaPage.razor new file mode 100644 index 00000000000..5411de51cee --- /dev/null +++ b/RadzenBlazorDemos/Pages/UIBlocksCtaPage.razor @@ -0,0 +1,192 @@ +@page "/ui-blocks-cta" + + + Call-to-Action blocks + + + + A CTA block (Call-to-Action block) is a section of a webpage, advertisement, or any form of content designed to prompt users to take a specific action. It's a focused and visually distinct area that guides users toward the next step, aligning with the goals of the page or campaign. + + + + Centered CTA + + + A call-to-action block with centered content. + + + + + + + + + + + + + + + + + + + + + + + + UI Blocks PRO + + + UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . + + + See Pricing + + + + + + + + + + Left-aligned CTA + + + A call-to-action block with content aligned to the left. + + + + + + + + + + + + + + + + + + + + + + + + UI Blocks PRO + + + UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . + + + See Pricing + + + + + + + + + + Image to the left + + + A call-to-action block with an image to the left hand side. + + + + + + + + + + + + + + + + + + + + + + + + + + + UI Blocks PRO + + + UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . + + + See Pricing + + + + + + + + + + Image to the right + + + A call-to-action block with an image to the right hand side. + + + + + + + + + + + + + + + + + + + + + + + + + + + UI Blocks PRO + + + UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . + + + See Pricing + + + + + + + + + + + + diff --git a/RadzenBlazorDemos/Pages/UIBlocksFooterPage.razor b/RadzenBlazorDemos/Pages/UIBlocksFooterPage.razor new file mode 100644 index 00000000000..e2dbfaaac9b --- /dev/null +++ b/RadzenBlazorDemos/Pages/UIBlocksFooterPage.razor @@ -0,0 +1,181 @@ +@page "/ui-blocks-footers" + + + Footers + + + + A Footer block is the section at the bottom of a webpage or a dashboard, typically serving as a navigational and informational hub. It's an essential UI component, offering users access to key information, links, and resources that might not fit naturally in other parts of the screen. + + + + Footer with a sitemap + + + A footer with navigation links in four columns. + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + UI Blocks PRO + + + UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . + + + See Pricing + + + + + + + + + + Centered Footer + + + A simple centered footer containing main navigation links and copyright info. + + + + + + + + + + + + + + + + + + + + + + + + + + + UI Blocks PRO + + + UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . + + + See Pricing + + + + + + + + + + + Simple Footer + + + A basic footer containing copyright info. + + + + + + + + + + + + + + + + UI Blocks PRO + + + UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . + + + See Pricing + + + + + + + + + + + + + diff --git a/RadzenBlazorDemos/Pages/UIBlocksHeaderPage.razor b/RadzenBlazorDemos/Pages/UIBlocksHeaderPage.razor new file mode 100644 index 00000000000..a2990b06759 --- /dev/null +++ b/RadzenBlazorDemos/Pages/UIBlocksHeaderPage.razor @@ -0,0 +1,136 @@ +@page "/ui-blocks-page-headers" + + + Page Headers + + + + A Page Header block is a prominent section at the top, distinct from the global header. It serves to introduce the content or purpose of the page, setting the tone and context for what follows. Often, it includes a title and supplementary elements that help orient the user. + + + + Title with actions + + + + + + + + + + + + + + + + + + + + + + + UI Blocks PRO + + + UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . + + + See Pricing + + + + + + + + + + Title with breadcrumbs + + + + + + + + + + + + + + + + + + + + UI Blocks PRO + + + UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . + + + See Pricing + + + + + + + + + + + Title with breadcrumbs and actions + + + + + + + + + + + + + + + + + + + + + + + + + + + + + UI Blocks PRO + + + UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . + + + See Pricing + + + + + + + + + + + + + diff --git a/RadzenBlazorDemos/Services/ExampleService.cs b/RadzenBlazorDemos/Services/ExampleService.cs index 5144fc4c583..26dd9d72eed 100644 --- a/RadzenBlazorDemos/Services/ExampleService.cs +++ b/RadzenBlazorDemos/Services/ExampleService.cs @@ -20,7 +20,7 @@ public class ExampleService Updated = true, Title = "Sample Dashboard | Free UI Components by Radzen", Description = "Rich dashboard created with the Radzen Blazor Components library.", - Icon = "" + Icon = "" }, new Example { @@ -191,6 +191,48 @@ public class ExampleService } }, + new Example + { + Name = "UI Blocks", + Pro = true, + New = true, + Title = "Blazor UI Blocks", + Description = "Ready to use UI building blocks and templates", + Icon = "", + Children = new[] { + new Example + { + Name = "Page Headers", + Title = "Blazor Page Header | UI Blocks by Radzen", + New = true, + Icon = "", + Description = "Preconfigured Page Header UI Blocks", + Path = "ui-blocks-page-headers", + Tags = new [] { "headers", "header", "page", "title" } + }, + new Example + { + Name = "Call-to-Action", + Title = "Blazor Call-to-Action | UI Blocks by Radzen", + New = true, + Icon = "", + Description = "Examples of CTA UI Blocks", + Path = "ui-blocks-cta", + Tags = new [] { "cta", "call-to-action", "call", "action", "button" } + }, + new Example + { + Name = "Footers", + Title = "Blazor Footer | UI Blocks by Radzen", + New = true, + Icon = "", + Description = "Preconfigured Footer UI Blocks", + Path = "ui-blocks-footers", + Tags = new [] { "footer" } + }, + } + }, + new Example { Name = "DataGrid", diff --git a/RadzenBlazorDemos/Shared/MainLayout.razor b/RadzenBlazorDemos/Shared/MainLayout.razor index 637422062db..94db0a595a0 100644 --- a/RadzenBlazorDemos/Shared/MainLayout.razor +++ b/RadzenBlazorDemos/Shared/MainLayout.razor @@ -11,7 +11,7 @@ - + @@ -160,6 +160,9 @@ + + Footer + @if (!rendered) diff --git a/RadzenBlazorDemos/Shared/NavigationItem.razor b/RadzenBlazorDemos/Shared/NavigationItem.razor index 4f3f2c6721c..aa4054f9586 100644 --- a/RadzenBlazorDemos/Shared/NavigationItem.razor +++ b/RadzenBlazorDemos/Shared/NavigationItem.razor @@ -1,5 +1,5 @@ @inject NavigationManager navigationManager; -@if (!Example.New && !Example.Updated) +@if (!Example.New && !Example.Updated && !Example.Pro) { @ChildContent @@ -12,6 +12,7 @@ else @Example.Name + @ChildContent diff --git a/RadzenBlazorDemos/wwwroot/css/site.css b/RadzenBlazorDemos/wwwroot/css/site.css index 322aee2207d..121c9a42081 100644 --- a/RadzenBlazorDemos/wwwroot/css/site.css +++ b/RadzenBlazorDemos/wwwroot/css/site.css @@ -634,4 +634,10 @@ svg.illustration { inset-inline-start: 0; width: 100%; height: 100%; +} + +@media (max-width: 767px) { + .rz-layout { + height: 100dvh !important; + } } \ No newline at end of file From b4fc92ca173939e79160bcc22989ba55f2f26113 Mon Sep 17 00:00:00 2001 From: yordanov Date: Wed, 20 Nov 2024 17:54:38 +0200 Subject: [PATCH 2/6] Add and update UI Blocks --- RadzenBlazorDemos/Pages/Index.razor | 15 ++ .../Pages/UIBlocksCardPage.razor | 203 ++++++++++++++++++ RadzenBlazorDemos/Pages/UIBlocksCtaPage.razor | 53 ++++- .../Pages/UIBlocksFeaturesPage.razor | 171 +++++++++++++++ .../Pages/UIBlocksFooterPage.razor | 6 +- ...erPage.razor => UIBlocksHeadingPage.razor} | 18 +- RadzenBlazorDemos/Services/ExampleService.cs | 31 ++- 7 files changed, 473 insertions(+), 24 deletions(-) create mode 100644 RadzenBlazorDemos/Pages/UIBlocksCardPage.razor create mode 100644 RadzenBlazorDemos/Pages/UIBlocksFeaturesPage.razor rename RadzenBlazorDemos/Pages/{UIBlocksHeaderPage.razor => UIBlocksHeadingPage.razor} (91%) diff --git a/RadzenBlazorDemos/Pages/Index.razor b/RadzenBlazorDemos/Pages/Index.razor index 83e870903ab..130f2f99a06 100644 --- a/RadzenBlazorDemos/Pages/Index.razor +++ b/RadzenBlazorDemos/Pages/Index.razor @@ -181,6 +181,21 @@ + + + UI Blocks + + + + + + + + + + + + Images diff --git a/RadzenBlazorDemos/Pages/UIBlocksCardPage.razor b/RadzenBlazorDemos/Pages/UIBlocksCardPage.razor new file mode 100644 index 00000000000..b2e1c16760b --- /dev/null +++ b/RadzenBlazorDemos/Pages/UIBlocksCardPage.razor @@ -0,0 +1,203 @@ +@page "/ui-blocks-cards" + + + Cards + + + + 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. + + + + Simple stats + + + + + + + + + + + + + + + UI Blocks PRO + + + UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . + + + See Pricing + + + + + + + + + + Simple stats with icon + + + + + + + + + + + + + + + + + + + + UI Blocks PRO + + + UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . + + + See Pricing + + + + + + + + + + Stats with trends + + + + + + + + + + + + + + + + + + + + + + + + + + UI Blocks PRO + + + UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . + + + See Pricing + + + + + + + + + + Stats with trends to the right + + + + + + + + + + + + + + 12s + + + + + + + + + + + + + UI Blocks PRO + + + UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . + + + See Pricing + + + + + + + + + + Stats with square icon + + + + + + + + + + + + + + + + + + + + + + + + + + UI Blocks PRO + + + UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . + + + See Pricing + + + + + + + diff --git a/RadzenBlazorDemos/Pages/UIBlocksCtaPage.razor b/RadzenBlazorDemos/Pages/UIBlocksCtaPage.razor index 5411de51cee..1141102cab5 100644 --- a/RadzenBlazorDemos/Pages/UIBlocksCtaPage.razor +++ b/RadzenBlazorDemos/Pages/UIBlocksCtaPage.razor @@ -32,7 +32,7 @@ - + @@ -75,7 +75,7 @@ - + @@ -94,6 +94,51 @@ + + Justified CTA + + + A call-to-action block with content aligned to the left and actions aligned to the right. + + + + + + + + + + + + + + + + + + + + + + + + + UI Blocks PRO + + + UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . + + + See Pricing + + + + + + + + + Image to the left @@ -121,7 +166,7 @@ - + @@ -167,7 +212,7 @@ - + diff --git a/RadzenBlazorDemos/Pages/UIBlocksFeaturesPage.razor b/RadzenBlazorDemos/Pages/UIBlocksFeaturesPage.razor new file mode 100644 index 00000000000..3bfd75b00f9 --- /dev/null +++ b/RadzenBlazorDemos/Pages/UIBlocksFeaturesPage.razor @@ -0,0 +1,171 @@ +@page "/ui-blocks-features" + + + Features + + + + A Features UI Block is a design element used in websites and applications to highlight the key features, benefits, or capabilities of a product, service, or concept. It is typically structured to attract attention and provide clear, concise information, helping users understand why the highlighted elements are valuable. + + + + Features with small icons + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + UI Blocks PRO + + + UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . + + + See Pricing + + + + + + + + + + Features with large icons on top + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + UI Blocks PRO + + + UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . + + + See Pricing + + + + + + + + + + Centered features + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + UI Blocks PRO + + + UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . + + + See Pricing + + + + + + + diff --git a/RadzenBlazorDemos/Pages/UIBlocksFooterPage.razor b/RadzenBlazorDemos/Pages/UIBlocksFooterPage.razor index e2dbfaaac9b..3cc5b4565cc 100644 --- a/RadzenBlazorDemos/Pages/UIBlocksFooterPage.razor +++ b/RadzenBlazorDemos/Pages/UIBlocksFooterPage.razor @@ -73,7 +73,7 @@ - + @@ -119,7 +119,7 @@ - + @@ -155,7 +155,7 @@ - + diff --git a/RadzenBlazorDemos/Pages/UIBlocksHeaderPage.razor b/RadzenBlazorDemos/Pages/UIBlocksHeadingPage.razor similarity index 91% rename from RadzenBlazorDemos/Pages/UIBlocksHeaderPage.razor rename to RadzenBlazorDemos/Pages/UIBlocksHeadingPage.razor index a2990b06759..d4650d26011 100644 --- a/RadzenBlazorDemos/Pages/UIBlocksHeaderPage.razor +++ b/RadzenBlazorDemos/Pages/UIBlocksHeadingPage.razor @@ -1,14 +1,14 @@ -@page "/ui-blocks-page-headers" +@page "/ui-blocks-page-headings" - Page Headers + Page Headings - A Page Header block is a prominent section at the top, distinct from the global header. It serves to introduce the content or purpose of the page, setting the tone and context for what follows. Often, it includes a title and supplementary elements that help orient the user. + A Page Heading block is a prominent section at the top, distinct from the global header. It serves to introduce the content or purpose of the page, setting the tone and context for what follows. Often, it includes a title and supplementary elements that help orient the user. - + Title with actions @@ -28,7 +28,7 @@ - + @@ -47,7 +47,7 @@ - + Title with breadcrumbs @@ -64,7 +64,7 @@ - + @@ -84,7 +84,7 @@ - + Title with breadcrumbs and actions @@ -110,7 +110,7 @@ - + diff --git a/RadzenBlazorDemos/Services/ExampleService.cs b/RadzenBlazorDemos/Services/ExampleService.cs index 26dd9d72eed..e11b080300b 100644 --- a/RadzenBlazorDemos/Services/ExampleService.cs +++ b/RadzenBlazorDemos/Services/ExampleService.cs @@ -202,19 +202,35 @@ public class ExampleService Children = new[] { new Example { - Name = "Page Headers", - Title = "Blazor Page Header | UI Blocks by Radzen", - New = true, + Name = "Cards", + Title = "Blazor Cards | UI Blocks by Radzen", + Icon = "", + Description = "Examples of Card Blocks", + Path = "ui-blocks-cards", + Tags = new [] { "card", "stats", "products" } + }, + new Example + { + Name = "Page Headings", + Title = "Blazor Page Heading | UI Blocks by Radzen", Icon = "", - Description = "Preconfigured Page Header UI Blocks", - Path = "ui-blocks-page-headers", - Tags = new [] { "headers", "header", "page", "title" } + Description = "Preconfigured Page Heading UI Blocks", + Path = "ui-blocks-page-headings", + Tags = new [] { "headings", "heading", "page", "title" } + }, + new Example + { + Name = "Features", + Title = "Blazor Features | UI Blocks by Radzen", + Icon = "", + Description = "Examples of Features Blocks", + Path = "ui-blocks-features", + Tags = new [] { "feature", "list" } }, new Example { Name = "Call-to-Action", Title = "Blazor Call-to-Action | UI Blocks by Radzen", - New = true, Icon = "", Description = "Examples of CTA UI Blocks", Path = "ui-blocks-cta", @@ -224,7 +240,6 @@ public class ExampleService { Name = "Footers", Title = "Blazor Footer | UI Blocks by Radzen", - New = true, Icon = "", Description = "Preconfigured Footer UI Blocks", Path = "ui-blocks-footers", From 6d3f22a3e7430ed4e9fbaaa321b78833b2ece60d Mon Sep 17 00:00:00 2001 From: yordanov Date: Thu, 21 Nov 2024 10:52:30 +0200 Subject: [PATCH 3/6] Update UI blocks source tab --- RadzenBlazorDemos/Pages/MasonryConfig.razor | 42 ++++++++++ RadzenBlazorDemos/Pages/MasonryPage.razor | 15 ++++ .../Pages/UIBlocksCardPage.razor | 80 ++----------------- RadzenBlazorDemos/Pages/UIBlocksCtaPage.razor | 80 ++----------------- .../Pages/UIBlocksFeaturesPage.razor | 48 +---------- .../Pages/UIBlocksFooterPage.razor | 48 +---------- .../Pages/UIBlocksHeadingPage.razor | 48 +---------- RadzenBlazorDemos/Shared/UIBlocks.razor | 15 ++++ 8 files changed, 91 insertions(+), 285 deletions(-) create mode 100644 RadzenBlazorDemos/Pages/MasonryConfig.razor create mode 100644 RadzenBlazorDemos/Pages/MasonryPage.razor create mode 100644 RadzenBlazorDemos/Shared/UIBlocks.razor diff --git a/RadzenBlazorDemos/Pages/MasonryConfig.razor b/RadzenBlazorDemos/Pages/MasonryConfig.razor new file mode 100644 index 00000000000..6a80c8afaf6 --- /dev/null +++ b/RadzenBlazorDemos/Pages/MasonryConfig.razor @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +@code { + bool responsive = true; + + Variant variant = Variant.Outlined; + + double teamOneProgress = 55; + double teamTwoProgress = 32; + double teamThreeProgress = 76; +} diff --git a/RadzenBlazorDemos/Pages/MasonryPage.razor b/RadzenBlazorDemos/Pages/MasonryPage.razor new file mode 100644 index 00000000000..4e6cdd9c539 --- /dev/null +++ b/RadzenBlazorDemos/Pages/MasonryPage.razor @@ -0,0 +1,15 @@ +@page "/masonry" + + + Masonry + + + Use the Radzen Blazor Masonry component to visually stick RadzenCards next to each other. + + + + By default the CardGroup is responsive and Cards wrap one below the other on screen sizes smaller than 576px. Use Responsive="false" to disable responsiveness. + + + + \ No newline at end of file diff --git a/RadzenBlazorDemos/Pages/UIBlocksCardPage.razor b/RadzenBlazorDemos/Pages/UIBlocksCardPage.razor index b2e1c16760b..db84b2436d7 100644 --- a/RadzenBlazorDemos/Pages/UIBlocksCardPage.razor +++ b/RadzenBlazorDemos/Pages/UIBlocksCardPage.razor @@ -20,21 +20,7 @@ - - - - - UI Blocks PRO - - - UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . - - - See Pricing - - - - + @@ -56,21 +42,7 @@ - - - - - UI Blocks PRO - - - UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . - - - See Pricing - - - - + @@ -98,21 +70,7 @@ - - - - - UI Blocks PRO - - - UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . - - - See Pricing - - - - + @@ -141,21 +99,7 @@ - - - - - UI Blocks PRO - - - UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . - - - See Pricing - - - - + @@ -183,21 +127,7 @@ - - - - - UI Blocks PRO - - - UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . - - - See Pricing - - - - + diff --git a/RadzenBlazorDemos/Pages/UIBlocksCtaPage.razor b/RadzenBlazorDemos/Pages/UIBlocksCtaPage.razor index 1141102cab5..a9c96c081ca 100644 --- a/RadzenBlazorDemos/Pages/UIBlocksCtaPage.razor +++ b/RadzenBlazorDemos/Pages/UIBlocksCtaPage.razor @@ -32,21 +32,7 @@ - - - - - UI Blocks PRO - - - UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . - - - See Pricing - - - - + @@ -75,21 +61,7 @@ - - - - - UI Blocks PRO - - - UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . - - - See Pricing - - - - + @@ -119,21 +91,7 @@ - - - - - UI Blocks PRO - - - UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . - - - See Pricing - - - - + @@ -166,21 +124,7 @@ - - - - - UI Blocks PRO - - - UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . - - - See Pricing - - - - + @@ -212,21 +156,7 @@ - - - - - UI Blocks PRO - - - UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . - - - See Pricing - - - - + diff --git a/RadzenBlazorDemos/Pages/UIBlocksFeaturesPage.razor b/RadzenBlazorDemos/Pages/UIBlocksFeaturesPage.razor index 3bfd75b00f9..717962cdd12 100644 --- a/RadzenBlazorDemos/Pages/UIBlocksFeaturesPage.razor +++ b/RadzenBlazorDemos/Pages/UIBlocksFeaturesPage.razor @@ -45,21 +45,7 @@ - - - - - UI Blocks PRO - - - UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . - - - See Pricing - - - - + @@ -98,21 +84,7 @@ - - - - - UI Blocks PRO - - - UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . - - - See Pricing - - - - + @@ -151,21 +123,7 @@ - - - - - UI Blocks PRO - - - UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . - - - See Pricing - - - - + diff --git a/RadzenBlazorDemos/Pages/UIBlocksFooterPage.razor b/RadzenBlazorDemos/Pages/UIBlocksFooterPage.razor index 3cc5b4565cc..9615659b49a 100644 --- a/RadzenBlazorDemos/Pages/UIBlocksFooterPage.razor +++ b/RadzenBlazorDemos/Pages/UIBlocksFooterPage.razor @@ -73,21 +73,7 @@ - - - - - UI Blocks PRO - - - UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . - - - See Pricing - - - - + @@ -119,21 +105,7 @@ - - - - - UI Blocks PRO - - - UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . - - - See Pricing - - - - + @@ -155,21 +127,7 @@ - - - - - UI Blocks PRO - - - UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . - - - See Pricing - - - - + diff --git a/RadzenBlazorDemos/Pages/UIBlocksHeadingPage.razor b/RadzenBlazorDemos/Pages/UIBlocksHeadingPage.razor index d4650d26011..3f2bab3f74c 100644 --- a/RadzenBlazorDemos/Pages/UIBlocksHeadingPage.razor +++ b/RadzenBlazorDemos/Pages/UIBlocksHeadingPage.razor @@ -28,21 +28,7 @@ - - - - - UI Blocks PRO - - - UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . - - - See Pricing - - - - + @@ -64,21 +50,7 @@ - - - - - UI Blocks PRO - - - UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . - - - See Pricing - - - - + @@ -110,21 +82,7 @@ - - - - - UI Blocks PRO - - - UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . - - - See Pricing - - - - + diff --git a/RadzenBlazorDemos/Shared/UIBlocks.razor b/RadzenBlazorDemos/Shared/UIBlocks.razor new file mode 100644 index 00000000000..401ed963d71 --- /dev/null +++ b/RadzenBlazorDemos/Shared/UIBlocks.razor @@ -0,0 +1,15 @@ + + + + + UI Blocks PRO + + + UI Blocks are a premium feature of Radzen Blazor Studio and can be used with an active . + + + See Pricing + + + + \ No newline at end of file From b024e937466775ce3bc8c607b371321788913833 Mon Sep 17 00:00:00 2001 From: yordanov Date: Thu, 21 Nov 2024 11:03:05 +0200 Subject: [PATCH 4/6] Update titles of example tabs --- RadzenBlazorDemos/Pages/MasonryConfig.razor | 42 ------------------- RadzenBlazorDemos/Pages/MasonryPage.razor | 15 ------- .../Pages/UIBlocksCardPage.razor | 10 ++--- RadzenBlazorDemos/Pages/UIBlocksCtaPage.razor | 2 +- .../Pages/UIBlocksFeaturesPage.razor | 6 +-- .../Pages/UIBlocksFooterPage.razor | 4 +- .../Pages/UIBlocksHeadingPage.razor | 6 +-- 7 files changed, 14 insertions(+), 71 deletions(-) delete mode 100644 RadzenBlazorDemos/Pages/MasonryConfig.razor delete mode 100644 RadzenBlazorDemos/Pages/MasonryPage.razor diff --git a/RadzenBlazorDemos/Pages/MasonryConfig.razor b/RadzenBlazorDemos/Pages/MasonryConfig.razor deleted file mode 100644 index 6a80c8afaf6..00000000000 --- a/RadzenBlazorDemos/Pages/MasonryConfig.razor +++ /dev/null @@ -1,42 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -@code { - bool responsive = true; - - Variant variant = Variant.Outlined; - - double teamOneProgress = 55; - double teamTwoProgress = 32; - double teamThreeProgress = 76; -} diff --git a/RadzenBlazorDemos/Pages/MasonryPage.razor b/RadzenBlazorDemos/Pages/MasonryPage.razor deleted file mode 100644 index 4e6cdd9c539..00000000000 --- a/RadzenBlazorDemos/Pages/MasonryPage.razor +++ /dev/null @@ -1,15 +0,0 @@ -@page "/masonry" - - - Masonry - - - Use the Radzen Blazor Masonry component to visually stick RadzenCards next to each other. - - - - By default the CardGroup is responsive and Cards wrap one below the other on screen sizes smaller than 576px. Use Responsive="false" to disable responsiveness. - - - - \ No newline at end of file diff --git a/RadzenBlazorDemos/Pages/UIBlocksCardPage.razor b/RadzenBlazorDemos/Pages/UIBlocksCardPage.razor index db84b2436d7..d3d79272201 100644 --- a/RadzenBlazorDemos/Pages/UIBlocksCardPage.razor +++ b/RadzenBlazorDemos/Pages/UIBlocksCardPage.razor @@ -14,7 +14,7 @@ - + @@ -31,7 +31,7 @@ - + @@ -53,7 +53,7 @@ - + @@ -81,7 +81,7 @@ - + @@ -110,7 +110,7 @@ - + diff --git a/RadzenBlazorDemos/Pages/UIBlocksCtaPage.razor b/RadzenBlazorDemos/Pages/UIBlocksCtaPage.razor index a9c96c081ca..9c1b6c23fc0 100644 --- a/RadzenBlazorDemos/Pages/UIBlocksCtaPage.razor +++ b/RadzenBlazorDemos/Pages/UIBlocksCtaPage.razor @@ -75,7 +75,7 @@ - + diff --git a/RadzenBlazorDemos/Pages/UIBlocksFeaturesPage.razor b/RadzenBlazorDemos/Pages/UIBlocksFeaturesPage.razor index 717962cdd12..c625db09c26 100644 --- a/RadzenBlazorDemos/Pages/UIBlocksFeaturesPage.razor +++ b/RadzenBlazorDemos/Pages/UIBlocksFeaturesPage.razor @@ -14,7 +14,7 @@ - + @@ -56,7 +56,7 @@ - + @@ -95,7 +95,7 @@ - + diff --git a/RadzenBlazorDemos/Pages/UIBlocksFooterPage.razor b/RadzenBlazorDemos/Pages/UIBlocksFooterPage.razor index 9615659b49a..8bc0edb3a90 100644 --- a/RadzenBlazorDemos/Pages/UIBlocksFooterPage.razor +++ b/RadzenBlazorDemos/Pages/UIBlocksFooterPage.razor @@ -17,7 +17,7 @@ - +
@@ -87,7 +87,7 @@ - + diff --git a/RadzenBlazorDemos/Pages/UIBlocksHeadingPage.razor b/RadzenBlazorDemos/Pages/UIBlocksHeadingPage.razor index 3f2bab3f74c..85c821769f8 100644 --- a/RadzenBlazorDemos/Pages/UIBlocksHeadingPage.razor +++ b/RadzenBlazorDemos/Pages/UIBlocksHeadingPage.razor @@ -14,7 +14,7 @@ - + @@ -39,7 +39,7 @@ - + @@ -62,7 +62,7 @@ - + From 5879b13576d56a9c259bf7bf6331bd18afb54dd4 Mon Sep 17 00:00:00 2001 From: yordanov Date: Thu, 21 Nov 2024 16:26:33 +0200 Subject: [PATCH 5/6] Reorder ui blocks alphabetically --- RadzenBlazorDemos/Pages/Index.razor | 4 +-- RadzenBlazorDemos/Services/ExampleService.cs | 30 ++++++++++---------- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/RadzenBlazorDemos/Pages/Index.razor b/RadzenBlazorDemos/Pages/Index.razor index 130f2f99a06..19b8d3f876c 100644 --- a/RadzenBlazorDemos/Pages/Index.razor +++ b/RadzenBlazorDemos/Pages/Index.razor @@ -188,10 +188,10 @@ - - + + diff --git a/RadzenBlazorDemos/Services/ExampleService.cs b/RadzenBlazorDemos/Services/ExampleService.cs index e11b080300b..0e92a97c4ac 100644 --- a/RadzenBlazorDemos/Services/ExampleService.cs +++ b/RadzenBlazorDemos/Services/ExampleService.cs @@ -211,12 +211,12 @@ public class ExampleService }, new Example { - Name = "Page Headings", - Title = "Blazor Page Heading | UI Blocks by Radzen", - Icon = "", - Description = "Preconfigured Page Heading UI Blocks", - Path = "ui-blocks-page-headings", - Tags = new [] { "headings", "heading", "page", "title" } + Name = "Call-to-Action", + Title = "Blazor Call-to-Action | UI Blocks by Radzen", + Icon = "", + Description = "Examples of CTA UI Blocks", + Path = "ui-blocks-cta", + Tags = new [] { "cta", "call-to-action", "call", "action", "button" } }, new Example { @@ -228,15 +228,6 @@ public class ExampleService Tags = new [] { "feature", "list" } }, new Example - { - Name = "Call-to-Action", - Title = "Blazor Call-to-Action | UI Blocks by Radzen", - Icon = "", - Description = "Examples of CTA UI Blocks", - Path = "ui-blocks-cta", - Tags = new [] { "cta", "call-to-action", "call", "action", "button" } - }, - new Example { Name = "Footers", Title = "Blazor Footer | UI Blocks by Radzen", @@ -245,6 +236,15 @@ public class ExampleService Path = "ui-blocks-footers", Tags = new [] { "footer" } }, + new Example + { + Name = "Page Headings", + Title = "Blazor Page Heading | UI Blocks by Radzen", + Icon = "", + Description = "Preconfigured Page Heading UI Blocks", + Path = "ui-blocks-page-headings", + Tags = new [] { "headings", "heading", "page", "title" } + } } }, From e8b1c4eb7478485260e2c3dbd2629641f7406269 Mon Sep 17 00:00:00 2001 From: yordanov Date: Thu, 21 Nov 2024 16:44:02 +0200 Subject: [PATCH 6/6] Replace RadzenButton with RadzenLink in blocks --- RadzenBlazorDemos/Pages/UIBlocksCtaPage.razor | 36 +++++++++++++------ .../Pages/UIBlocksFeaturesPage.razor | 18 +++++----- .../Pages/UIBlocksHeadingPage.razor | 12 +++---- 3 files changed, 41 insertions(+), 25 deletions(-) diff --git a/RadzenBlazorDemos/Pages/UIBlocksCtaPage.razor b/RadzenBlazorDemos/Pages/UIBlocksCtaPage.razor index 9c1b6c23fc0..6c3fa7136b3 100644 --- a/RadzenBlazorDemos/Pages/UIBlocksCtaPage.razor +++ b/RadzenBlazorDemos/Pages/UIBlocksCtaPage.razor @@ -25,8 +25,12 @@ - - + + + + See benefits + + @@ -54,8 +58,12 @@ - - + + + + See benefits + + @@ -85,8 +93,8 @@ - - + + @@ -117,8 +125,12 @@ - - + + + + See more + + @@ -149,8 +161,12 @@ - - + + + + Find similar + + diff --git a/RadzenBlazorDemos/Pages/UIBlocksFeaturesPage.razor b/RadzenBlazorDemos/Pages/UIBlocksFeaturesPage.razor index c625db09c26..ee069c34ff7 100644 --- a/RadzenBlazorDemos/Pages/UIBlocksFeaturesPage.razor +++ b/RadzenBlazorDemos/Pages/UIBlocksFeaturesPage.razor @@ -22,7 +22,7 @@ - + @@ -31,7 +31,7 @@ - + @@ -40,7 +40,7 @@ - + @@ -63,7 +63,7 @@ - + @@ -71,7 +71,7 @@ - + @@ -79,7 +79,7 @@ - + @@ -102,7 +102,7 @@ - + @@ -110,7 +110,7 @@ - + @@ -118,7 +118,7 @@ - + diff --git a/RadzenBlazorDemos/Pages/UIBlocksHeadingPage.razor b/RadzenBlazorDemos/Pages/UIBlocksHeadingPage.razor index 85c821769f8..b93f5fde4be 100644 --- a/RadzenBlazorDemos/Pages/UIBlocksHeadingPage.razor +++ b/RadzenBlazorDemos/Pages/UIBlocksHeadingPage.razor @@ -21,9 +21,9 @@ - - - + + + @@ -75,9 +75,9 @@ - - - + + +