From dc2dd01ee5269badd5d9c1ec76857b980c76f956 Mon Sep 17 00:00:00 2001 From: IvanDanchev Date: Wed, 2 Jul 2025 09:34:40 +0300 Subject: [PATCH 1/2] docs(Notification): add Notification overview example --- components/notification/overview.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/notification/overview.md b/components/notification/overview.md index 77274c5f42..1a39f5e5b0 100644 --- a/components/notification/overview.md +++ b/components/notification/overview.md @@ -14,6 +14,8 @@ This article provides information about the + ## Creating Blazor Notification 1. Add the `` tag to your razor page. From b8d16f7ecdbb6ca403aca494097def86179569bb Mon Sep 17 00:00:00 2001 From: IvanDanchev Date: Wed, 16 Jul 2025 09:52:01 +0300 Subject: [PATCH 2/2] docs: add demo tags for runnable examples --- components/checkbox/appearance.md | 48 +------ components/checkbox/overview.md | 11 +- components/datepicker/header-template.md | 78 +---------- components/datepicker/overview.md | 19 +-- components/drawer/modes.md | 82 +----------- components/drawer/overview.md | 31 +---- components/editor/overview.md | 33 +---- components/editor/toolbar.md | 163 +---------------------- components/listview/overview.md | 45 +------ components/listview/templates.md | 121 +---------------- components/tabstrip/header-template.md | 31 +---- components/tabstrip/overview.md | 14 +- 12 files changed, 20 insertions(+), 656 deletions(-) diff --git a/components/checkbox/appearance.md b/components/checkbox/appearance.md index 345019d71c..0725784e4f 100644 --- a/components/checkbox/appearance.md +++ b/components/checkbox/appearance.md @@ -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(); - -
- -
- } -} - -@code{ - private bool isSelected { get; set; } -} -```` + ## Rounded @@ -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(); - -
- -
- } -} - -@code{ - private bool isSelected { get; set; } -} -```` + @[template](/_contentTemplates/common/themebuilder-section.md#appearance-themebuilder) diff --git a/components/checkbox/overview.md b/components/checkbox/overview.md index 088c198502..0db692de72 100644 --- a/components/checkbox/overview.md +++ b/components/checkbox/overview.md @@ -22,16 +22,7 @@ The Blazor >caption Basic setup of the Telerik CheckBox using two-way data binding. -````RAZOR -@*Basic setup of the Telerik CheckBox Component*@ - - - - -@code { - private bool isSelected { get; set; } -} -```` + ## Indeterminate State diff --git a/components/datepicker/header-template.md b/components/datepicker/header-template.md index 3f93a64f19..7811879930 100644 --- a/components/datepicker/header-template.md +++ b/components/datepicker/header-template.md @@ -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 - - - - - Today - - - - @DatePickerViewDate.ToString("MMM") - - - - - -@code { - private TelerikDatePicker? 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); - } -} -```` + diff --git a/components/datepicker/overview.md b/components/datepicker/overview.md index 103b32c7c6..62acab3100 100644 --- a/components/datepicker/overview.md +++ b/components/datepicker/overview.md @@ -21,24 +21,7 @@ The Blazo >caption Basic Date Picker with custom format, min and max -````RAZOR -

The DatePicker Value is: @DatePickerValue.ToShortDateString()

- - - - -@code { - private DateTime DatePickerValue { get; set; } = DateTime.Today; - - private DateTime MinDate = DateTime.Today.AddMonths(-1); - - private DateTime MaxDate = DateTime.Today.AddMonths(1); -} -```` + ## Date Input Typing Settings diff --git a/components/drawer/modes.md b/components/drawer/modes.md index a0f4d27891..ac114593db 100644 --- a/components/drawer/modes.md +++ b/components/drawer/modes.md @@ -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. *@ - -
- Toggle drawer - - -
- Select an item. The drawer is expaned: @Expanded -
- Content for the @selectedItem?.Text -
-
- - -
- -@code { - public TelerikDrawer DrawerRef { get; set; } - public DrawerItem selectedItem { get; set; } - public bool Expanded { get; set; } = true; - public IEnumerable Data { get; set; } = - new List - { - 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; } - } -} -```` + ## Overlay Mode @@ -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. *@ - -
- Toggle drawer -
- - -
- The drawer is expanded: @Expanded -
- Content for the @selectedItem?.Text -
- - - -@code { - public TelerikDrawer DrawerRef { get; set; } - public DrawerItem selectedItem { get; set; } - public bool Expanded { get; set; } = true; - public IEnumerable Data { get; set; } = - new List - { - 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; } - } -} -```` + ## See Also diff --git a/components/drawer/overview.md b/components/drawer/overview.md index 21ce2eb717..e9f7ceb47a 100644 --- a/components/drawer/overview.md +++ b/components/drawer/overview.md @@ -28,36 +28,7 @@ The 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. *@ - - - Toggle drawer - - - - lorem ipsum - - -@code { - Telerik.Blazor.Components.TelerikDrawer DrawerRef { get; set; } - - IEnumerable Data { get; set; } = - new List - { - 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; } - } -} -```` + ## Data Binding diff --git a/components/editor/overview.md b/components/editor/overview.md index dfd07c5433..ed2bb411be 100644 --- a/components/editor/overview.md +++ b/components/editor/overview.md @@ -17,38 +17,7 @@ The 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 *@ - - - -@code{ - string TheEditorValue { get; set; } - - protected override Task OnInitializedAsync() - { - TheEditorValue = @" -

