Skip to content

Commit 0249571

Browse files
radkostanevradkostanev
committed
chore: spike examples project
1 parent 85bcffb commit 0249571

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+939
-8
lines changed

‎components/button/overview.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ This article introduces the <a href="https://www.telerik.com/blazor-ui/buttons"
1414

1515
Buttons convey user actions and can display text, images and HTML.
1616

17-
<demo metaUrl="buttons/styling/appearance/" height="222" />
17+
<demo metaUrl="buttons/styling/appearance/" height="222"> </demo>
1818

1919
The Blazor Button provides a variety of styling options through the [built-in themes](slug://themes-overview) and the [button type](slug://button-type). It supports [font icons and images](slug://button-icons) and fires click [events](slug://button-events).
2020

‎docs-builder.yml‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -117,20 +117,15 @@ demos:
117117
colors: ['#323130', '#0078D4', '#ffffff']
118118
actions:
119119
open-code-sandbox:
120-
name: CodeSandBox
120+
name: Telerik REPL
121121
group: Edit in
122122
newWindow: true
123123
iconUri: data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMS41IiB5PSIxLjUiIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgc3Ryb2tlPSIjODJBMDBDIi8+Cjwvc3ZnPgo=
124-
open-stack-blitz:
125-
name: StackBlitz
126-
newWindow: true
127-
group: Edit in
128-
iconUri: data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjAyNzIgNi4xOTU2NUw0LjcxMTk2IDE1TDcuMzIwNjUgOC44MDQzNUgzTDExLjMxNTIgMEw4LjcwNjUyIDYuMTk1NjVIMTMuMDI3MloiIGZpbGw9IiMxMzg5RkQiLz4KPC9zdmc+Cg==
129124

130125
cta-overview: The @Subject component is part of @ProductLink, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
131126
cta-intro: "@ProductLink is a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial."
132127

133-
excluded-files: ["**/src-a11y/**/*"]
128+
excluded-files: ["**/src-a11y/**/*", "**/examples/**/*"]
134129

135130
liquid-output-delimiter-left: "{{"
136131
liquid-output-delimiter-right: "}}"

‎examples/src/BlazorDocsExamples.sln‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.12.35527.113
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorDocsExamples", "BlazorDocsExamples\BlazorDocsExamples\BlazorDocsExamples.csproj", "{DF0D6114-63A3-49AE-99D9-67FCF59F8511}"
7+
EndProject
8+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorDocsExamples.Client", "BlazorDocsExamples\BlazorDocsExamples.Client\BlazorDocsExamples.Client.csproj", "{E8FBF522-4B24-447D-8CEA-262F0B01A5DE}"
9+
EndProject
10+
Global
11+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
12+
Debug|Any CPU = Debug|Any CPU
13+
Release|Any CPU = Release|Any CPU
14+
EndGlobalSection
15+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
16+
{DF0D6114-63A3-49AE-99D9-67FCF59F8511}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
17+
{DF0D6114-63A3-49AE-99D9-67FCF59F8511}.Debug|Any CPU.Build.0 = Debug|Any CPU
18+
{DF0D6114-63A3-49AE-99D9-67FCF59F8511}.Release|Any CPU.ActiveCfg = Release|Any CPU
19+
{DF0D6114-63A3-49AE-99D9-67FCF59F8511}.Release|Any CPU.Build.0 = Release|Any CPU
20+
{E8FBF522-4B24-447D-8CEA-262F0B01A5DE}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
21+
{E8FBF522-4B24-447D-8CEA-262F0B01A5DE}.Debug|Any CPU.Build.0 = Debug|Any CPU
22+
{E8FBF522-4B24-447D-8CEA-262F0B01A5DE}.Release|Any CPU.ActiveCfg = Release|Any CPU
23+
{E8FBF522-4B24-447D-8CEA-262F0B01A5DE}.Release|Any CPU.Build.0 = Release|Any CPU
24+
EndGlobalSection
25+
GlobalSection(SolutionProperties) = preSolution
26+
HideSolutionNode = FALSE
27+
EndGlobalSection
28+
EndGlobal

‎examples/src/BlazorDocsExamples/BlazorDocsExamples.Client/BlazorDocsExamples.Client.csproj‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
2+
3+
<PropertyGroup>
4+
<TargetFramework>net8.0</TargetFramework>
5+
<ImplicitUsings>enable</ImplicitUsings>
6+
<Nullable>enable</Nullable>
7+
<NoDefaultLaunchSettingsFile>true</NoDefaultLaunchSettingsFile>
8+
<StaticWebAssetProjectMode>Default</StaticWebAssetProjectMode>
9+
</PropertyGroup>
10+
11+
<ItemGroup>
12+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.11" />
13+
<PackageReference Include="Telerik.UI.for.Blazor" Version="7.1.0" />
14+
</ItemGroup>
15+
16+
</Project>

‎examples/src/BlazorDocsExamples/BlazorDocsExamples.Client/Common/ThemeConfigurator.razor‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<HeadContent>
2+
<link rel="stylesheet" type="text/css" id="app-theme" href="@Theme" />
3+
</HeadContent>

‎examples/src/BlazorDocsExamples/BlazorDocsExamples.Client/Common/ThemeConfigurator.razor.cs‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
using Microsoft.AspNetCore.Components;
2+
using Microsoft.JSInterop;
3+
using System.Web;
4+
5+
namespace BlazorDocsExamples.Client.Common
6+
{
7+
public partial class ThemeConfigurator : ComponentBase
8+
{
9+
private const string DEFAULT_THEME = "default-ocean-blue-a11y";
10+
11+
[Inject]
12+
public required NavigationManager NavigationManager { get; set; }
13+
14+
[Inject]
15+
public required IJSRuntime JsRuntime { get; set; }
16+
17+
private bool IsDisposed { get; set; }
18+
private DotNetObjectReference<ThemeConfigurator>? DotNetInstance { get; set; }
19+
20+
protected override async Task OnParametersSetAsync()
21+
{
22+
var theme = GetThemeQueryFromUrl();
23+
24+
if (theme != Theme)
25+
{
26+
await SetTheme(theme);
27+
}
28+
29+
await base.OnParametersSetAsync();
30+
}
31+
32+
private string GetThemeQueryFromUrl()
33+
{
34+
var uri = new Uri(NavigationManager.Uri);
35+
var queryParams = HttpUtility.ParseQueryString(uri.Query);
36+
var theme = queryParams["theme"];
37+
theme ??= DEFAULT_THEME;
38+
39+
return theme;
40+
}
41+
42+
private async Task SetTheme(string theme)
43+
{
44+
Theme = $"/css/{theme}.css";
45+
Console.WriteLine(Theme);
46+
await InvokeAsync(StateHasChanged);
47+
}
48+
49+
protected override async Task OnAfterRenderAsync(bool firstRender)
50+
{
51+
if (firstRender)
52+
{
53+
await InitMessageService();
54+
await JsRuntime.InvokeVoidAsync("TelerikMessageService.appLoaded", DotNetInstance);
55+
}
56+
57+
await base.OnAfterRenderAsync(firstRender);
58+
}
59+
60+
public async void Dispose()
61+
{
62+
await DisposeMessageService();
63+
}
64+
65+
private async Task InitMessageService()
66+
{
67+
DotNetInstance ??= DotNetObjectReference.Create(this);
68+
69+
await JsRuntime.InvokeVoidAsync("TelerikMessageService.init", DotNetInstance);
70+
}
71+
72+
private async Task DisposeMessageService()
73+
{
74+
// refer to https://github.com/dotnet/aspnetcore/issues/33535#issuecomment-861484714
75+
try
76+
{
77+
if (!IsDisposed)
78+
{
79+
await JsRuntime.InvokeVoidAsync("TelerikMessageService.dispose", DotNetInstance);
80+
}
81+
}
82+
catch (Exception) { }
83+
84+
DotNetInstance?.Dispose();
85+
}
86+
87+
private string Theme { get; set; } = $"/css/{DEFAULT_THEME}.css";
88+
}
89+
}

‎examples/src/BlazorDocsExamples/BlazorDocsExamples.Client/Layout/MainLayout.razor‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@using BlazorDocsExamples.Client.Common
2+
3+
@inherits LayoutComponentBase
4+
5+
<TelerikRootComponent>
6+
<ThemeConfigurator />
7+
<div style="display: flex; justify-content: center; align-items: center; min-height: 100vh">
8+
@Body
9+
</div>
10+
</TelerikRootComponent>
11+
12+
<div id="blazor-error-ui">
13+
An unhandled error has occurred.
14+
<a href="" class="reload">Reload</a>
15+
<a class="dismiss">🗙</a>
16+
</div>

‎examples/src/BlazorDocsExamples/BlazorDocsExamples.Client/Layout/MainLayout.razor.css‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
.page {
2+
position: relative;
3+
display: flex;
4+
flex-direction: column;
5+
}
6+
7+
main {
8+
flex: 1;
9+
}
10+
11+
.sidebar {
12+
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
13+
}
14+
15+
.top-row {
16+
background-color: #f7f7f7;
17+
border-bottom: 1px solid #d6d5d5;
18+
justify-content: flex-end;
19+
height: 3.5rem;
20+
display: flex;
21+
align-items: center;
22+
}
23+
24+
.top-row ::deep a, .top-row ::deep .btn-link {
25+
white-space: nowrap;
26+
margin-left: 1.5rem;
27+
text-decoration: none;
28+
}
29+
30+
.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
31+
text-decoration: underline;
32+
}
33+
34+
.top-row ::deep a:first-child {
35+
overflow: hidden;
36+
text-overflow: ellipsis;
37+
}
38+
39+
@media (max-width: 640.98px) {
40+
.top-row {
41+
justify-content: space-between;
42+
}
43+
44+
.top-row ::deep a, .top-row ::deep .btn-link {
45+
margin-left: 0;
46+
}
47+
}
48+
49+
@media (min-width: 641px) {
50+
.page {
51+
flex-direction: row;
52+
}
53+
54+
.sidebar {
55+
width: 250px;
56+
height: 100vh;
57+
position: sticky;
58+
top: 0;
59+
}
60+
61+
.top-row {
62+
position: sticky;
63+
top: 0;
64+
z-index: 1;
65+
}
66+
67+
.top-row.auth ::deep a:first-child {
68+
flex: 1;
69+
text-align: right;
70+
width: 0;
71+
}
72+
73+
.top-row, article {
74+
padding-left: 2rem !important;
75+
padding-right: 1.5rem !important;
76+
}
77+
}
78+
79+
#blazor-error-ui {
80+
background: lightyellow;
81+
bottom: 0;
82+
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
83+
display: none;
84+
left: 0;
85+
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
86+
position: fixed;
87+
width: 100%;
88+
z-index: 1000;
89+
}
90+
91+
#blazor-error-ui .dismiss {
92+
cursor: pointer;
93+
position: absolute;
94+
right: 0.75rem;
95+
top: 0.5rem;
96+
}

