Switch Appearance
As of the R1 2022 release, the Switch has new rendering and styling options.
In this article, you will find information about the new appearance of the Telerik UI for ASP.NET MVC Switch.
For additional information regarding the decision behind these changes, visit theComponents Renderingarticle.
For a complete example, visit theAppearance Demo of the Switch.
Options
The Switch HtmlHelper provides the following styling options:
Size()—configures the overall size of the component.TrackRounded()—defines the radius of the track's border.ThumbRounded()—sets the radius of the thumb's border.
Size
TheSize()method allows you to adjust the size of the Switch. The default size isMedium.
@(Html.Kendo().Switch() .Name("switch") .Size(ComponentSize.Medium) .Messages(c => c.Checked("YES").Unchecked("NO")) )The option adds a classk-switch-mdto thespan.k-switchelement:
The following values are available for theSizeoption:
SmallMediumLargeNone
TrackRounded
You can control how much border radius is applied to the component's track by using theTrackRounded()method. The default value isFull.
The example below demonstrates how to set theTrackRoundedoption:
@(Html.Kendo().Switch() .Name("switch") .TrackRounded(Rounded.Full) )The option adds a classk-rounded-fullto thespan.k-switch-trackelement that wraps the On/Off labels:
ТheTrackRounded选择支持以下值:
SmallMediumLargeFullNone
ThumbRounded
TheThumbRounded()method controls how much border radius is applied to thumb of the Switch.
@(Html.Kendo().Switch() .Name("switch") .ThumbRounded(Rounded.Full) )The option adds a classk-rounded-fullto thespan.k-switch-thumbelement for the Switch handle:
ТheThumbRounded选择支持以下值:
SmallMediumLargeFull—the default valueNone
Old vs New Rendering
The old rendering of the component consisted of aspanelement with classes namedk-switch k-widget k-switch-on. Thespanelement contained the wrapper for the Switch labels and handle.
The new rendering of the component includes separate wrappingspan元素the labels and the handle.
- The labels are placed in a
spanelement with classesk-switch-track k-rounded-full:
On Off - The handle is rendered in a
spanelement with classesk-switch-thumb-wrap:
The full rendering of the component has the following HTML structure:
On Off Visual Backwards Compatibility
To achieve the same look and feel as the old rendering, the references of the element must be updated. Visit theCSS Classes MigrationandJQuery Selectors Migrationsections of theComponents Renderingarticle for additional information.
The following example showcases how to customize the styles of theSwitchin both the new, and the old rendering:
The new styling and rendering supports only thedefault optionswhen a LESS theme is used.