- 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. -

-

- The widget outputs identical HTML across all major browsers, follows - accessibility standards, and provides API for content manipulation. -

-

Features include:

- - "; - return base.OnInitializedAsync(); - } -} -```` + ## Get/Set Content diff --git a/components/editor/toolbar.md b/components/editor/toolbar.md index 84a708480c..574d34f1ff 100644 --- a/components/editor/toolbar.md +++ b/components/editor/toolbar.md @@ -42,17 +42,7 @@ The following example shows how to use the `All` toolset. >caption Use all built-in Editor tools -````RAZOR -@using Telerik.Blazor.Components.Editor - - - - -@code { - private string EditorValue { get; set; } = string.Empty; -} -```` + ### Predefined Toolset Configurations @@ -124,54 +114,7 @@ This example shows how to start from the existing `Default` toolbar collection o >caption Modify the Default toolset -````RAZOR -@using Telerik.Blazor.Components.Editor -@* Avoid ambiguous reference with SVG icons *@ -@using EditorNS = Telerik.Blazor.Components.Editor; - - - -@code { - string TheEditorValue { get; set; } = "

Lorem ipsum

Dolor sit amet.

"; - public List customTools { get; set; } - - protected override void OnInitialized() - { - // start with the default set of tools as base - // alternatively, you can create a new list and populate it from scratch - customTools = new List(EditorToolSets.Default); - - // create a tool group - var UndoRedoGroup = new EditorButtonGroup( - new EditorNS.Undo(), // add individual tools to the group - new EditorNS.Redo() - ); - - - // add the toolgroup to the beginning of the toolbar definition - customTools.Insert(0, UndoRedoGroup); - - - // add to an existing toolgroup - EditorButtonGroup targetGroup = customTools[1] as EditorButtonGroup; - if (targetGroup != null) // make sure it's a group and not an individual button - { - targetGroup.Tools.Add(new SuperScript()); - } - - - // remove an existing tool - customTools.RemoveAt(2); - - - // add an individual tool that will form its own tool group at the end of the toolbar - customTools.Add(new ViewHtml()); - - - base.OnInitialized(); - } -} -```` + ### Create a Toolbar From Scratch @@ -180,41 +123,7 @@ This example shows how you can keep adding tools to the toolbar to get the desir >caption Create your own toolbar -````RAZOR.skip-repl -@using Telerik.Blazor.Components.Editor -@* Avoid ambiguous reference with SVG icons *@ -@using EditorNS = Telerik.Blazor.Components.Editor; - - - -@code { - string TheEditorValue { get; set; } = "

