starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-04 05:35:44 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

Add video to borders' demos

Browse Source
This commit is contained in:
yordanov
2026-01-13 14:05:46 +02:00
parent 84a759267e
commit 5e5957e4c4
2 changed files with 18 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
RadzenBlazorDemos/Pages/BordersPage.razor
View File

@@ -11,6 +11,22 @@
This page showcases border styling with radius classes (<code>rz-border-radius-0</code> through <code>rz-border-radius-10</code>) and corresponding CSS variables, utilities to add/remove borders on specific sides (<code>rz-border-top/right/bottom/left</code>), border color classes with theme colors, shorthand border classes combining border and color, and border width customization using <code>--rz-border-width</code> CSS variable.
</RadzenText>
<RadzenRow>
<RadzenColumn Size="12">
<RadzenText Anchor="borders#video-borders" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
Styling borders in Radzen Blazor Studio
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1">
This video shows how to apply and customize borders in your Blazor applications using Radzen Blazor Studio.
</RadzenText>
<RadzenCard Variant="Variant.Outlined" class="rz-p-7">
<div class="embed-container">
<iframe src="https://www.youtube.com/embed/e2rLKIJqo2c?&rel=0" frameborder="0" allowfullscreen=""></iframe>
</div>
</RadzenCard>
</RadzenColumn>
</RadzenRow>
<RadzenText Anchor="borders#border-radius" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
Border radius
</RadzenText>
@@ -141,4 +157,4 @@
</RadzenText>
<div class="rz-p-12" style="border: 10px dotted var(--rz-success)">
<p><code>style="border: 10px dotted var(--rz-success)"</code></p>
</div>
</div>

2
RadzenBlazorDemos/Services/ExampleService.cs
View File

@@ -125,7 +125,7 @@ namespace RadzenBlazorDemos
},
new Example
{
Toc = [ new () { Text = "Border radius", Anchor = "#border-radius" }, new () { Text = "Add or remove borders arbitrarily", Anchor = "#add-remove-css-classes" }, new () { Text = "Border color utility CSS classes", Anchor = "#color-css-classes" }, new () { Text = "Border with color utility CSS classes", Anchor = "#utility-css-classes" }, new () { Text = "Set border width via CSS variable", Anchor = "#border-width" }, new () { Text = "Borders with CSS variables", Anchor = "#css-variables" } ],
Toc = [ new () { Text = "Video: Styling Borders in Radzen Blazor Studio", Anchor = "#video-borders" }, new () { Text = "Border radius", Anchor = "#border-radius" }, new () { Text = "Add or remove borders arbitrarily", Anchor = "#add-remove-css-classes" }, new () { Text = "Border color utility CSS classes", Anchor = "#color-css-classes" }, new () { Text = "Border with color utility CSS classes", Anchor = "#utility-css-classes" }, new () { Text = "Set border width via CSS variable", Anchor = "#border-width" }, new () { Text = "Borders with CSS variables", Anchor = "#css-variables" } ],
Name = "Borders",
Path = "borders",
Title = "Blazor Border Utilities | Free UI Components by Radzen",