‎examples/src/BlazorDocsExamples/BlazorDocsExamples.Client/Pages/Button/Basic.razor‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@page "/button/basic/"
2+
3+
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Hello</TelerikButton>
4+
5+
@code {
6+
7+
}

‎examples/src/BlazorDocsExamples/BlazorDocsExamples.Client/Pages/Home.razor‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
@page "/"
2+
3+
<PageTitle>Home</PageTitle>
4+
5+
<pre>
6+
<strong>Telerik UI for Blazor, a Coder’s Delight</strong>
7+
8+
In Blazor’s realm where C# thrives,
9+
A UI toolkit comes alive.
10+
With Telerik’s power in your hands,
11+
Web apps shine with sleek commands.
12+
13+
No more JavaScript despair,
14+
C# runs with native flair.
15+
Grids and charts in perfect sync,
16+
Data flows in just a blink.
17+
18+
Buttons bold and menus bright,
19+
Forms that guide with perfect might.
20+
Drag and drop, rich editors too,
21+
All designed for me and you.
22+
23+
Theming’s simple, styles refined,
24+
Dark or light—your choice aligned.
25+
Performance fast, so smooth, so true,
26+
A dream for devs, a joy to view.
27+
28+
So raise your code, embrace the speed,
29+
Telerik meets your every need.
30+
With Blazor strong and features grand,
31+
Your web app’s future is at hand!
32+
</pre>

0 commit comments

Comments
 (0)