Skip to content

Commit 42a2d6c

Browse files
IvanDanchevIvanDanchev
authored
Runnable examples part1 (#3107)
* docs(Notification): add Notification overview example * docs: add demo tags for runnable examples
1 parent 291614c commit 42a2d6c

File tree

13 files changed

+22
-656
lines changed

13 files changed

+22
-656
lines changed

‎components/checkbox/appearance.md‎

Lines changed: 2 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -30,28 +30,7 @@ You can increase or decrease the size of the CheckBox by setting the `Size` attr
3030

3131
>caption The built-in sizes
3232
33-
````RAZOR
34-
@{
35-
var fields = typeof(Telerik.Blazor.ThemeConstants.CheckBox.Size)
36-
.GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
37-
| System.Reflection.BindingFlags.FlattenHierarchy)
38-
.Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
39-
40-
41-
@foreach (var field in fields)
42-
{
43-
string size = field.GetValue(null).ToString();
44-
45-
<div style="float:left; margin: 20px;">
46-
<TelerikCheckBox @bind-Value="@isSelected" Size="@size"></TelerikCheckBox>
47-
</div>
48-
}
49-
}
50-
51-
@code{
52-
private bool isSelected { get; set; }
53-
}
54-
````
33+
<demo metaUrl="client/checkbox/size/" height="420"></demo>
5534

5635
## Rounded
5736

@@ -65,29 +44,6 @@ The `Rounded` attribute applies the `border-radius` CSS rule to the checkbox to
6544

6645
>caption The built-in values of the Rounded attribute
6746
68-
````RAZOR
69-
@* The built-in values of the Rounded attribute. *@
70-
71-
@{
72-
var fields = typeof(Telerik.Blazor.ThemeConstants.CheckBox.Rounded)
73-
.GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
74-
| System.Reflection.BindingFlags.FlattenHierarchy)
75-
.Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
76-
77-
78-
@foreach (var field in fields)
79-
{
80-
string rounded = field.GetValue(null).ToString();
81-
82-
<div style="float:left; margin: 20px;">
83-
<TelerikCheckBox @bind-Value="@isSelected" Rounded="@rounded"></TelerikCheckBox>
84-
</div>
85-
}
86-
}
87-
88-
@code{
89-
private bool isSelected { get; set; }
90-
}
91-
````
47+
<demo metaUrl="client/checkbox/rounded/" height="420"></demo>
9248

