Skip to content

Runnable examples part1 #3107

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Runnable examples part1 #3107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dc2dd01
docs(Notification): add Notification overview example
IvanDanchev Jul 2, 2025
b8d16f7
docs: add demo tags for runnable examples
IvanDanchev Jul 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 2 additions & 46 deletions components/checkbox/appearance.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,28 +30,7 @@ You can increase or decrease the size of the CheckBox by setting the `Size` attr

>caption The built-in sizes

````RAZOR
@{
var fields = typeof(Telerik.Blazor.ThemeConstants.CheckBox.Size)
.GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
| System.Reflection.BindingFlags.FlattenHierarchy)
.Where(field => field.IsLiteral && !field.IsInitOnly).ToList();


@foreach (var field in fields)
{
string size = field.GetValue(null).ToString();

<div style="float:left; margin: 20px;">
<TelerikCheckBox @bind-Value="@isSelected" Size="@size"></TelerikCheckBox>
</div>
}
}

@code{
private bool isSelected { get; set; }
}
````
<demo metaUrl="client/checkbox/size/" height="420"></demo>

## Rounded

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

>caption The built-in values of the Rounded attribute

````RAZOR
@* The built-in values of the Rounded attribute. *@

@{
var fields = typeof(Telerik.Blazor.ThemeConstants.CheckBox.Rounded)
.GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
| System.Reflection.BindingFlags.FlattenHierarchy)
.Where(field => field.IsLiteral && !field.IsInitOnly).ToList();


@foreach (var field in fields)
{
string rounded = field.GetValue(null).ToString();

<div style="float:left; margin: 20px;">
<TelerikCheckBox @bind-Value="@isSelected" Rounded="@rounded"></TelerikCheckBox>
</div>
}
}

@code{
private bool isSelected { get; set; }
}
````
<demo metaUrl="client/checkbox/rounded/" height="420"></demo>

