Skip to content

Commit 2972d49

Browse files
ivanchevivanchev
authored
Merge pull request #18 from telerik/preview4
feat: update demos to preview4
2 parents 193bbe0 + 3a9004e commit 2972d49

Some content is hidden

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

61 files changed

+1963
-1766
lines changed

‎TelerikBlazor.Client/App.cshtml ‎TelerikBlazor.Client/App.razor

File renamed without changes.

‎TelerikBlazor.Client/Pages/AnimationContainer/Index.cshtml ‎TelerikBlazor.Client/Pages/AnimationContainer/Index.razor

+47-43
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,48 @@
1-
@page "/animationcontainer/index"
2-
3-
<div class="row">
4-
<select class="form-control col-xs-6 col-sm-1" bind="@AnimType">
5-
<option value="@AnimationType.Fade">Fade</option>
6-
<option value="@AnimationType.SlideDown">SlideDown</option>
7-
<option value="@AnimationType.SlideIn">SlideIn</option>
8-
<option value="@AnimationType.SlideLeft">SlideLeft</option>
9-
<option value="@AnimationType.SlideRight">SlideRight</option>
10-
<option value="@AnimationType.PushDown">PushDown</option>
11-
<option value="@AnimationType.PushLeft">PushLeft</option>
12-
<option value="@AnimationType.PushRight">PushRight</option>
13-
<option value="@AnimationType.PushUp">PushUp</option>
14-
<option value="@AnimationType.ZoomIn">ZoomIn</option>
15-
<option value="@AnimationType.ZoomOut">ZoomOut</option>
16-
</select>
17-
18-
<div class="col-xs-6 col-sm-1">
19-
<TelerikButton OnClick="@ToggleAnimation">Show/Hide Animation Container</TelerikButton>
20-
</div>
21-
</div>
22-
23-
<div style="position:relative; height: 150px;">
24-
<TelerikAnimationContainer Top="50" Width=200 Height=150 Visible=@Visible AnimationType=@AnimType Class="k-popup">
25-
Test Content
26-
</TelerikAnimationContainer>
27-
</div>
28-
29-
@functions {
30-
public bool Visible { get; set; } = false;
31-
public AnimationType AnimType { get; set; } = AnimationType.Fade;
32-
33-
public void ToggleAnimation()
34-
{
35-
Visible = !Visible;
36-
StateHasChanged();
37-
}
38-
}
39-
40-
<style type="text/css">
41-
.example-wrapper {
42-
min-height: 300px;
43-
}
1+
@page "/animationcontainer/index"
2+
@using Telerik.Blazor
3+
@using Telerik.Blazor.Components.AnimationContainer
4+
@using Telerik.Blazor.Components.Button
5+
6+
<div class="row">
7+
<select class="form-control col-xs-6 col-sm-1" bind="@AnimType">
8+
<option value="@AnimationType.Fade">Fade</option>
9+
<option value="@AnimationType.SlideDown">SlideDown</option>
10+
<option value="@AnimationType.SlideIn">SlideIn</option>
11+
<option value="@AnimationType.SlideLeft">SlideLeft</option>
12+
<option value="@AnimationType.SlideRight">SlideRight</option>
13+
<option value="@AnimationType.PushDown">PushDown</option>
14+
<option value="@AnimationType.PushLeft">PushLeft</option>
15+
<option value="@AnimationType.PushRight">PushRight</option>
16+
<option value="@AnimationType.PushUp">PushUp</option>
17+
<option value="@AnimationType.ZoomIn">ZoomIn</option>
18+
<option value="@AnimationType.ZoomOut">ZoomOut</option>
19+
</select>
20+
21+
<div class="col-xs-6 col-sm-1">
22+
<TelerikButton OnClick="@ToggleAnimation">Show/Hide Animation Container</TelerikButton>
23+
</div>
24+
</div>
25+
26+
<div style="position:relative; height: 150px;">
27+
<TelerikAnimationContainer Top="50" Width=200 Height=150 Visible=@Visible AnimationType=@AnimType Class="k-popup">
28+
Test Content
29+
</TelerikAnimationContainer>
30+
</div>
31+
32+
@functions {
33+
public bool Visible { get; set; } = false;
34+
public AnimationType AnimType { get; set; } = AnimationType.Fade;
35+
36+
public void ToggleAnimation()
37+
{
38+
Visible = !Visible;
39+
StateHasChanged();
40+
}
41+
}
42+
43+
<style type="text/css">
44+
45+
.example-wrapper {
46+
min-height: 300px;
47+
}
4448
</style>

‎TelerikBlazor.Client/Pages/AnimationContainer/Notification.cshtml ‎TelerikBlazor.Client/Pages/AnimationContainer/Notification.razor

