mirror of
https://github.com/radzenhq/radzen-blazor.git
synced 2026-02-04 05:35:44 +00:00
Update demos main navigation and overview layout
This commit is contained in:
yordanov
@@ -10,32 +10,7 @@
|
||||
</HeadContent>
|
||||
|
||||
<div class="demos-home light rz-px-6 rz-px-md-12">
|
||||
<RadzenStack Orientation="Orientation.Vertical" Gap="0px" class="rz-mx-auto" Style="max-width: 1400px;">
|
||||
<RadzenRow>
|
||||
<RadzenColumn Size="12" SizeXS="4" class="rz-text-align-center rz-text-align-xs-start" >
|
||||
<RadzenLink Path="/" title="Radzen" class="logo">
|
||||
<svg width="159" height="48" viewBox="0 0 159 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Radzen</title>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 33.2471 5.22967 41.2727 12.8927 45.2806L12.9076 45L12.3524 34.5H18.6762C18.6762 34.5 18.0676 39.3023 18.0676 45C18.0676 45.7764 18.0794 46.5361 18.0999 47.2694C19.9875 47.7465 21.9641 48 24 48ZM26.0374 15.8672C23.5258 17.3173 22.2005 19.7361 21.6842 20.8864L18.0789 23.8326C18.0715 23.3953 18.0676 22.9504 18.0676 22.5C18.0676 16.8023 18.7054 12 18.7054 12H12.3524C12.3524 12 12.9076 16.8023 12.9076 22.5C12.9076 28.1978 12.3524 33 12.3524 33H18.7054C18.7054 33 18.2305 29.4247 18.1003 24.7837L18.6866 24.3045C19.2065 25.0083 20.6065 26.577 23.1241 27.2144C26.4178 28.0484 32.4477 27.4971 32.4477 27.4971C32.4477 27.4971 27.3249 24.4658 24.0312 23.6319C22.1341 23.1516 20.5708 23.331 19.586 23.5696L22.0331 21.5699C23.2065 21.6061 25.8972 21.5159 28.5406 20.2028C32.0573 18.4559 38.9603 11.4072 38.9603 11.4072C38.9603 11.4072 29.4209 13.9137 26.0374 15.8672Z" fill="#FF504D"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M92.2121 32.5896L92.2104 32.5876C90.8999 30.9401 90.2554 28.6519 90.2554 25.7441C90.2554 24.3095 90.459 23.0132 90.8691 21.8574L90.8701 21.8545C91.3024 20.7036 91.8688 19.7276 92.5711 18.9298C93.2717 18.1339 94.0709 17.5169 94.9686 17.0809L94.9701 17.0802C95.8914 16.6445 96.8395 16.4257 97.813 16.4257C98.8261 16.4257 99.6942 16.6061 100.41 16.9753C101.013 17.266 101.613 17.6536 102.212 18.1365L102.089 15.7094V10.7027H106.508V34.6013H102.822L102.547 32.7801C101.92 33.3848 101.196 33.9026 100.378 34.3339C99.5016 34.7955 98.5748 35.027 97.5997 35.027C95.3511 35.027 93.5493 34.2157 92.2121 32.5896ZM100.386 20.4377L100.384 20.437C99.8339 20.2309 99.2732 20.1283 98.7013 20.1283C97.6213 20.1283 96.7079 20.5964 95.9537 21.5547C95.2035 22.5078 94.8166 23.8848 94.8166 25.7086C94.8166 27.584 95.1459 28.9879 95.7823 29.9421C96.4354 30.8626 97.3654 31.3245 98.5947 31.3245C99.8201 31.3245 100.984 30.7224 102.089 29.477V21.4918C101.504 20.9845 100.936 20.6353 100.386 20.4377ZM60 16.8514H63.6938L63.963 19.7739C64.5612 18.7425 65.277 17.9415 66.113 17.3773C67.0125 16.7466 67.945 16.4257 68.9079 16.4257H70.7088V20.412H69.0471C67.9903 20.412 67.1619 20.5458 66.3042 21.1613L66.3013 21.1633C65.5865 21.6539 64.9553 22.5328 64.4191 23.8261V34.6013H60V16.8514ZM109.615 34.6013V32.184L117.709 20.412H109.615V16.8514H123.309V19.233L115.249 31.0052H123.309V34.6013H109.615ZM143.373 34.6013V16.8514H147.063L147.34 19.1308C148.098 18.4118 148.911 17.79 149.779 17.2656L149.78 17.2646C150.733 16.7038 151.829 16.4257 153.063 16.4257C154.972 16.4257 156.392 17.043 157.285 18.3043C158.166 19.5264 158.595 21.2689 158.595 23.5093V34.6013H154.176V24.0414C154.176 22.6051 153.962 21.6342 153.568 21.088C153.182 20.5537 152.543 20.2701 151.606 20.2701C150.877 20.2701 150.233 20.4516 149.67 20.8116L149.669 20.8125C149.127 21.1507 148.501 21.658 147.792 22.3385V34.6013H143.373ZM74.1386 33.5969L74.1371 33.5954C73.1462 32.6137 72.6557 31.3272 72.6557 29.7526C72.6557 28.8068 72.8517 27.9631 73.2484 27.2261L73.2493 27.2244C73.671 26.4625 74.3135 25.8163 75.1687 25.2837L75.1705 25.2826C76.0464 24.7523 77.1357 24.3096 78.4348 23.952L78.4356 23.9518C79.7205 23.6046 81.24 23.337 82.9928 23.148C82.9625 22.7687 82.8965 22.4084 82.795 22.0667L82.7934 22.0613L82.7922 22.0558C82.7022 21.6544 82.5346 21.313 82.291 21.0277L82.2865 21.0225L82.2825 21.017C82.0634 20.7131 81.767 20.4835 81.3879 20.3288L81.3841 20.3272L81.3804 20.3255C81.0027 20.1494 80.5271 20.0573 79.9469 20.0573C79.1098 20.0573 78.2835 20.2184 77.4669 20.5419C76.6639 20.8696 75.8721 21.2677 75.0916 21.7363L74.9436 21.8252L73.2809 18.805L73.4138 18.7215C74.4032 18.0998 75.5118 17.5628 76.7386 17.11C77.9759 16.6533 79.3084 16.4257 80.7346 16.4257C82.9634 16.4257 84.6522 17.0869 85.7669 18.4359C86.8996 19.754 87.453 21.6549 87.453 24.1123V34.6013H83.7421L83.4623 32.7304C82.6934 33.3641 81.8687 33.8991 80.9883 34.3353C80.0806 34.797 79.0881 35.027 78.0135 35.027C76.4267 35.027 75.1295 34.5542 74.1386 33.5969ZM81.191 31.0261C81.7574 30.7119 82.3614 30.264 83.003 29.6794V26.0383C81.8971 26.1768 80.9661 26.3569 80.2083 26.5778C79.4053 26.8117 78.7639 27.0786 78.2795 27.3757L78.277 27.3773L78.2745 27.3787C77.7911 27.6523 77.4589 27.9643 77.263 28.3093C77.0621 28.6633 76.9625 29.0371 76.9625 29.4333C76.9625 30.1791 77.1889 30.6886 77.6114 31.0026C78.0538 31.3313 78.6252 31.5018 79.3383 31.5018C80.0276 31.5018 80.643 31.3428 81.1885 31.0275L81.191 31.0261ZM130.187 34.4128L130.184 34.4117C129.121 33.9778 128.191 33.3625 127.393 32.5662C126.594 31.7687 125.966 30.8035 125.508 29.6731L125.507 29.6692C125.072 28.5122 124.857 27.203 124.857 25.7441C124.857 24.3075 125.085 23.0092 125.544 21.8517C126 20.6997 126.603 19.7234 127.354 18.9257L127.356 18.9238C128.128 18.1284 129.011 17.5128 130.002 17.0782C130.994 16.6437 132.011 16.4257 133.054 16.4257C134.257 16.4257 135.323 16.6299 136.249 17.0432C137.171 17.4552 137.939 18.0381 138.548 18.792C139.179 19.5439 139.651 20.4391 139.965 21.4746C140.278 22.5091 140.434 23.637 140.434 24.8573C140.434 25.2637 140.368 26.009 140.368 26.009C140.368 26.009 140.302 26.6565 140.252 26.8799L140.223 27.0101H129.192C129.398 28.4506 129.921 29.555 130.75 30.3396C131.639 31.1351 132.769 31.5373 134.155 31.5373C134.897 31.5373 135.578 31.4333 136.198 31.2271C136.848 30.9951 137.488 30.6815 138.118 30.2858L138.268 30.1914L139.811 33.0358L139.683 33.1197C138.842 33.6717 137.906 34.1268 136.875 34.4857C135.838 34.8467 134.754 35.027 133.622 35.027C132.395 35.027 131.25 34.8228 130.187 34.4128ZM135.693 21.02L135.691 21.0177C135.162 20.291 134.33 19.9154 133.16 19.9154C132.162 19.9154 131.29 20.265 130.538 20.9701C129.826 21.6375 129.362 22.6114 129.159 23.9106H136.546C136.523 22.6664 136.233 21.7097 135.695 21.0222L135.693 21.02Z" fill="var(--rz-text-title-color)"/>
|
||||
</svg>
|
||||
</RadzenLink>
|
||||
</RadzenColumn>
|
||||
<RadzenColumn SizeXS="8" class="rz-display-none rz-display-xs-block nav-links" >
|
||||
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.End" Gap="3rem">
|
||||
<RadzenLink Path="/docs/api/" Text="API Reference" title="Radzen Blazor Components API Reference" target="_blank" />
|
||||
<RadzenLink Path="https://www.radzen.com/" Text="About Radzen" title="Create .NET Core web applications fast & easy" target="_blank" />
|
||||
<RadzenAppearanceToggle />
|
||||
<RadzenLink Path="https://github.com/radzenhq/radzen-blazor" title="GitHub" target="_blank" >
|
||||
<svg width="28" height="28" viewBox="0 0 512 499.36" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>GitHub</title>
|
||||
<path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"></path>
|
||||
</svg>
|
||||
</RadzenLink>
|
||||
</RadzenStack>
|
||||
</RadzenColumn>
|
||||
</RadzenRow>
|
||||
|
||||
<RadzenStack Orientation="Orientation.Vertical" Gap="0px" class="rz-mx-auto">
|
||||
<RadzenRow>
|
||||
<RadzenColumn Size="12" class="rz-text-align-center">
|
||||
<RadzenText TextStyle="TextStyle.DisplayH1" TagName="TagName.H1" class="rz-my-8 rz-pt-8 rz-my-sm-10 rz-pt-sm-10 rz-my-md-12 rz-pt-md-12" Style="--rz-text-display-h1-font-weight: 500;">Radzen Blazor Components</RadzenText>
|
||||
@@ -72,9 +47,9 @@
|
||||
</RadzenColumn>
|
||||
</RadzenRow>
|
||||
|
||||
<RadzenRow Gap="1rem" RowGap="1rem" class="rz-mt-6 rz-mt-sm-8 rz-mt-md-12">
|
||||
<RadzenRow Gap="1rem" RowGap="1rem" class="rz-w-100 rz-mx-auto rz-mt-6 rz-mt-sm-8 rz-mt-md-12" Style="max-width: 1440px;">
|
||||
<RadzenColumn Size="12">
|
||||
<RadzenCard Variant="Variant.Outlined" Style="height: 100%;" class="rz-p-6 rz-p-md-12 customers-logos rz-background-color-white">
|
||||
<RadzenCard Variant="Variant.Outlined" class="rz-h-100 rz-p-6 rz-p-md-12 customers-logos rz-background-color-white">
|
||||
<RadzenRow>
|
||||
<RadzenColumn Size="12" SizeMD="3" class="rz-p-md-6 rz-pe-md-12">
|
||||
<RadzenText TextStyle="TextStyle.H4" TagName="TagName.H3" class="rz-m-0 rz-color-base-900">Trusted by thousands of developers and IT leaders.</RadzenText>
|
||||
@@ -103,7 +78,7 @@
|
||||
</RadzenColumn>
|
||||
</RadzenRow>
|
||||
|
||||
<RadzenRow ID="components" Gap="1rem">
|
||||
<RadzenRow ID="components" Gap="1rem" class="rz-w-100 rz-mx-auto" Style="max-width: 1440px;">
|
||||
<RadzenColumn Size="12">
|
||||
<RadzenAlert AlertStyle="AlertStyle.Dark" Icon="mode_heat" Size="AlertSize.Large" Variant="Variant.Flat" class="rz-my-lg-12 promo-alert">
|
||||
<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-mb-3 rz-color-on-base-darker"><strong>NEW: Radzen Blazor for Visual Studio</strong></RadzenText>
|
||||
|
||||
@@ -1,29 +1,285 @@
|
||||
@using Microsoft.AspNetCore.Components
|
||||
|
||||
@using Radzen.Blazor
|
||||
@inherits LayoutComponentBase
|
||||
@inject ThemeService ThemeService
|
||||
@inject QueryStringThemeService QueryStringThemeService
|
||||
@inject ExampleService ExampleService
|
||||
@inject NavigationManager UriHelper
|
||||
@inject IJSRuntime JSRuntime
|
||||
@inject TooltipService TooltipService
|
||||
@inject DialogService DialogService
|
||||
|
||||
<RadzenComponents />
|
||||
|
||||
<RadzenLayout>
|
||||
<RadzenBody Class="rz-m-0 rz-p-0 rz-border-radius-0 radzen-blazor">
|
||||
<RadzenLayout Style="grid-template-columns: auto 1fr auto; grid-template-areas: 'rz-header rz-header rz-header' 'rz-sidebar rz-body rz-config-sidebar'">
|
||||
<RadzenHeader class="rz-p-0">
|
||||
<ChildContent>
|
||||
<MainTopNav />
|
||||
<RadzenRow AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Start" Gap="0px" class="demos-nav">
|
||||
<RadzenColumn Size="5">
|
||||
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
|
||||
<RadzenSidebarToggle Click="@(() => sidebarExpanded = !sidebarExpanded)" />
|
||||
<span style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">Radzen Blazor Components</span>
|
||||
</RadzenStack>
|
||||
</RadzenColumn>
|
||||
<RadzenColumn Size="7">
|
||||
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.End">
|
||||
<div class="rz-display-none rz-display-sm-inline-flex align-items-center">
|
||||
<RadzenLink Path="/docs/api/" Text="API Reference" title="Radzen Blazor Components API Reference" class="rz-mx-2 rz-mx-lg-4" target="_blank" />
|
||||
<RadzenLink Path="https://github.com/radzenhq/radzen-blazor" Text="GitHub" title="Star Radzen Blazor Components on GitHub" class="rz-text-nowrap rz-mx-2 rz-mx-lg-4" target="_blank" />
|
||||
</div>
|
||||
<RadzenAppearanceToggle class="rz-mx-2" />
|
||||
<RadzenSidebarToggle Icon="settings" Click="@(() => configSidebarExpanded = !configSidebarExpanded)" class="rz-m-0" />
|
||||
</RadzenStack>
|
||||
</RadzenColumn>
|
||||
</RadzenRow>
|
||||
</ChildContent>
|
||||
</RadzenHeader>
|
||||
<RadzenBody @ref="@body0" class="rz-p-0">
|
||||
<ChildContent>
|
||||
<RadzenContentContainer Name="main">
|
||||
@Body
|
||||
<RadzenRow Gap="2rem">
|
||||
<RadzenColumn Size="12">
|
||||
<RadzenRow class="rz-mx-auto">
|
||||
<RadzenColumn Size="12" SizeMD=@(example?.Toc != null ? 10 : 12)>
|
||||
@Body
|
||||
</RadzenColumn>
|
||||
@if (example?.Toc != null)
|
||||
{
|
||||
<RadzenColumn Size="2" class="rz-display-none rz-display-md-block">
|
||||
<div class="demos-right-nav">
|
||||
<RadzenText Text="On this page" TextStyle="TextStyle.H6" class="rz-mt-lg-12 rz-mb-4" />
|
||||
<RadzenToc Selector=".rz-body">
|
||||
@foreach (var item in example.Toc)
|
||||
{
|
||||
<RadzenTocItem Text=@item.Text Selector=@item.Anchor />
|
||||
}
|
||||
</RadzenToc>
|
||||
</div>
|
||||
</RadzenColumn>
|
||||
}
|
||||
</RadzenRow>
|
||||
</RadzenColumn>
|
||||
</RadzenRow>
|
||||
</RadzenContentContainer>
|
||||
</RadzenBody>
|
||||
</ChildContent>
|
||||
</RadzenBody>
|
||||
<RadzenSidebar @ref="sidebar0" @bind-Expanded="@sidebarExpanded" class="demos-sidebar" style="display: flex; flex-direction: column">
|
||||
<PanelMenu />
|
||||
</RadzenSidebar>
|
||||
<RadzenSidebar Responsive="false" @bind-Expanded="@configSidebarExpanded" class="rz-sidebar-second" Style="--rz-sidebar-width: 370px; grid-area: rz-config-sidebar; background-color: var(--rz-body-background-color); color: var(--rz-text-color);">
|
||||
<RadzenStack class="rz-p-4" Gap="0">
|
||||
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.SpaceBetween">
|
||||
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H2" class="rz-m-0">Demos Configuration</RadzenText>
|
||||
<RadzenButton Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Base" Click="@(() => configSidebarExpanded = false)" />
|
||||
</RadzenStack>
|
||||
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.SpaceBetween" Gap="0.5rem" class="rz-mt-6">
|
||||
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.25rem">
|
||||
<RadzenLabel Text="Use WCAG compliant colors" Component="WCAG" Title="Use WCAG 2.2 AA compliant color swatches" />
|
||||
<RadzenButton Icon="info" Variant="Variant.Text" ButtonStyle="ButtonStyle.Base" Size="ButtonSize.ExtraSmall" @ref="wcagColorsInfo" Click="@(args => WcagColorsTooltip(wcagColorsInfo.Element, new TooltipOptions(){ Position = TooltipPosition.Left, Duration = null, Style = "background: var(--rz-base-900); color: var(--rz-base-100)" }))" />
|
||||
</RadzenStack>
|
||||
<RadzenSwitch Value="@(ThemeService.Wcag == true)" Name="WCAG" Change="@(ThemeService.SetWcag)" />
|
||||
</RadzenStack>
|
||||
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.SpaceBetween" Gap="0.5rem" class="rz-mt-5">
|
||||
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.25rem">
|
||||
<RadzenLabel Text="Enable RTL directionality" Component="RTL" Title="Use right to left direction for languages that are written from the right to the left (like Arabic)" />
|
||||
<RadzenButton Icon="info" Variant="Variant.Text" ButtonStyle="ButtonStyle.Base" Size="ButtonSize.ExtraSmall" @ref="rtlInfo" Click="@(args => RtlTooltip(rtlInfo.Element, new TooltipOptions(){ Position = TooltipPosition.Left, Duration = null, Style = "background: var(--rz-base-900); color: var(--rz-base-100)" }))" />
|
||||
</RadzenStack>
|
||||
<RadzenSwitch Value="@(ThemeService.RightToLeft == true)" Name="RTL" Change="@(ThemeService.SetRightToLeft)" />
|
||||
</RadzenStack>
|
||||
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.25rem" class="rz-mt-5 rz-mb-2">
|
||||
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-m-0">Premium Themes</RadzenText>
|
||||
<RadzenButton Icon="info" Variant="Variant.Text" ButtonStyle="ButtonStyle.Base" Size="ButtonSize.ExtraSmall" @ref="premiumThemesInfo" Click="@(args => PremiumThemesTooltip(premiumThemesInfo.Element, new TooltipOptions(){ Position = TooltipPosition.Left, Duration = null, Style = "background: var(--rz-base-900); color: var(--rz-base-100)" }))" />
|
||||
</RadzenStack>
|
||||
<RadzenListBox TValue="string" TextProperty="Text" ValueProperty="Value" Data="@Themes.Premium" Value="@ThemeService.Theme" Change="@ChangeTheme" Style="width: 100%; max-width: 400px; height: 50%; --rz-dropdown-item-padding: 12px 16px 16px; --rz-listbox-padding: 0;" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "select theme" }})">
|
||||
<Template>
|
||||
<RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Start" Gap="0.25rem">
|
||||
@RenderTheme(context)
|
||||
</RadzenStack>
|
||||
</Template>
|
||||
</RadzenListBox>
|
||||
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.25rem" class="rz-mt-8 rz-mb-2">
|
||||
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-m-0">Free Themes</RadzenText>
|
||||
<RadzenButton Icon="info" Variant="Variant.Text" ButtonStyle="ButtonStyle.Secondary" Size="ButtonSize.ExtraSmall" @ref="freeThemesInfo" Click="@(args => FreeThemesTooltip(freeThemesInfo.Element, new TooltipOptions(){ Position = TooltipPosition.Left, Duration = null, Style = "background: var(--rz-base-900); color: var(--rz-base-100)" }))" />
|
||||
</RadzenStack>
|
||||
<RadzenListBox TValue="string" TextProperty="Text" ValueProperty="Value" Data="@Themes.Free" Value="@ThemeService.Theme" Change="@ChangeTheme" Style="width: 100%; max-width: 400px; height: 50%; --rz-dropdown-item-padding: 10px 16px 16px; --rz-listbox-padding: 0;" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "select theme" }})">
|
||||
<Template>
|
||||
<RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Start" Gap="0.25rem">
|
||||
@RenderTheme(context)
|
||||
</RadzenStack>
|
||||
</Template>
|
||||
</RadzenListBox>
|
||||
</RadzenStack>
|
||||
</RadzenSidebar>
|
||||
</RadzenLayout>
|
||||
|
||||
@code {
|
||||
@if (!rendered)
|
||||
{
|
||||
<div class="rz-app-loading">
|
||||
<div class="logo-loading"></div>
|
||||
</div>
|
||||
}
|
||||
|
||||
IEnumerable<Example> examples;
|
||||
@code {
|
||||
RadzenSidebar sidebar0;
|
||||
RadzenBody body0;
|
||||
RadzenButton wcagColorsInfo;
|
||||
RadzenButton rtlInfo;
|
||||
RadzenButton freeThemesInfo;
|
||||
RadzenButton premiumThemesInfo;
|
||||
bool sidebarExpanded = true;
|
||||
bool configSidebarExpanded = false;
|
||||
bool rendered;
|
||||
|
||||
Example example;
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
UriHelper.LocationChanged += OnLocationChanged;
|
||||
|
||||
examples = ExampleService.Examples;
|
||||
example = ExampleService.FindCurrent(new Uri(UriHelper.Uri));
|
||||
|
||||
System.Threading.Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo("en-US");
|
||||
}
|
||||
|
||||
void OnLocationChanged(object sender, LocationChangedEventArgs args)
|
||||
{
|
||||
var currentExample = ExampleService.FindCurrent(new Uri(args.Location));
|
||||
|
||||
if (currentExample != example)
|
||||
{
|
||||
example = currentExample;
|
||||
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
|
||||
protected override void OnAfterRender(bool firstRender)
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
rendered = true;
|
||||
}
|
||||
}
|
||||
|
||||
void ChangeTheme(object value)
|
||||
{
|
||||
ThemeService.SetTheme($"{value}");
|
||||
}
|
||||
|
||||
void WcagColorsTooltip(ElementReference elementReference, TooltipOptions options = null) => TooltipService.Open(elementReference, ds =>
|
||||
@<div Style="width: 280px; white-space: normal; padding: 20px;">
|
||||
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H4" Style="color: currentColor;">WCAG Compliant Colors</RadzenText>
|
||||
<RadzenText TextStyle="TextStyle.Body2" Style="color: currentColor;">Enable to preview themes with WCAG 2.2 AA compliant color swatches.</RadzenText>
|
||||
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem" class="rz-mt-4">
|
||||
<NavLink class="rz-button rz-button-sm rz-secondary rz-text-align-center" href="/accessibility#wcag-colors">See how to use</NavLink>
|
||||
</RadzenStack>
|
||||
</div>, options);
|
||||
|
||||
void RtlTooltip(ElementReference elementReference, TooltipOptions options = null) => TooltipService.Open(elementReference, ds =>
|
||||
@<div Style="width: 280px; white-space: normal; padding: 20px;">
|
||||
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H4" Style="color: currentColor;">RTL directionality</RadzenText>
|
||||
<RadzenText TextStyle="TextStyle.Body2" Style="color: currentColor;">Use right to left direction for languages that are written from the right to the left (like Arabic).</RadzenText>
|
||||
</div>, options);
|
||||
|
||||
void PremiumThemesTooltip(ElementReference elementReference, TooltipOptions options = null) => TooltipService.Open(elementReference, ds =>
|
||||
@<div Style="width: 280px; white-space: normal; padding: 20px;">
|
||||
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H4" Style="color: currentColor;">Use Premium Themes</RadzenText>
|
||||
<RadzenText TextStyle="TextStyle.Body2" Style="color: currentColor;">Premium themes can be used with an active Radzen Professional or Enterprise subscription.</RadzenText>
|
||||
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem" class="rz-mt-4">
|
||||
<NavLink class="rz-button rz-button-sm rz-primary rz-text-align-center" href="https://www.radzen.com/pricing/blazor-components/" target="_blank">See Pricing</NavLink>
|
||||
<NavLink class="rz-button rz-button-sm rz-secondary rz-text-align-center" href="/themes">Learn more</NavLink>
|
||||
</RadzenStack>
|
||||
</div>, options);
|
||||
|
||||
void FreeThemesTooltip(ElementReference elementReference, TooltipOptions options = null) => TooltipService.Open(elementReference, ds =>
|
||||
@<div Style="width: 200px; white-space: normal; padding: 20px;">
|
||||
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H4" Style="color: currentColor;">Use Free Themes</RadzenText>
|
||||
<RadzenText TextStyle="TextStyle.Body2" Style="color: currentColor;">These themes are free for commercial use.</RadzenText>
|
||||
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem" class="rz-mt-4">
|
||||
<NavLink class="rz-button rz-button-sm rz-secondary rz-text-align-center" href="/themes">Learn more</NavLink>
|
||||
</RadzenStack>
|
||||
</div>, options);
|
||||
|
||||
async Task ShowVideoDialog(string url)
|
||||
{
|
||||
await DialogService.OpenAsync("Create new Blazor app", ds =>
|
||||
@<div class="embed-container">
|
||||
<iframe src="@url" frameborder="0" allowfullscreen=""></iframe>
|
||||
</div>, new DialogOptions() {
|
||||
Width = "50%",
|
||||
Resizable = true
|
||||
});
|
||||
}
|
||||
|
||||
internal static RenderFragment RenderTheme(Theme theme, bool showTitle = true)
|
||||
{
|
||||
return __builder =>
|
||||
{
|
||||
<text>
|
||||
@if (showTitle)
|
||||
{
|
||||
@theme.Text
|
||||
}
|
||||
<svg width="288" height="72" viewBox="0 0 288 72" fill="none" xmlns="http://www.w3.org/2000/svg" style="border-radius: var(--rz-border-radius); overflow: hidden; outline: var(--rz-border-disabled);">
|
||||
<rect width="288" height="72" fill="@theme.Base" />
|
||||
<g filter="url(#dropShadow1)"><rect x="196" y="12" width="80" height="48" rx="@theme.CardRadius" fill="@theme.Content" /></g>
|
||||
<g filter="url(#dropShadow0)"><rect x="104" y="12" width="80" height="48" rx="@theme.CardRadius" fill="@theme.Content" /></g>
|
||||
<circle cx="229" cy="36" r="16" fill="@theme.SeriesA" />
|
||||
<path d="M229 20V36H229.059L240.343 47.2841C237.446 50.1969 233.433 52 229 52C220.163 52 213 44.8366 213 36C213 27.1634 220.163 20 229 20Z" fill="@theme.SeriesB" />
|
||||
<path d="M229 36V20C220.163 20 213 27.1634 213 36H229Z" fill="@theme.SeriesC" />
|
||||
<rect x="253" y="22" width="6" height="6" rx="@theme.ButtonRadius" fill="@theme.SeriesA" />
|
||||
<rect x="253" y="33" width="6" height="6" rx="@theme.ButtonRadius" fill="@theme.SeriesB" />
|
||||
<rect x="253" y="44" width="6" height="6" rx="@theme.ButtonRadius" fill="@theme.SeriesC" />
|
||||
<rect x="120" y="22" width="12" height="2" rx="1" fill="@theme.ContentText" />
|
||||
<rect x="138" y="22" width="12" height="2" rx="1" fill="@theme.ContentText" />
|
||||
<rect x="156" y="22" width="12" height="2" rx="1" fill="@theme.ContentText" />
|
||||
<rect x="114" y="27" width="60" height="8" rx="@theme.ButtonRadius" fill="@theme.Selection" />
|
||||
<rect x="120" y="30" width="12" height="2" rx="1" fill="@theme.SelectionText" />
|
||||
<rect x="138" y="30" width="12" height="2" rx="1" fill="@theme.SelectionText" />
|
||||
<rect x="156" y="30" width="12" height="2" rx="1" fill="@theme.SelectionText" />
|
||||
<rect x="120" y="38" width="12" height="2" rx="1" fill="@theme.ContentText" />
|
||||
<rect x="138" y="38" width="12" height="2" rx="1" fill="@theme.ContentText" />
|
||||
<rect x="156" y="38" width="12" height="2" rx="1" fill="@theme.ContentText" />
|
||||
<rect x="120" y="43" width="12" height="2" rx="1" fill="@theme.ContentText" />
|
||||
<rect x="138" y="43" width="12" height="2" rx="1" fill="@theme.ContentText" />
|
||||
<rect x="156" y="43" width="12" height="2" rx="1" fill="@theme.ContentText" />
|
||||
<rect x="120" y="48" width="12" height="2" rx="1" fill="@theme.ContentText" />
|
||||
<rect x="138" y="48" width="12" height="2" rx="1" fill="@theme.ContentText" />
|
||||
<rect x="156" y="48" width="12" height="2" rx="1" fill="@theme.ContentText" />
|
||||
<rect x="20" y="44" width="28" height="8" rx="@theme.ButtonRadius" fill="@theme.Primary" />
|
||||
<rect x="56" y="44" width="28" height="8" rx="@theme.ButtonRadius" fill="@theme.Secondary" />
|
||||
<rect x="56" y="21" width="28" height="2" rx="1" fill="@theme.ContentText" />
|
||||
<rect x="56" y="25" width="28" height="2" rx="1" fill="@theme.ContentText" />
|
||||
<rect x="56" y="29" width="28" height="2" rx="1" fill="@theme.ContentText" />
|
||||
<rect x="56" y="33" width="14" height="2" rx="1" fill="@theme.ContentText" />
|
||||
<path d="M41.2344 33.6172V28.9102C41.2344 28.5716 41.179 28.2819 41.0684 28.041C40.9577 27.7936 40.7852 27.6016 40.5508 27.4648C40.3229 27.3281 40.0267 27.2598 39.6621 27.2598C39.3496 27.2598 39.0794 27.3151 38.8516 27.4258C38.6237 27.5299 38.4479 27.6829 38.3242 27.8848C38.2005 28.0801 38.1387 28.3112 38.1387 28.5781H35.3262C35.3262 28.1289 35.4303 27.7025 35.6387 27.2988C35.847 26.8952 36.1497 26.5404 36.5469 26.2344C36.944 25.9219 37.416 25.6777 37.9629 25.502C38.5163 25.3262 39.1348 25.2383 39.8184 25.2383C40.6387 25.2383 41.3678 25.375 42.0059 25.6484C42.6439 25.9219 43.1452 26.332 43.5098 26.8789C43.8809 27.4258 44.0664 28.1094 44.0664 28.9297V33.4512C44.0664 34.0306 44.1022 34.5059 44.1738 34.877C44.2454 35.2415 44.3496 35.5605 44.4863 35.834V36H41.6445C41.5078 35.7135 41.4036 35.3555 41.332 34.9258C41.2669 34.4896 41.2344 34.0534 41.2344 33.6172ZM41.6055 29.5645L41.625 31.1562H40.0527C39.6816 31.1562 39.3594 31.1986 39.0859 31.2832C38.8125 31.3678 38.5879 31.4883 38.4121 31.6445C38.2363 31.7943 38.1061 31.9701 38.0215 32.1719C37.9434 32.3737 37.9043 32.5951 37.9043 32.8359C37.9043 33.0768 37.9596 33.2949 38.0703 33.4902C38.181 33.679 38.3405 33.8288 38.5488 33.9395C38.7572 34.0436 39.0013 34.0957 39.2812 34.0957C39.7044 34.0957 40.0723 34.0111 40.3848 33.8418C40.6973 33.6725 40.9382 33.4642 41.1074 33.2168C41.2832 32.9694 41.3743 32.735 41.3809 32.5137L42.123 33.7051C42.0189 33.972 41.8757 34.2487 41.6934 34.5352C41.5176 34.8216 41.293 35.0918 41.0195 35.3457C40.7461 35.5931 40.4173 35.7982 40.0332 35.9609C39.6491 36.1172 39.1934 36.1953 38.666 36.1953C37.9954 36.1953 37.3867 36.0618 36.8398 35.7949C36.2995 35.5215 35.8698 35.1471 35.5508 34.6719C35.2383 34.1901 35.082 33.6432 35.082 33.0312C35.082 32.4779 35.1862 31.9863 35.3945 31.5566C35.6029 31.127 35.9089 30.7656 36.3125 30.4727C36.7227 30.1732 37.2337 29.9486 37.8457 29.7988C38.4577 29.6426 39.1673 29.5645 39.9746 29.5645H41.6055Z" fill="@theme.ContentText" />
|
||||
<path d="M28.0508 24.2129L24.1836 36H21.0684L26.3516 21.7812H28.334L28.0508 24.2129ZM31.2637 36L27.3867 24.2129L27.0742 21.7812H29.0762L34.3887 36H31.2637ZM31.0879 30.707V33.002H23.5781V30.707H31.0879Z" fill="@theme.TitleText" />
|
||||
<defs>
|
||||
<filter id="dropShadow0" x="101" y="10" width="86" height="54" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dy="1" />
|
||||
<feGaussianBlur stdDeviation="1" />
|
||||
<feComposite in2="hardAlpha" operator="out" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="filter_dropShadow" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="filter_dropShadow" result="shape" />
|
||||
</filter>
|
||||
<filter id="dropShadow1" x="193" y="10" width="86" height="54" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dy="1" />
|
||||
<feGaussianBlur stdDeviation="1" />
|
||||
<feComposite in2="hardAlpha" operator="out" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="filter_dropShadow" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="filter_dropShadow" result="shape" />
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
</text>
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,9 +13,10 @@
|
||||
<RadzenComponents />
|
||||
|
||||
<RadzenLayout Style="grid-template-columns: auto 1fr auto; grid-template-areas: 'rz-header rz-header rz-header' 'rz-sidebar rz-body rz-config-sidebar'">
|
||||
<RadzenHeader>
|
||||
<RadzenHeader class="rz-p-0">
|
||||
<ChildContent>
|
||||
<RadzenRow AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Start" Gap="0px">
|
||||
<MainTopNav />
|
||||
<RadzenRow AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Start" Gap="0px" class="demos-nav">
|
||||
<RadzenColumn Size="5">
|
||||
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
|
||||
<RadzenSidebarToggle Click="@(() => sidebarExpanded = !sidebarExpanded)" />
|
||||
@@ -26,7 +27,6 @@
|
||||
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.End">
|
||||
<div class="rz-display-none rz-display-sm-inline-flex align-items-center">
|
||||
<RadzenLink Path="/docs/api/" Text="API Reference" title="Radzen Blazor Components API Reference" class="rz-mx-2 rz-mx-lg-4" target="_blank" />
|
||||
<RadzenLink Path="https://www.radzen.com/" Text="About Radzen" title="Create .NET Core web applications fast & easy" class="rz-text-nowrap rz-mx-2 rz-mx-lg-4" target="_blank" />
|
||||
<RadzenLink Path="https://github.com/radzenhq/radzen-blazor" Text="GitHub" title="Star Radzen Blazor Components on GitHub" class="rz-text-nowrap rz-mx-2 rz-mx-lg-4" target="_blank" />
|
||||
</div>
|
||||
<RadzenAppearanceToggle class="rz-mx-2" />
|
||||
|
||||
138
RadzenBlazorDemos/Shared/MainTopNav.razor
Normal file
138
RadzenBlazorDemos/Shared/MainTopNav.razor
Normal file
@@ -0,0 +1,138 @@
|
||||
<RadzenRow class="rz-w-100 rz-mx-auto rz-ps-6 rz-pe-2 rz-border-bottom" AlignItems="Radzen.AlignItems.Center" JustifyContent="Radzen.JustifyContent.Center" Gap="0" RowGap="1rem" Style="background-color: var(--rz-base-darker);">
|
||||
<RadzenColumn Size="12">
|
||||
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="1rem" Wrap="Radzen.FlexWrap.Wrap" JustifyContent="Radzen.JustifyContent.SpaceBetween" class="rz-align-items-start rz-align-items-md-center rz-mx-auto">
|
||||
<RadzenLink Path="https://www.radzen.com/" style="height: var(--rz-input-height); color: var(--rz-on-base-darker);" class="rz-display-flex rz-align-items-center" Text="www.radzen.com"></RadzenLink>
|
||||
<RadzenStack JustifyContent="Radzen.JustifyContent.Center" Orientation="Radzen.Orientation.Horizontal" Wrap="Radzen.FlexWrap.NoWrap" Gap="1rem" class="main-nav site-main-top-nav rz-align-items-start rz-align-items-sm-center">
|
||||
<RadzenMenu Style="-rz-icon-size: 1.25rem; padding: 0px;">
|
||||
<RadzenMenuItem Text="Solutions" Style="font-size: 0.875rem;" class="rz-px-0 rz-px-md-2">
|
||||
<RadzenMenuItem Path="https://www.radzen.com/crud-operations-and-data-management/">
|
||||
<Template>
|
||||
<RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" class="rz-p-0 rz-p-sm-2">
|
||||
<div class="rz-display-none rz-display-sm-block">
|
||||
<RadzenStack class="rz-background-color-primary-darker" Style="width: 4rem; height: 4rem; border-radius: var(--rz-border-radius);" AlignItems="Radzen.AlignItems.Center" JustifyContent="Radzen.JustifyContent.Center">
|
||||
<RadzenIcon Icon="table" Style="font-size: 32px; font-weight: 300" />
|
||||
</RadzenStack>
|
||||
</div>
|
||||
<RadzenStack Gap="0">
|
||||
<RadzenText TextStyle="TextStyle.Overline" class="rz-display-none rz-display-sm-block" Style="color: inherit;">Efficiency at its best –</RadzenText>
|
||||
<RadzenText TextStyle="TextStyle.H6" class="rz-m-0" Style="color: inherit;">CRUD Operations and Data Management</RadzenText>
|
||||
</RadzenStack>
|
||||
</RadzenStack>
|
||||
</Template>
|
||||
</RadzenMenuItem>
|
||||
<RadzenMenuItem Path="https://www.radzen.com/integrations/">
|
||||
<Template>
|
||||
<RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" class="rz-p-0 rz-p-sm-2">
|
||||
<div class="rz-display-none rz-display-sm-block">
|
||||
<RadzenStack class="rz-background-color-primary-darker" Style="width: 4rem; height: 4rem; border-radius: var(--rz-border-radius);" AlignItems="Radzen.AlignItems.Center" JustifyContent="Radzen.JustifyContent.Center">
|
||||
<RadzenIcon Icon="hub" Style="font-size: 32px; font-weight: 300" />
|
||||
</RadzenStack>
|
||||
</div>
|
||||
<RadzenStack Gap="0">
|
||||
<RadzenText TextStyle="TextStyle.Overline" class="rz-display-none rz-display-sm-block" Style="color: inherit;">Connect to your data –</RadzenText>
|
||||
<RadzenText TextStyle="TextStyle.H6" class="rz-m-0" Style="color: inherit;">Seamless Integration</RadzenText>
|
||||
</RadzenStack>
|
||||
</RadzenStack>
|
||||
</Template>
|
||||
</RadzenMenuItem>
|
||||
<RadzenMenuItem Path="https://www.radzen.com/digital-transformation-and-modernization/">
|
||||
<Template>
|
||||
<RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" class="rz-p-0 rz-p-sm-2">
|
||||
<div class="rz-display-none rz-display-sm-block">
|
||||
<RadzenStack class="rz-background-color-primary-darker" Style="width: 4rem; height: 4rem; border-radius: var(--rz-border-radius);" AlignItems="Radzen.AlignItems.Center" JustifyContent="Radzen.JustifyContent.Center">
|
||||
<RadzenIcon Icon="tips_and_updates" Style="font-size: 32px; font-weight: 300" />
|
||||
</RadzenStack>
|
||||
</div>
|
||||
<RadzenStack Gap="0">
|
||||
<RadzenText TextStyle="TextStyle.Overline" class="rz-display-none rz-display-sm-block" Style="color: inherit;">Say Hello to The Future –</RadzenText>
|
||||
<RadzenText TextStyle="TextStyle.H6" class="rz-m-0" Style="color: inherit;">Digital Transformation and Modernization</RadzenText>
|
||||
</RadzenStack>
|
||||
</RadzenStack>
|
||||
</Template>
|
||||
</RadzenMenuItem>
|
||||
<RadzenMenuItem Path="https://www.radzen.com/design-systems/">
|
||||
<Template>
|
||||
<RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" class="rz-p-0 rz-p-sm-2">
|
||||
<div class="rz-display-none rz-display-sm-block">
|
||||
<RadzenStack class="rz-background-color-primary-darker" Style="width: 4rem; height: 4rem; border-radius: var(--rz-border-radius);" AlignItems="Radzen.AlignItems.Center" JustifyContent="Radzen.JustifyContent.Center">
|
||||
<RadzenIcon Icon="format_shapes" Style="font-size: 32px; font-weight: 300" />
|
||||
</RadzenStack>
|
||||
</div>
|
||||
<RadzenStack Gap="0">
|
||||
<RadzenText TextStyle="TextStyle.Overline" class="rz-display-none rz-display-sm-block" Style="color: inherit;">Promote Your Branding –</RadzenText>
|
||||
<RadzenText TextStyle="TextStyle.H6" class="rz-m-0" Style="color: inherit;">Design Systems and Consistency</RadzenText>
|
||||
</RadzenStack>
|
||||
</RadzenStack>
|
||||
</Template>
|
||||
</RadzenMenuItem>
|
||||
<RadzenMenuItem Path="https://www.radzen.com/various-use-cases/">
|
||||
<Template>
|
||||
<RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" class="rz-p-0 rz-p-sm-2">
|
||||
<div class="rz-display-none rz-display-sm-block">
|
||||
<RadzenStack class="rz-background-color-primary-darker" Style="width: 4rem; height: 4rem; border-radius: var(--rz-border-radius);" AlignItems="Radzen.AlignItems.Center" JustifyContent="Radzen.JustifyContent.Center">
|
||||
<RadzenIcon Icon="folder_special" Style="font-size: 32px; font-weight: 300" />
|
||||
</RadzenStack>
|
||||
</div>
|
||||
<RadzenStack Gap="0">
|
||||
<RadzenText TextStyle="TextStyle.Overline" class="rz-display-none rz-display-sm-block" Style="color: inherit;">Versatile Use Cases –</RadzenText>
|
||||
<RadzenText TextStyle="TextStyle.H6" class="rz-m-0" Style="color: inherit;">From Prototyping to Production</RadzenText>
|
||||
</RadzenStack>
|
||||
</RadzenStack>
|
||||
</Template>
|
||||
</RadzenMenuItem>
|
||||
<RadzenMenuItem Path="https://www.radzen.com/faster-time-to-market/">
|
||||
<Template>
|
||||
<RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" class="rz-p-0 rz-p-sm-2">
|
||||
<div class="rz-display-none rz-display-sm-block">
|
||||
<RadzenStack class="rz-background-color-primary-darker" Style="width: 4rem; height: 4rem; border-radius: var(--rz-border-radius);" AlignItems="Radzen.AlignItems.Center" JustifyContent="Radzen.JustifyContent.Center">
|
||||
<RadzenIcon Icon="timeline" Style="font-size: 32px; font-weight: 300" />
|
||||
</RadzenStack>
|
||||
</div>
|
||||
<RadzenStack Gap="0">
|
||||
<RadzenText TextStyle="TextStyle.Overline" class="rz-display-none rz-display-sm-block" Style="color: inherit;">Seize the Market Faster –</RadzenText>
|
||||
<RadzenText TextStyle="TextStyle.H6" class="rz-m-0" Style="color: inherit;">Time to Market Reduced</RadzenText>
|
||||
</RadzenStack>
|
||||
</RadzenStack>
|
||||
</Template>
|
||||
</RadzenMenuItem>
|
||||
<RadzenMenuItem Path="https://www.radzen.com/education/">
|
||||
<Template>
|
||||
<RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" class="rz-p-0 rz-p-sm-2">
|
||||
<div class="rz-display-none rz-display-sm-block">
|
||||
<RadzenStack class="rz-background-color-primary-darker" Style="width: 4rem; height: 4rem; border-radius: var(--rz-border-radius);" AlignItems="Radzen.AlignItems.Center" JustifyContent="Radzen.JustifyContent.Center">
|
||||
<RadzenIcon Icon="school" Style="font-size: 32px; font-weight: 300" />
|
||||
</RadzenStack>
|
||||
</div>
|
||||
<RadzenStack Gap="0">
|
||||
<RadzenText TextStyle="TextStyle.Overline" class="rz-display-none rz-display-sm-block" Style="color: inherit;">A Teaching Tool –</RadzenText>
|
||||
<RadzenText TextStyle="TextStyle.H6" class="rz-m-0" Style="color: inherit;">Empower the Next Generation</RadzenText>
|
||||
</RadzenStack>
|
||||
</RadzenStack>
|
||||
</Template>
|
||||
</RadzenMenuItem>
|
||||
</RadzenMenuItem>
|
||||
<RadzenMenuItem Text="Products" Style="font-size: 0.875rem;" class="rz-px-0 rz-px-md-2" >
|
||||
<RadzenMenuItem Text="Radzen Blazor Studio" Path="https://www.radzen.com/blazor-studio/" />
|
||||
<RadzenMenuItem Text="Radzen Blazor for Visual Studio" Path="https://www.radzen.com/blazor-visual-studio/" />
|
||||
<RadzenMenuItem Text="Radzen Blazor Components" Path="/" />
|
||||
</RadzenMenuItem>
|
||||
<RadzenMenuItem Text="Resources" Style="font-size: 0.875rem;" class="rz-px-0 rz-px-md-2" >
|
||||
<RadzenMenuItem Text="Community forum ↗" Path="https://forum.radzen.com" Target="_blank" />
|
||||
<RadzenMenuItem Text="Online demos" Path="https://www.radzen.com/demos/" />
|
||||
<RadzenMenuItem Text="Roadmaps" Path="https://www.radzen.com/roadmaps/" />
|
||||
<RadzenMenuItem Text="Blogs" Path="https://www.radzen.com/blog/" />
|
||||
<RadzenMenuItem Text="YouTube channel ↗" Path="https://www.youtube.com/channel/UCAX4L9SPAigw41-RqTYEeKg" Target="_blank" />
|
||||
</RadzenMenuItem>
|
||||
<RadzenMenuItem Text="Success stories" Path="https://www.radzen.com/customers/" Style="font-size: 0.875rem;" class="rz-px-0 rz-px-md-2" />
|
||||
<RadzenMenuItem Text="About" Path="https://www.radzen.com/about/" Style="font-size: 0.875rem;" class="rz-px-0 rz-px-md-2" />
|
||||
<RadzenMenuItem Text="Pricing" Path="https://www.radzen.com/pricing/blazor-components" Style="font-size: 0.875rem;" class="rz-px-0 rz-px-md-2" />
|
||||
<RadzenMenuItem Text="Downloads" Path="https://www.radzen.com/downloads/" Style="font-size: 0.875rem;" class="rz-px-0 rz-px-md-2" />
|
||||
</RadzenMenu>
|
||||
</RadzenStack>
|
||||
</RadzenStack>
|
||||
</RadzenColumn>
|
||||
</RadzenRow>
|
||||
|
||||
@code {
|
||||
|
||||
}
|
||||
@@ -303,7 +303,28 @@ video {
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Site Navigation on Product pages */
|
||||
|
||||
.site-main-top-nav {
|
||||
--rz-menu-item-icon-margin-inline: 0;
|
||||
--rz-menu-item-icon-color: var(--rz-on-primary-darker);
|
||||
--rz-menu-item-icon-hover-color: var(--rz-white);
|
||||
--rz-menu-background-color: var(--rz-base-darker);
|
||||
--rz-menu-top-item-color: var(--rz-on-base-darker);
|
||||
--rz-menu-top-item-background-color: var(--rz-base-darker);
|
||||
--rz-menu-top-item-hover-color: var(--rz-on-base-darker);
|
||||
--rz-menu-top-item-selected-color: var(--rz-on-base-darker);
|
||||
--rz-menu-item-color: var(--rz-on-base-darker);
|
||||
--rz-menu-item-background-color: var(--rz-base-darker);
|
||||
--rz-menu-item-hover-color: var(--rz-on-base-dark);
|
||||
--rz-menu-item-hover-background-color: var(--rz-base-dark);
|
||||
--rz-menu-item-selected-color: var(--rz-on-base-darker);
|
||||
}
|
||||
|
||||
.rz-material3 .demos-nav,
|
||||
.rz-material3-dark .demos-nav {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
|
||||
|
||||
Reference in New Issue
Block a user