@[template](/_contentTemplates/common/themebuilder-section.md#appearance-themebuilder)
11 changes: 1 addition & 10 deletions components/checkbox/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,7 @@ The <a href="https://www.telerik.com/blazor-ui/checkbox" target="_blank">Blazor

>caption Basic setup of the Telerik CheckBox using two-way data binding.

````RAZOR
@*Basic setup of the Telerik CheckBox Component*@

<TelerikCheckBox Id="myCheckBox" @bind-Value="@isSelected" />
<label for="myCheckBox">@( isSelected ? "Selected" : "Not selected" )</label>

@code {
private bool isSelected { get; set; }
}
````
<demo metaUrl="client/checkbox/overview/" height="420"></demo>

## Indeterminate State

Expand Down
78 changes: 1 addition & 77 deletions components/datepicker/header-template.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,80 +16,4 @@ The example below is using a [Blazor DatePicker reference and methods](slug:comp

>caption Using DatePicker header template with custom content in the Calendar header

````RAZOR
<TelerikDatePicker @ref="@PickerRef"
Value="@DatePickerValue"
ValueChanged="@DatePickerValueChanged"
T="@DateTime"
Min="@PickerMin"
Max="@PickerMax"
Width="200px">
<HeaderTemplate>
<span>
<TelerikButton OnClick="@GoToPrevious"
Icon="@SvgIcon.ArrowLeft"
Title="Go to Previous Month"
Size="@ThemeConstants.Button.Size.Small" />
<TelerikButton OnClick="@SelectToday" Size="@ThemeConstants.Button.Size.Small">Today</TelerikButton>
<TelerikButton OnClick="@GoToNext"
Icon="@SvgIcon.ArrowRight"
Title="Go to Next Month"
Size="@ThemeConstants.Button.Size.Small"></TelerikButton>
</span>
<span style="padding-right: .6em;">
@DatePickerViewDate.ToString("MMM")
<TelerikNumericTextBox Value="@DatePickerViewDate.Year"
ValueChanged="@NumericTextBoxValueChanged"
T="@int"
Min="@NumericTextBoxMin"
Max="@NumericTextBoxMax"
Width="6em"
Size="@ThemeConstants.NumericTextBox.Size.Small" />
</span>
</HeaderTemplate>
</TelerikDatePicker>

@code {
private TelerikDatePicker<DateTime>? PickerRef { get; set; }

private DateTime DatePickerValue { get; set; } = DateTime.Today;
private DateTime DatePickerViewDate { get; set; } = DateTime.Today;
private DateTime PickerMin { get; set; } = DateTime.Today.AddYears(-10);
private DateTime PickerMax { get; set; } = DateTime.Today.AddYears(10);

private int NumericTextBoxMin => PickerMin.Year;
private int NumericTextBoxMax => PickerMax.Year;

private void DatePickerValueChanged(DateTime newValue)
{
DatePickerValue = DatePickerViewDate = newValue;
}

private void NumericTextBoxValueChanged(int newYear)
{
if (NumericTextBoxMin <= newYear && newYear <= NumericTextBoxMax)
{
DatePickerViewDate = new DateTime(newYear, DatePickerViewDate.Month, DatePickerViewDate.Day);
PickerRef?.NavigateTo(DatePickerViewDate, CalendarView.Month);
}
}

private void GoToPrevious()
{
DatePickerViewDate = DatePickerViewDate.AddMonths(-1);
PickerRef?.NavigateTo(DatePickerViewDate, CalendarView.Month);
}

private void SelectToday()
{
DatePickerValue = DateTime.Today;
PickerRef?.Close();
}

private void GoToNext()
{
DatePickerViewDate = DatePickerViewDate.AddMonths(1);
PickerRef?.NavigateTo(DatePickerViewDate, CalendarView.Month);
}
}
````
<demo metaUrl="client/datepicker/headertemplate/" height="420"></demo>
19 changes: 1 addition & 18 deletions components/datepicker/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,24 +21,7 @@ The <a href="https://www.telerik.com/blazor-ui/datepicker" target="_blank">Blazo

>caption Basic Date Picker with custom format, min and max

````RAZOR
<p> The DatePicker Value is: @DatePickerValue.ToShortDateString() </p>

<TelerikDatePicker @bind-Value="DatePickerValue"
Format="dd MMMM yyyy"
Min="@MinDate"
Max="@MaxDate"
Width="200px">
</TelerikDatePicker>

@code {
private DateTime DatePickerValue { get; set; } = DateTime.Today;

private DateTime MinDate = DateTime.Today.AddMonths(-1);

private DateTime MaxDate = DateTime.Today.AddMonths(1);
}
````
<demo metaUrl="client/datepicker/overview/" height="420"></demo>

## Date Input Typing Settings

Expand Down
82 changes: 2 additions & 80 deletions components/drawer/modes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,46 +32,7 @@ The drawer's height is dynamic based on the height of the content (you can chang

![drawer push mode example](images/drawer-modes-push-example.gif)

````RAZOR
@* This example shows how the drawer behaves in Push mode. It uses item selection to toggle the content for brevity. *@

<div>
<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@("menu")">Toggle drawer</TelerikButton>
<TelerikDrawer @bind-Expanded="@Expanded"
Data="@Data"
MiniMode="true"
Mode="@DrawerMode.Push"
@bind-SelectedItem="@selectedItem"
@ref="@DrawerRef">
<DrawerContent>
<div class="m-5">
Select an item. The drawer is expaned: @Expanded
<div class="text-info">
Content for the @selectedItem?.Text
</div>
</div>
</DrawerContent>
</TelerikDrawer>
</div>

@code {
public TelerikDrawer<DrawerItem> DrawerRef { get; set; }
public DrawerItem selectedItem { get; set; }
public bool Expanded { get; set; } = true;
public IEnumerable<DrawerItem> Data { get; set; } =
new List<DrawerItem>
{
new DrawerItem { Text = "Counter", Icon = SvgIcon.Plus},
new DrawerItem { Text = "FetchData", Icon = SvgIcon.GridLayout},
};

public class DrawerItem
{
public string Text { get; set; }
public ISvgIcon Icon { get; set; }
}
}
````
<demo metaUrl="client/drawer/pushmode/" height="420"></demo>

## Overlay Mode

Expand All @@ -83,46 +44,7 @@ ComboBoxes, DropDownLists, DateTimePickers and similar popup-based components ar

![drawer overlay mode example](images/drawer-modes-overlay-example.gif)

````RAZOR
@* This example shows how the drawer behaves in Overlay mode. It uses item selection to toggle the content for brevity.
You may want to add padding to the left of the content so that it is not overlapped by the Drawer in its MiniMode. *@

<div class="pl-4">
<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@SvgIcon.Menu">Toggle drawer</TelerikButton>
</div>
<TelerikDrawer @bind-Expanded="@Expanded"
Data="@Data"
MiniMode="true"
Mode="@DrawerMode.Overlay"
@bind-SelectedItem="@selectedItem"
@ref="@DrawerRef">
<DrawerContent>
<div class="text-info pl-4">
The drawer is expanded: @Expanded
<br />
Content for the @selectedItem?.Text
</div>
</DrawerContent>
</TelerikDrawer>

@code {
public TelerikDrawer<DrawerItem> DrawerRef { get; set; }
public DrawerItem selectedItem { get; set; }
public bool Expanded { get; set; } = true;
public IEnumerable<DrawerItem> Data { get; set; } =
new List<DrawerItem>
{
new DrawerItem { Text = "Counter", Icon = SvgIcon.Plus },
new DrawerItem { Text = "FetchData", Icon = SvgIcon.GridLayout },
};

public class DrawerItem
{
public string Text { get; set; }
public ISvgIcon Icon { get; set; }
}
}
````
<demo metaUrl="client/drawer/overlaymode/" height="420"></demo>

## See Also

Expand Down
31 changes: 1 addition & 30 deletions components/drawer/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,36 +28,7 @@ The <a href="https://www.telerik.com/blazor-ui/drawer" target="_blank">Blazor Dr

>caption Basic configuration of the Drawer.

````RAZOR
@* This example shows the basic configuration of the Drawer and how to expand or collapse a Drawer with a click of a button. *@

<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())"
Icon="@SvgIcon.Menu">
Toggle drawer
</TelerikButton>

<TelerikDrawer Data="@Data" Mode="@DrawerMode.Push"
@ref="@DrawerRef">
<DrawerContent>lorem ipsum</DrawerContent>
</TelerikDrawer>

@code {
Telerik.Blazor.Components.TelerikDrawer<DrawerItem> DrawerRef { get; set; }

IEnumerable<DrawerItem> Data { get; set; } =
new List<DrawerItem>
{
new DrawerItem { Text = "Counter", Icon = SvgIcon.Plus },
new DrawerItem { Text = "FetchData", Icon = SvgIcon.GridLayout },
};

public class DrawerItem
{
public string Text { get; set; }
public ISvgIcon Icon { get; set; }
}
}
````
<demo metaUrl="client/drawer/overview/" height="420"></demo>

## Data Binding

Expand Down
33 changes: 1 addition & 32 deletions components/editor/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,38 +17,7 @@ The <a href = "https://www.telerik.com/blazor-ui/editor" target="_blank">Blazor
1. Use the `TelerikEditor` tag to add the component to your razor page.
1. Bind its `Value` to the `string` field you want to get the HTML content in.

````RAZOR
@* This sample simulates loading some content from a data source and lets the Editor alter it in the view-model *@

<TelerikEditor @bind-Value="@TheEditorValue" Width="650px" Height="400px"></TelerikEditor>

@code{
string TheEditorValue { get; set; }

protected override Task OnInitializedAsync()
{
TheEditorValue = @"
<p>
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.
</p>
<p>
The widget <strong>outputs identical HTML</strong> across all major browsers, follows
accessibility standards, and provides API for content manipulation.
</p>
<p>Features include:</p>
<ul>
<li>Text formatting</li>
<li>Bulleted and numbered lists</li>
<li>Hyperlinks</li>
<li>Cross-browser support</li>
<li>Identical HTML output across browsers</li>
<li>Ability to create custom tools, dropdowns, dialogs</li>
</ul>
";
return base.OnInitializedAsync();
}
}
````
<demo metaUrl="client/editor/overview/" height="450"></demo>

## Get/Set Content

Expand Down
Loading