From 7280c27c6c4b6a2d879de08cabdc8887a8ca13ee Mon Sep 17 00:00:00 2001 From: kendo-bot Date: Mon, 29 Apr 2024 04:18:52 +0000 Subject: [PATCH] Sync with Kendo UI Professional --- .../togglebutton/getting-started.md | 226 ++++++++++++++++++ .../images/togglebutton-getting-started.png | Bin 0 -> 2321 bytes 2 files changed, 226 insertions(+) create mode 100644 docs-aspnet/html-helpers/navigation/togglebutton/getting-started.md create mode 100644 docs-aspnet/html-helpers/navigation/togglebutton/images/togglebutton-getting-started.png diff --git a/docs-aspnet/html-helpers/navigation/togglebutton/getting-started.md b/docs-aspnet/html-helpers/navigation/togglebutton/getting-started.md new file mode 100644 index 00000000000..ba1029ee7f4 --- /dev/null +++ b/docs-aspnet/html-helpers/navigation/togglebutton/getting-started.md @@ -0,0 +1,226 @@ +--- +title: Getting Started +page_title: Getting Started +description: "Make your first steps with the Telerik UI for {{ site.framework }} ToggleButton component by following a complete step-by-step tutorial." +slug: aspnetcore_togglebutton_getting_started +position: 1 +--- + +# Getting Started with the ToggleButton + +This tutorial explains how to set up a basic Telerik UI for {{ site.framework }} ToggleButton and highlights the major steps in the configuration of the component. + +You will initialize two buttons, one of them will have an event handler, an icon, and a badge. The other one will be rendered as disabled. {% if site.core %}Finally, you can run the sample code in [Telerik REPL](https://netcorerepl.telerik.com/) and continue exploring the components.{% endif %} + + ![Sample Telerik UI for {{ site.framework }} ToggleButton](./images/togglebutton-getting-started.png) + +@[template](/_contentTemplates/core/getting-started-prerequisites.md#repl-component-gs-prerequisites) + +## 1. Prepare the CSHTML File + +@[template](/_contentTemplates/core/getting-started-directives.md#gs-adding-directives) + +Optionally, you can structure the document by adding the desired HTML elements like headings, divs, paragraphs, and others. + +```HtmlHelper + @using Kendo.Mvc.UI + +

ToggleButton:

+``` +{% if site.core %} +```TagHelper + @addTagHelper *, Kendo.Mvc + +

ToggleButton:

+``` +{% endif %} + + +## 2. Initialize the ToggleButton + +Use the ToggleButton HtmlHelper {% if site.core %}or TagHelper{% endif %} to add the component to a page: + +* The `Name()` configuration method is mandatory as its value is used for the `id` and the name attributes of the ToggleButton element. +* The `Content()` configuration specifies the text that is rendered within the button. This option accepts only string values and no HTML. +* The `Enable()` configuration defines if the component is enabled or disabled. +* The `Group()` configuration is to specify a common `data-group` attribute which allows access for multiple ToggleButton instances. +* The `Selected()` configuration defines whether the component will be selected. + +```HtmlHelper +

ToggleButton:

+ + @(Html.Kendo().ToggleButton() + .Name("toggleButton") + .Group("badges") + .Selected(false) + .Enable(true) + .Content("Humidity") + ) +``` +{% if site.core %} +```TagHelper + @addTagHelper *, Kendo.Mvc + +

ToggleButton:

+ + + Humidity + +``` +{% endif %} + +## 3. Add an Icon and a Badge + +The next step is to display an [icon]({% slug icons_togglebutton_aspnetcore %}) and a [badge]({% slug badges_togglebutton_aspnetcore %}) within the ToggleButton. This allows you to bolster the visual rendering of the component. + +```HtmlHelper +

ToggleButton:

+ + @(Html.Kendo().ToggleButton() + .Name("toggleButton") + .Group("badges") + .Selected(false) + .Icon("droplet") + .Badge(badge => badge + .Position(BadgePosition.Edge) + .Align(BadgeAlign.TopEnd) + .Shape(BadgeShape.Rectangle) + .Text("80%") + .ThemeColor(BadgeColor.Success) + ) + .Enable(true) + .Content("Humidity") + ) +``` +{% if site.core %} +```TagHelper + @addTagHelper *, Kendo.Mvc + +

ToggleButton:

+ + + + Humidity + +``` +{% endif %} + +## 4. Handle a ToggleButton Event + +The ToggleButton exposes a `Toggle()` event that you can handle and assign specific functions to the component. In this tutorial, you will use the `Toggle()` event to alert for the checked state of the component. + +```HtmlHelper +

ToggleButton:

+ + @(Html.Kendo().ToggleButton() + .Name("toggleButton") + .Group("badges") + .Selected(false) + .Icon("droplet") + .Badge(badge => badge + .Position(BadgePosition.Edge) + .Align(BadgeAlign.TopEnd) + .Shape(BadgeShape.Rectangle) + .Text("80%") + .ThemeColor(BadgeColor.Success) + ) + .Events(events => events.Toggle("onToggle")) + .Enable(true) + .Content("Humidity") + ) + + +``` +{% if site.core %} +```TagHelper + @addTagHelper *, Kendo.Mvc + +

ToggleButton:

+ + + + Humidity + + + +``` +{% endif %} + +For more examples, refer to the [demo on using the events of the ToggleButton](https://demos.telerik.com/{{ site.platform }}/togglebutton/events). + +## 5. (Optional) Reference Existing ToggleButton Instances + +You can reference the ToggleButton instances that you have created and build on top of their existing configuration: + +1. Use the `id` attribute of the component instance to establish a reference. + + ```script + + ``` + +1. Use the [ToggleButton client-side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/togglebutton#methods) to control the behavior of the widget. In this example, you will use the `enable` method to disable the component. The method is inherited from the Button widget. + + ```script + + ``` + +For more information on referencing specific helper instances, see the [Methods and Events]({% slug methodevents_core %}) article. + +{% if site.core %} +## Explore this Tutorial in REPL + +You can continue experimenting with the code sample above by running it in the Telerik REPL server playground: + +* [Sample code with the ToggleButton HtmlHelper](https://netcorerepl.telerik.com/cSkIvZaW35sRvYdR06) +* [Sample code with the ToggleButton TagHelper](https://netcorerepl.telerik.com/meOyFXEM347Lklw751) + +{% endif %} + +## Next Steps + +* [Customize the Appearance of the ToggleButton]({% slug togglebutton_appearance %}) +* [Configure the ToggleButton's Badge]({% slug badges_togglebutton_aspnetcore %}) + +## See Also + +* [Using the API of the ToggleButton for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/togglebutton/api) +* [ToggleButton Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/togglebutton) +* [Server-Side API of the ToggleButton](/api/togglebutton) +{% if site.core %} +* [TagHelper Server-Side API of the ToggleButton](https://docs.telerik.com/aspnet-core/api/taghelpers/togglebutton) +{% endif %} +* [Knowledge Base Section](/knowledge-base) diff --git a/docs-aspnet/html-helpers/navigation/togglebutton/images/togglebutton-getting-started.png b/docs-aspnet/html-helpers/navigation/togglebutton/images/togglebutton-getting-started.png new file mode 100644 index 0000000000000000000000000000000000000000..7accfc7777682a0e1df8bf24e1374a8da514ef92 GIT binary patch literal 2321 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 literal 0 HcmV?d00001