Lorem ipsum

Dolor sit amet.

"; - public List MyTools { get; set; } - - protected override void OnInitialized() - { - // initialize the toolbar collection - MyTools = new List(); - - // add a button group - EditorButtonGroup firstGroup = new EditorButtonGroup( - new EditorNS.Bold(), - new EditorNS.Italic(), - new EditorNS.Underline() - ); - MyTools.Add(firstGroup); - - // add a dropdown - MyTools.Add(new Format()); - - // add a standalone tool - MyTools.Add(new ViewHtml()); - - - base.OnInitialized(); - } -} -```` + ### Customize Built-in Tools @@ -223,71 +132,7 @@ When adding a built-in tool to the collection, you can set various parameters to >caption Customize the default values of the built-in tools - tooltips, available items, class and appearance -````RAZOR -@using Telerik.Blazor.Components.Editor -@* Avoid ambiguous reference with SVG icons *@ -@using EditorNS = Telerik.Blazor.Components.Editor; - - - -@code { - string TheEditorValue { get; set; } = "

Lorem ipsum

Dolor sit amet.

"; - public List MyTools { get; set; } - - protected override void OnInitialized() - { - // initialize the toolbar collection - MyTools = new List(); - // add a button group - EditorButtonGroup firstGroup = new EditorButtonGroup( - new EditorNS.Bold(), - new EditorNS.Italic(), - // this is how to customize settings for a button. Intellisense will show you all the options - // you should avoid customizing things like OnClick event handlers and CommandName - new EditorNS.Underline() - { - Title = "My Custom Underline Title", - Class = "special-underine", - Icon = SvgIcon.Gear, - } - ); - MyTools.Add(firstGroup); - - // this is how to customize settings for a dropdown. Intellisense will show you all the options - // you should avoid customizing things like event handlers, and CommandName - MyTools.Add(new Format() - { - DefaultText = "Choose Style", - Width = "200px", - Data = new List - { - new EditorDropDownListItem { Text = "heading", Value = "h1" }, - new EditorDropDownListItem { Text = "separated block", Value = "blockquote" }, - } - }); - - // this is how you can get the default data sources - in this example, the font size - // the EditorDropDownListToolItems static class holds the appropriate default collections - List fontSizeChoices = EditorDropDownListToolItems.FontSizeItems.Skip(4).Take(3).ToList(); - MyTools.Add(new EditorNS.FontSize() { Data = fontSizeChoices }); - - - - // add the View Html so we can easily inspect the results - MyTools.Add(new ViewHtml()); - - - base.OnInitialized(); - } -} - - -```` + ## See Also diff --git a/components/listview/overview.md b/components/listview/overview.md index 1dc3d28d4b..082bf1a2f7 100644 --- a/components/listview/overview.md +++ b/components/listview/overview.md @@ -26,50 +26,7 @@ The Blazor >caption ListView in read mode with paging enabled. -````RAZOR -@* Styles would usually go to to the site stylesheet, and you can read more details about -the rest of the features the component provides further in this article *@ - - - -

Employee List