+39-36
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,40 @@
1-
@page "/animationcontainer/notification"
2-
3-
4-
<TelerikButton OnClick="@Show">Show Notification</TelerikButton>
5-
6-
<div style="position: absolute; top: 50%; left: 50%">
7-
<TelerikAnimationContainer Width=300 Height=200 Visible=@Visible AnimationType=@AnimationType.Fade>
8-
<div class="k-widget k-popup k-notification k-notification-info">
9-
<div class="new-mail">
10-
<img src="https://demos.telerik.com/kendo-ui/content/web/notification/envelope.png">
11-
<h3>New E-mail</h3>
12-
<p>You have 1 new mail message!</p>
13-
</div>
14-
</div>
15-
</TelerikAnimationContainer>
16-
</div>
17-
18-
@functions {
19-
public bool Visible { get; set; } = false;
20-
21-
public async void Show(UIMouseEventArgs args)
22-
{
23-
Visible = true;
24-
StateHasChanged();
25-
26-
await Task.Delay(2000);
27-
Visible = false;
28-
StateHasChanged();
29-
}
30-
}
31-
32-
<style type="text/css">
33-
.example-wrapper {
34-
min-height: 200px;
35-
position: relative;
36-
}
1+
@page "/animationcontainer/notification"
2+
@using Telerik.Blazor
3+
@using Telerik.Blazor.Components.AnimationContainer
4+
5+
6+
<TelerikButton OnClick="@Show">Show Notification</TelerikButton>
7+
8+
<div style="position: absolute; top: 50%; left: 50%">
9+
<TelerikAnimationContainer Width=300 Height=200 Visible=@Visible AnimationType=@AnimationType.Fade>
10+
<div class="k-widget k-popup k-notification k-notification-info">
11+
<div class="new-mail">
12+
<img src="https://demos.telerik.com/kendo-ui/content/web/notification/envelope.png">
13+
<h3>New E-mail</h3>
14+
<p>You have 1 new mail message!</p>
15+
</div>
16+
</div>
17+
</TelerikAnimationContainer>
18+
</div>
19+
20+
@functions {
21+
public bool Visible { get; set; } = false;
22+
23+
public async void Show(UIMouseEventArgs args)
24+
{
25+
Visible = true;
26+
StateHasChanged();
27+
28+
await Task.Delay(2000);
29+
Visible = false;
30+
StateHasChanged();
31+
}
32+
}
33+
34+
<style type="text/css">
35+
36+
.example-wrapper {
37+
min-height: 200px;
38+
position: relative;
39+
}
3740
</style>

‎TelerikBlazor.Client/Pages/AnimationContainer/ToolTip.cshtml ‎TelerikBlazor.Client/Pages/AnimationContainer/ToolTip.razor

+59-56
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,60 @@
1-
@page "/animationcontainer/tooltip"
2-
3-
<span> Hover over the image to show the tooltip. </span>
4-
<div style="position: relative; height: 150px">
5-
<img style="width: 150px; height: 150px;" onmouseout="@OnMouseOut" onmousemove="@OnMouseMove" onmouseover="@OnMouseOver" src="@($"images/1.jpg")" alt="Alternate Text" />
6-
</div>
7-
8-
<TelerikAnimationContainer Top=@Top Left=@Left Width=100 Height=100 Visible=@Visible AnimationType=@AnimationType.Fade>
9-
<div role="tooltip" class="k-widget k-tooltip k-tooltip-closable k-popup k-group k-reset k-state-border-up" style="margin-left: 12px;">
10-
<div class="k-tooltip-content">
11-
<div class="template-wrapper">
12-
<p><strong>Chai</strong> <br />drink</p>
13-
</div>
14-
</div>
15-
<div class="k-callout k-callout-w"></div>
16-
</div>
17-
</TelerikAnimationContainer>
18-
19-
@functions {
20-
public bool Visible { get; set; } = false;
21-
public int Top { get; set; }
22-
public int Left { get; set; }
23-
public int Offset { get; set; } = 20;
24-
25-
public void ToggleAnimation()
26-
{
27-
Visible = !Visible;
28-
StateHasChanged();
29-
}
30-
31-
public void OnMouseMove(UIMouseEventArgs args)
32-
{
33-
Top = (int)args.ClientY - Offset;
34-
Left = (int)args.ClientX + Offset;
35-
StateHasChanged();
36-
}
37-
38-
public void OnMouseOver(UIMouseEventArgs args)
39-
{
40-
Top = (int)args.ClientY - Offset;
41-
Left = (int)args.ClientX + Offset;
42-
Visible = true;
43-
StateHasChanged();
44-
}
45-
46-
public void OnMouseOut(UIMouseEventArgs args)
47-
{
48-
Visible = false;
49-
StateHasChanged();
50-
}
51-
}
52-
53-
<style type="text/css">
54-
.example-wrapper {
55-
min-height: 200px;
56-
}
1+
@page "/animationcontainer/tooltip"
2+
@using Telerik.Blazor
3+
@using Telerik.Blazor.Components.AnimationContainer
4+
5+
<span> Hover over the image to show the tooltip. </span>
6+
<div style="position: relative; height: 150px">
7+
<img style="width: 150px; height: 150px;" onmouseout="@OnMouseOut" onmousemove="@OnMouseMove" onmouseover="@OnMouseOver" src="@($"images/1.jpg")" alt="Alternate Text" />
8+
</div>
9+
10+
<TelerikAnimationContainer Top=@Top Left=@Left Width=100 Height=100 Visible=@Visible AnimationType=@AnimationType.Fade>
11+
<div role="tooltip" class="k-widget k-tooltip k-tooltip-closable k-popup k-group k-reset k-state-border-up" style="margin-left: 12px;">
12+
<div class="k-tooltip-content">
13+
<div class="template-wrapper">
14+
<p><strong>Chai</strong> <br />drink</p>
15+
</div>
16+
</div>
17+
<div class="k-callout k-callout-w"></div>
18+
</div>
19+
</TelerikAnimationContainer>
20+
21+
@functions {
22+
public bool Visible { get; set; } = false;
23+
public int Top { get; set; }
24+
public int Left { get; set; }
25+
public int Offset { get; set; } = 20;
26+
27+
public void ToggleAnimation()
28+
{
29+
Visible = !Visible;
30+
StateHasChanged();
31+
}
32+
33+
public void OnMouseMove(UIMouseEventArgs args)
34+
{
35+
Top = (int)args.ClientY - Offset;
36+
Left = (int)args.ClientX + Offset;
37+
StateHasChanged();
38+
}
39+
40+
public void OnMouseOver(UIMouseEventArgs args)
41+
{
42+
Top = (int)args.ClientY - Offset;
43+
Left = (int)args.ClientX + Offset;
44+
Visible = true;
45+
StateHasChanged();
46+
}
47+
48+
public void OnMouseOut(UIMouseEventArgs args)
49+
{
50+
Visible = false;
51+
StateHasChanged();
52+
}
53+
}
54+
55+
<style type="text/css">
56+
57+
.example-wrapper {
58+
min-height: 200px;
59+
}
5760
</style>