9349
@[template](/_contentTemplates/common/themebuilder-section.md#appearance-themebuilder)

‎components/checkbox/overview.md‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,7 @@ The <a href="https://www.telerik.com/blazor-ui/checkbox" target="_blank">Blazor
2222

2323
>caption Basic setup of the Telerik CheckBox using two-way data binding.
2424
25-
````RAZOR
26-
@*Basic setup of the Telerik CheckBox Component*@
27-
28-
<TelerikCheckBox Id="myCheckBox" @bind-Value="@isSelected" />
29-
<label for="myCheckBox">@( isSelected ? "Selected" : "Not selected" )</label>
30-
31-
@code {
32-
private bool isSelected { get; set; }
33-
}
34-
````
25+
<demo metaUrl="client/checkbox/overview/" height="420"></demo>
3526

3627
## Indeterminate State
3728

‎components/datepicker/header-template.md‎

Lines changed: 1 addition & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -16,80 +16,4 @@ The example below is using a [Blazor DatePicker reference and methods](slug:comp
1616

1717
>caption Using DatePicker header template with custom content in the Calendar header
1818
19-
````RAZOR
20-
<TelerikDatePicker @ref="@PickerRef"
21-
Value="@DatePickerValue"
22-
ValueChanged="@DatePickerValueChanged"
23-
T="@DateTime"
24-
Min="@PickerMin"
25-
Max="@PickerMax"
26-
Width="200px">
27-
<HeaderTemplate>
28-
<span>
29-
<TelerikButton OnClick="@GoToPrevious"
30-
Icon="@SvgIcon.ArrowLeft"
31-
Title="Go to Previous Month"
32-
Size="@ThemeConstants.Button.Size.Small" />
33-
<TelerikButton OnClick="@SelectToday" Size="@ThemeConstants.Button.Size.Small">Today</TelerikButton>
34-
<TelerikButton OnClick="@GoToNext"
35-
Icon="@SvgIcon.ArrowRight"
36-
Title="Go to Next Month"
37-
Size="@ThemeConstants.Button.Size.Small"></TelerikButton>
38-
</span>
39-
<span style="padding-right: .6em;">
40-
@DatePickerViewDate.ToString("MMM")
41-
<TelerikNumericTextBox Value="@DatePickerViewDate.Year"
42-
ValueChanged="@NumericTextBoxValueChanged"
43-
T="@int"
44-
Min="@NumericTextBoxMin"
45-
Max="@NumericTextBoxMax"
46-
Width="6em"
47-
Size="@ThemeConstants.NumericTextBox.Size.Small" />
48-
</span>
49-
</HeaderTemplate>
50-
</TelerikDatePicker>
51-
52-
@code {
53-
private TelerikDatePicker<DateTime>? PickerRef { get; set; }
54-
55-
private DateTime DatePickerValue { get; set; } = DateTime.Today;
56-
private DateTime DatePickerViewDate { get; set; } = DateTime.Today;
57-
private DateTime PickerMin { get; set; } = DateTime.Today.AddYears(-10);
58-
private DateTime PickerMax { get; set; } = DateTime.Today.AddYears(10);
59-
60-
private int NumericTextBoxMin => PickerMin.Year;
61-
private int NumericTextBoxMax => PickerMax.Year;
62-
63-
private void DatePickerValueChanged(DateTime newValue)
64-
{
65-
DatePickerValue = DatePickerViewDate = newValue;
66-
}
67-
68-
private void NumericTextBoxValueChanged(int newYear)
69-
{
70-
if (NumericTextBoxMin <= newYear && newYear <= NumericTextBoxMax)
71-
{
72-
DatePickerViewDate = new DateTime(newYear, DatePickerViewDate.Month, DatePickerViewDate.Day);
73-
PickerRef?.NavigateTo(DatePickerViewDate, CalendarView.Month);
74-
}
75-
}
76-
77-
private void GoToPrevious()
78-
{
79-
DatePickerViewDate = DatePickerViewDate.AddMonths(-1);
80-
PickerRef?.NavigateTo(DatePickerViewDate, CalendarView.Month);
81-
}
82-
83-
private void SelectToday()
84-
{
85-
DatePickerValue = DateTime.Today;
86-
PickerRef?.Close();
87-
}
88-
89-
private void GoToNext()
90-
{
91-
DatePickerViewDate = DatePickerViewDate.AddMonths(1);
92-
PickerRef?.NavigateTo(DatePickerViewDate, CalendarView.Month);
93-
}
94-
}
95-
````
19+
<demo metaUrl="client/datepicker/headertemplate/" height="420"></demo>

‎components/datepicker/overview.md‎

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -21,24 +21,7 @@ The <a href="https://www.telerik.com/blazor-ui/datepicker" target="_blank">Blazo
2121

2222
>caption Basic Date Picker with custom format, min and max
2323
24-
````RAZOR
25-
<p> The DatePicker Value is: @DatePickerValue.ToShortDateString() </p>
26-
27-
<TelerikDatePicker @bind-Value="DatePickerValue"
28-
Format="dd MMMM yyyy"
29-
Min="@MinDate"
30-
Max="@MaxDate"
31-
Width="200px">
32-
</TelerikDatePicker>
33-
34-
@code {
35-
private DateTime DatePickerValue { get; set; } = DateTime.Today;
36-
37-
private DateTime MinDate = DateTime.Today.AddMonths(-1);
38-
39-
private DateTime MaxDate = DateTime.Today.AddMonths(1);
40-
}
41-
````
24+
<demo metaUrl="client/datepicker/overview/" height="420"></demo>
4225

4326
## Date Input Typing Settings
4427

‎components/drawer/modes.md‎

Lines changed: 2 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -32,46 +32,7 @@ The drawer's height is dynamic based on the height of the content (you can chang
3232
3333
![drawer push mode example](images/drawer-modes-push-example.gif)
3434

35-
````RAZOR
36-
@* This example shows how the drawer behaves in Push mode. It uses item selection to toggle the content for brevity. *@
37-
38-
<div>
39-
<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@("menu")">Toggle drawer</TelerikButton>
40-
<TelerikDrawer @bind-Expanded="@Expanded"
41-
Data="@Data"
42-
MiniMode="true"
43-
Mode="@DrawerMode.Push"
44-
@bind-SelectedItem="@selectedItem"
45-
@ref="@DrawerRef">
46-
<DrawerContent>
47-
<div class="m-5">
48-
Select an item. The drawer is expaned: @Expanded
49-
<div class="text-info">
50-
Content for the @selectedItem?.Text
51-
</div>
52-
</div>
53-
</DrawerContent>
54-
</TelerikDrawer>
55-
</div>
56-
57-
@code {
58-
public TelerikDrawer<DrawerItem> DrawerRef { get; set; }
59-
public DrawerItem selectedItem { get; set; }
60-
public bool Expanded { get; set; } = true;
61-
public IEnumerable<DrawerItem> Data { get; set; } =
62-
new List<DrawerItem>
63-
{
64-
new DrawerItem { Text = "Counter", Icon = SvgIcon.Plus},
65-
new DrawerItem { Text = "FetchData", Icon = SvgIcon.GridLayout},
66-
};
67-
68-
public class DrawerItem
69-
{
70-
public string Text { get; set; }
71-
public ISvgIcon Icon { get; set; }
72-
}
73-
}
74-
````
35+
<demo metaUrl="client/drawer/pushmode/" height="420"></demo>
7536

7637
## Overlay Mode
7738

@@ -83,46 +44,7 @@ ComboBoxes, DropDownLists, DateTimePickers and similar popup-based components ar
8344
8445
![drawer overlay mode example](images/drawer-modes-overlay-example.gif)
8546

86-
````RAZOR
87-
@* This example shows how the drawer behaves in Overlay mode. It uses item selection to toggle the content for brevity.
88-
You may want to add padding to the left of the content so that it is not overlapped by the Drawer in its MiniMode. *@
89-
90-
<div class="pl-4">
91-
<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@SvgIcon.Menu">Toggle drawer</TelerikButton>
92-
</div>
93-
<TelerikDrawer @bind-Expanded="@Expanded"
94-
Data="@Data"
95-
MiniMode="true"
96-
Mode="@DrawerMode.Overlay"
97-
@bind-SelectedItem="@selectedItem"
98-
@ref="@DrawerRef">
99-
<DrawerContent>
100-
<div class="text-info pl-4">
101-
The drawer is expanded: @Expanded
102-
<br />
103-
Content for the @selectedItem?.Text
104-
</div>
105-
</DrawerContent>
106-
</TelerikDrawer>
107-
108-
@code {
109-
public TelerikDrawer<DrawerItem> DrawerRef { get; set; }
110-
public DrawerItem selectedItem { get; set; }
111-
public bool Expanded { get; set; } = true;
112-
public IEnumerable<DrawerItem> Data { get; set; } =
113-
new List<DrawerItem>
114-
{
115-
new DrawerItem { Text = "Counter", Icon = SvgIcon.Plus },
116-
new DrawerItem { Text = "FetchData", Icon = SvgIcon.GridLayout },
117-
};
118-
119-
public class DrawerItem
120-
{
121-
public string Text { get; set; }
122-
public ISvgIcon Icon { get; set; }
123-
}
124-
}
125-
````
47+
<demo metaUrl="client/drawer/overlaymode/" height="420"></demo>
12648

12749
## See Also
12850

‎components/drawer/overview.md‎

Lines changed: 1 addition & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -28,36 +28,7 @@ The <a href="https://www.telerik.com/blazor-ui/drawer" target="_blank">Blazor Dr
2828

2929
>caption Basic configuration of the Drawer.
3030
31-
````RAZOR
32-
@* This example shows the basic configuration of the Drawer and how to expand or collapse a Drawer with a click of a button. *@
33-
34-
<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())"
35-
Icon="@SvgIcon.Menu">
36-
Toggle drawer
37-
</TelerikButton>
38-
39-
<TelerikDrawer Data="@Data" Mode="@DrawerMode.Push"
40-
@ref="@DrawerRef">
41-
<DrawerContent>lorem ipsum</DrawerContent>
42-
</TelerikDrawer>
43-
44-
@code {
45-
Telerik.Blazor.Components.TelerikDrawer<DrawerItem> DrawerRef { get; set; }
46-
47-
IEnumerable<DrawerItem> Data { get; set; } =
48-
new List<DrawerItem>
49-
{
50-
new DrawerItem { Text = "Counter", Icon = SvgIcon.Plus },
51-
new DrawerItem { Text = "FetchData", Icon = SvgIcon.GridLayout },
52-
};
53-
54-
public class DrawerItem
55-
{
56-
public string Text { get; set; }
57-
public ISvgIcon Icon { get; set; }
58-
}
59-
}
60-
````
31+
<demo metaUrl="client/drawer/overview/" height="420"></demo>
6132

6233
## Data Binding
6334

‎components/editor/overview.md‎

Lines changed: 1 addition & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -17,38 +17,7 @@ The <a href = "https://www.telerik.com/blazor-ui/editor" target="_blank">Blazor
1717
1. Use the `TelerikEditor` tag to add the component to your razor page.
1818
1. Bind its `Value` to the `string` field you want to get the HTML content in.
1919

20-
````RAZOR
21-
@* This sample simulates loading some content from a data source and lets the Editor alter it in the view-model *@
22-
23-
<TelerikEditor @bind-Value="@TheEditorValue" Width="650px" Height="400px"></TelerikEditor>
24-
25-
@code{
26-
string TheEditorValue { get; set; }
27-
28-
protected override Task OnInitializedAsync()
29-
{
30-
TheEditorValue = @"
31-
<p>
32-
The Blazor Editor allows your users to edit HTML in a familiar, user-friendly way. Your users do not have to understand HTML in order to create it.
33-
</p>
34-
<p>
35-
The widget <strong>outputs identical HTML</strong> across all major browsers, follows
36-
accessibility standards, and provides API for content manipulation.
37-
</p>
38-
<p>Features include:</p>
39-
<ul>
40-
<li>Text formatting</li>
41-
<li>Bulleted and numbered lists</li>
42-
<li>Hyperlinks</li>
43-
<li>Cross-browser support</li>
44-
<li>Identical HTML output across browsers</li>
45-
<li>Ability to create custom tools, dropdowns, dialogs</li>
46-
</ul>
47-
";
48-
return base.OnInitializedAsync();
49-
}
50-
}
51-
````
20+
<demo metaUrl="client/editor/overview/" height="450"></demo>
5221

5322
## Get/Set Content
5423

0 commit comments

Comments
 (0)