- - - - -@code{ - List ListViewData { get; set; } = Enumerable.Range(1, 25).Select(x => new SampleData - { - Id = x, - Name = $"Name {x}", - Team = $"Team {x % 3}" - }).ToList(); - - public class SampleData - { - public int Id { get; set; } - public string Name { get; set; } - public string Team { get; set; } - } -} - - -```` + ## Templates diff --git a/components/listview/templates.md b/components/listview/templates.md index bc935ad3f5..74da09de89 100644 --- a/components/listview/templates.md +++ b/components/listview/templates.md @@ -23,32 +23,7 @@ This is the main building block of the listview component. You define the layout >caption Item template in the ListView -````RAZOR - - - - -@code{ - List ListViewData { get; set; } = Enumerable.Range(1, 250).Select(x => new SampleData - { - Id = x, - Name = $"Name {x}" - }).ToList(); - - public class SampleData - { - public int Id { get; set; } - public string Name { get; set; } - } -} -```` + >caption The result from the snippet above @@ -63,42 +38,7 @@ This is the template that an item in edit or insert mode renders, instead of its >caption Declaring an edit template in the ListView. Note: The CUD operations are not implemented in this example. -````RAZOR -@* This example showcases a minimal edit template declaration. For more details on -the available commands and the event handlers you need to implement, see the following article: -https://docs.telerik.com/blazor-ui/components/listview/editing -*@ - - - - - Save - - - - Add - - - -@code{ - List ListViewData { get; set; } = Enumerable.Range(1, 250).Select(x => new SampleData - { - Id = x, - Name = $"Name {x}" - }).ToList(); - - public class SampleData - { - public int Id { get; set; } - public string Name { get; set; } - } -} -```` + ## Header Template @@ -106,32 +46,7 @@ This piece of code renders just above the items, but within the main listview wr >caption Header Template in the ListView -````RAZOR -@* The item template is mandatory. You can also add other components in the header template. *@ - - - -

Employees

- - - - -@code{ - List ListViewData { get; set; } = Enumerable.Range(1, 250).Select(x => new SampleData - { - Id = x, - Name = $"Name {x}" - }).ToList(); - - public class SampleData - { - public int Id { get; set; } - public string Name { get; set; } - } -} -```` + >caption The result from the code snippet above @@ -144,40 +59,12 @@ This piece of code renders just below the items, but within the main listview wr >caption Footer Template in the ListView -````RAZOR -@* As with the other templates, layout and nice visual distinctions are up to the application *@ - - - - A total of @ListViewData.Count items. - - - - -@code{ - List ListViewData { get; set; } = Enumerable.Range(1, 250).Select(x => new SampleData - { - Id = x, - Name = $"Name {x}" - }).ToList(); - - public class SampleData - { - public int Id { get; set; } - public string Name { get; set; } - } -} -```` + >caption The result from the code snippet above ![listview footer template](images/listview-footer-template.png) - - - ## See Also * [Live Demo: ListView Templates](https://demos.telerik.com/blazor-ui/listview/templates) diff --git a/components/tabstrip/header-template.md b/components/tabstrip/header-template.md index f5006a03ed..3cbc7f4b69 100644 --- a/components/tabstrip/header-template.md +++ b/components/tabstrip/header-template.md @@ -25,36 +25,7 @@ You can define the `HeaderTemplate` with the following configuration in the `Tab >caption The following example showcases the use of a ``, including `TelerikIcons` -````RAZOR -@*A couple of tabs with defferent header configuration.*@ - - - - - - Icon and text - - - This is a tab with a header template including an icon and text. - - - - - - Icon and text 2 - - - This is a tab that has a header template and as well as Title parameter. -
- Title parameter will not be displayed. Only the Header template will be displayed. - - - - This is a tab with Title parameter. If you want to use only text in the header, - set the Title parameter only and you can omit the Content tag. - - -```` + >tip If you only need to add some styling to the TabStripTab header, you can use the `Class` parameter of the `TabStripTab` to define your custom CSS class instead of the Header template. diff --git a/components/tabstrip/overview.md b/components/tabstrip/overview.md index e525a5b253..e6f15ac631 100644 --- a/components/tabstrip/overview.md +++ b/components/tabstrip/overview.md @@ -22,19 +22,7 @@ The Bla >caption TabStrip with specified tab position and a disabled tab -````RAZOR - - - First tab content. - - - Second tab content. This tab is disabled and you cannot select it. - - - Third tab content. - - -```` + ## Active Tab Index