‎TelerikBlazor.Client/Pages/Button/Index.cshtml ‎TelerikBlazor.Client/Pages/Button/Index.razor

+47-45
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,48 @@
1-
@page "/button/index"
2-
3-
<div class="box-content">
4-
<h4>Basic Button</h4>
5-
6-
<TelerikButton OnClick="@MyClickHandler">Click me!</TelerikButton>
7-
@thankYoString
8-
9-
@functions {
10-
string thankYoString;
11-
12-
protected void MyClickHandler()
13-
{
14-
thankYoString = string.Format("Thank you for clicking me at {0:HH:mm:ss} on {0:dd MMM yy}. Now you can write front-end with C#, yay!", DateTime.Now);
15-
StateHasChanged();
16-
}
17-
}
18-
19-
<h4>Styled Buttons</h4>
20-
21-
<TelerikButton Primary="true">Primary Button</TelerikButton>
22-
23-
<TelerikButton Class="RedText">Red Text Button</TelerikButton>
24-
25-
<h4>Buttons with icons</h4>
26-
27-
<TelerikButton SpriteClass="k-icon netherlandsFlag">Sprite</TelerikButton>
28-
<TelerikButton Icon="filter">Icon</TelerikButton>
29-
<TelerikButton ImageUrl="https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png">Image Url</TelerikButton>
30-
31-
<h4>Disabled Button</h4>
32-
33-
<TelerikButton Enabled="false">Disabled Button</TelerikButton>
34-
</div>
35-
36-
<style>
37-
.RedText,
38-
.RedText:hover {
39-
color: red;
40-
}
41-
42-
.netherlandsFlag {
43-
background-image: url("https://demos.telerik.com/kendo-ui/content/shared/styles/flags.png");
44-
background-position: 0 -64px;
45-
}
1+
@page "/button/index"
2+
@using Telerik.Blazor.Components.Button
3+
4+
<div class="box-content">
5+
<h4>Basic Button</h4>
6+
7+
<TelerikButton OnClick="@MyClickHandler">Click me!</TelerikButton>
8+
@thankYoString
9+
10+
@functions {
11+
string thankYoString;
12+
13+
protected void MyClickHandler()
14+
{
15+
thankYoString = string.Format("Thank you for clicking me at {0:HH:mm:ss} on {0:dd MMM yy}. Now you can write front-end with C#, yay!", DateTime.Now);
16+
StateHasChanged();
17+
}
18+
}
19+
20+
<h4>Styled Buttons</h4>
21+
22+
<TelerikButton Primary="true">Primary Button</TelerikButton>
23+
24+
<TelerikButton Class="RedText">Red Text Button</TelerikButton>
25+
26+
<h4>Buttons with icons</h4>
27+
28+
<TelerikButton SpriteClass="k-icon netherlandsFlag">Sprite</TelerikButton>
29+
<TelerikButton Icon="filter">Icon</TelerikButton>
30+
<TelerikButton ImageUrl="https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png">Image Url</TelerikButton>
31+
32+
<h4>Disabled Button</h4>
33+
34+
<TelerikButton Enabled="false">Disabled Button</TelerikButton>
35+
</div>
36+
37+
<style>
38+
39+
.RedText,
40+
.RedText:hover {
41+
color: red;
42+
}
43+
44+
.netherlandsFlag {
45+
background-image: url("https://demos.telerik.com/kendo-ui/content/shared/styles/flags.png");
46+
background-position: 0 -64px;
47+
}
4648
</style>

0 commit comments

Comments
 (0)