Add live examples (#3147)

* chore(Multiselect): add live example to overview page

* chore(Button): add live examples to overview and events pages

* chore(NumericTextBox): add live examples to overview page

Author: Tsvetomir-Hr

components/button/events.md

@@ -22,29 +22,10 @@ It receives argument of type [MouseEventArgs](https://docs.microsoft.com/en-us/d
 
 >caption Handle the button click
 
-````RAZOR
-@result
-<br />
-@moreInfo
-
-<br />
-<TelerikButton OnClick="@OnClickHandler">Click me!</TelerikButton>
-
-@code {
-    string result;
-    string moreInfo;
-
-    async Task OnClickHandler(MouseEventArgs args)
-    {
-        result = "Button was clicked at: " + DateTime.Now.ToString();
-        moreInfo = "Ctrl was pressed when clicked: " + args.CtrlKey;
-    }
-}
-````
+<demo metaUrl="client/button/events/" height="200"></demo>
 
 @[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async)
 
-
 ## See Also
 
   * [Telerik UI for Blazor Button Overview](slug:components/button/overview)

components/button/overview.md

@@ -24,20 +24,7 @@ The Blazor Button provides a variety of styling options through the [built-in th
 
 >caption Basic Blazor Button with `OnClick` event handler
 
-````RAZOR
-@result
-<br />
-<TelerikButton OnClick="@OnClickHandler">Hello!</TelerikButton>
-
-@code {
-    private string result;
-
-    private async Task OnClickHandler()
-    {
-        result = DateTime.Now.ToString();
-    }
-}
-````
+<demo metaUrl="client/button/overview/" height="200"></demo>
 
 ## Icons
 
@@ -86,12 +73,10 @@ Add a reference to the component instance to use the [Button methods](slug:Teler
 | --- | --- |
 | `FocusAsync` | Focuses the Blazor Button component. Always call with `await`. @[template](/_contentTemplates/common/inputs.md#focus-kb) |
 
-````RAZOR
+````RAZOR.skip-repl
 <TelerikButton @ref="ButtonRef">Hello!</TelerikButton>
 
 @code {
-    private Telerik.Blazor.Components.TelerikButton ButtonRef { get; set; }
-
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         await ButtonRef.FocusAsync();
@@ -104,7 +89,6 @@ Add a reference to the component instance to use the [Button methods](slug:Teler
 ## Next Steps
 
 * [Styling the Blazor Button](slug:button-styling)
-
 * [Using Button Icons](slug:button-icons)
 
 

components/multiselect/overview.md

@@ -23,57 +23,7 @@ The <a href="https://www.telerik.com/blazor-ui/multiselect" target="_blank">Blaz
 
 >caption Basic Blazor MultiSelect two-way value binding, main features, and simple [data binding](slug:multiselect-databind)
 
-````RAZOR
-<TelerikMultiSelect Data="@Countries"
-                    @bind-Value="@MultiSelectValues"
-                    TextField="@nameof(Country.Name)"
-                    ValueField="@nameof(Country.Id)"
-                    AutoClose="false"
-                    Placeholder="Select Balkan Countries"
-                    ShowClearButton="true">
-</TelerikMultiSelect>
-
-@if (MultiSelectValues.Count > 0)
-{
-    <ul>
-        @foreach (int countryId in MultiSelectValues)
-        {
-            <li><code>Id</code> @countryId, <code>Name</code> @Countries.First(x => x.Id == countryId).Name</li>
-        }
-    </ul>
-}
-@code {
-    private List<Country> Countries { get; set; } = new();
-    private List<int> MultiSelectValues { get; set; } = new();
-
-    protected override void OnInitialized()
-    {
-        Countries.Add(new(1, "Albania"));
-        Countries.Add(new(2, "Bosnia and Herzegovina"));
-        Countries.Add(new(3, "Bulgaria"));
-        Countries.Add(new(4, "Croatia"));
-        Countries.Add(new(5, "Greece"));
-        Countries.Add(new(6, "Kosovo"));
-        Countries.Add(new(7, "Montenegro"));
-        Countries.Add(new(8, "Romania"));
-        Countries.Add(new(9, "Serbia"));
-        Countries.Add(new(10, "Slovenia"));
-        Countries.Add(new(11, "Turkey"));
-    }
-
-    public class Country
-    {
-        public int Id { get; set; }
-        public string Name { get; set; } = string.Empty;
-
-        public Country(int id, string name)
-        {
-            Id = id;
-            Name = name;
-        }
-    }
-}
-````
+<demo metaUrl="client/multiselect/overview/" height="300"></demo>
 
 ## Data Binding
 
@@ -152,25 +102,13 @@ The following parameters enable you to customize the [appearance](slug:multisele
 
 The MultiSelect exposes settings for its dropdown (popup). To configure the options, declare a  `<MultiSelectPopupSettings>` tag inside a `<MultiSelectSettings>` tag:
 
-````RAZOR
+````RAZOR.skip-repl
 <TelerikMultiSelect Data="@MultiSelectData"
-                    @bind-Value="@SelectedItems"
-                    Filterable="true"
-                    FilterOperator="@StringFilterOperator.Contains"
-                    Placeholder="Filter by digit or letter"
-                    AutoClose="false"
-                    Width="240px">
+                    @bind-Value="@SelectedItems">
     <MultiSelectSettings>
         <MultiSelectPopupSettings Height="auto" MaxHeight="200px" MinHeight="75px" />
     </MultiSelectSettings>
 </TelerikMultiSelect>
-@code {
-    private List<string> MultiSelectData { get; set; } = Enumerable.Range(1, 50)
-        .Select(x => { return $"Item {x} {(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)}"; })
-        .ToList();
-
-    private List<string> SelectedItems { get; set; } = new List<string>();
-}
 ````
 
 The MultiSelect provides the following popup settings:
@@ -186,26 +124,15 @@ Add a reference to the component instance to use the [MultiSelect's methods](slu
 
 @[template](/_contentTemplates/dropdowns/methods.md#methods-list)
 
-````RAZOR
-<TelerikMultiSelect @ref="@MultiSelectRef"
-                    Data="@MultiSelectData"
-                    @bind-Value="@MultiSelectValue"
-                    Width="300px" />
+````RAZOR.skip-repl
+<TelerikMultiSelect @ref="@MultiSelectRef" .../>
 
 <TelerikButton OnClick="@OpenPopup">Open Popup</TelerikButton>
 
 @code {
-    private TelerikMultiSelect<string, string> MultiSelectRef { get; set; }
-
-    private List<string> MultiSelectValue { get; set; }
-
-    private List<string> MultiSelectData { get; set; } = new List<string> { "first", "second", "third" };
-
     private void OpenPopup()
     {
         MultiSelectRef.Open();
-        
-        MultiSelectValue = new List<string>() { MultiSelectData.First() };
 
         MultiSelectRef.Refresh();
     }

components/numerictextbox/overview.md

@@ -18,17 +18,9 @@ The <a href="https://www.telerik.com/blazor-ui/numeric-textbox" target="_blank">
 1. Bind a numeric data type to the component
 1. Optionally, set custom `Format`, `Min`, `Max` and `Step` values
 
->caption Basic numeric text box with its key features
+>caption Basic NumericTextBox with its key features
 
-````RAZOR
-The new value is: @theValue
-
-<TelerikNumericTextBox Format="C" Max="5m" Min="-5m" Step="0.33m" @bind-Value="@theValue"></TelerikNumericTextBox>
-
-@code {
-     private decimal theValue { get; set; } = 1.234m;
-}
-````
+<demo metaUrl="client/numerictextbox/overview/" height="250"></demo>
 
 The Numeric TextBox component is generic, meaning that it takes the type of its value parameter as an argument. It can take `int`, `long`, `float`, `double` and `decimal` values. Therefore, the values for the `Min`, `Max` and `Step` properties must be of the same type as the `Value`, and the `ValueChanged` handler must also accommodate the corresponding value type.
 
@@ -48,33 +40,7 @@ The Blazor Numeric TextBox allows you to define your desired custom format throu
 
 >caption Using custom format strings with the Blazor Numeric TextBox
 
-````RAZOR
-@Weight
-<br />
-<TelerikNumericTextBox Format="#.00 kg" Max="5m" Min="-5m" Step="0.33m" @bind-Value="@Weight"></TelerikNumericTextBox>
-<br />
-@code{
-    decimal Weight { get; set; } = 3.456789m;
-}
-
-@Rent
-<br />
-<TelerikNumericTextBox Decimals="2" Format="@RentFormat" @bind-Value="@Rent"></TelerikNumericTextBox>
-<br />
-@code{
-    decimal Rent { get; set; } = 4567.89m;
-    string RentFormat { get; set; } = System.Globalization.NumberFormatInfo.CurrentInfo.CurrencySymbol + "#.00 a year";
-}
-
-@Units
-<br />
-<TelerikNumericTextBox Decimals="0" Format="@UnitsFormat" @bind-Value="@Units"></TelerikNumericTextBox>
-
-@code{
-    int Units { get; set; } = 12;
-    string UnitsFormat { get; set; } = "# unit(s)";
-}
-````
+<demo metaUrl="client/numerictextbox/format-string/" height="400"></demo>
 
 ## Numeric TextBox Parameters
 
@@ -117,20 +83,12 @@ The following parameters enable you to customize the [appearance](slug:numericte
 
 The Numeric TextBox has a `FocusAsync` method that enables programmatic focus. To use it, obtain a reference to the component instance through `@ref`. @[template](/_contentTemplates/common/inputs.md#focus-kb)
 
-````RAZOR
-<TelerikButton OnClick="@FocusTextBox">Focus TextBox</TelerikButton>
+````RAZOR.skip-repl
+<TelerikNumericTextBox @ref="@NumericTextBoxRef" .../>
 
-<TelerikNumericTextBox @ref="@NumericTextBoxRef"
-                       @bind-Value="DecimalValue"
-                       Width="200px" />
+<TelerikButton OnClick="@FocusTextBox">Focus TextBox</TelerikButton>
 
 @code {
-    //determines the type of the component
-    private decimal DecimalValue { get; set; }
-
-    //the Value type determines the type of the reference
-    private TelerikNumericTextBox<decimal> NumericTextBoxRef { get; set; }
-
     async Task FocusTextBox()
     {
         await NumericTextBoxRef.FocusAsync();