外观

从Kendo UI R1 2022开始，jQuery Switch小部件有了新的渲染和样式选项。在本文中，您将找到有关Kendo UI Switch呈现的信息。

有关这些更改背后的决定的更多信息，请访问设计概述篇文章。

有关实际示例，请访问外观交换机演示．

选项

剑道UI开关支持以下样式选项:

• 大小-配置组件的整体大小。
• trackRounded-配置轨道的边界半径。
• thumbRounded-配置拇指的边界半径。

大小

的大小选项控制控件的大小开关的样子。类的结构是k-switch -{大小}．

控件可使用以下值大小选择:

• sm小尺寸
• 医学博士中等大小
• lg——大大小
• 没有一个设置

默认大小为媒介它被应用到包装上跨度元素通过k-switch-md类。

下面的示例显示了一个基本的Switch配置以及如何设置大小选择:

该选项会影响span.k-switch元素:

TrackRounded

的trackRounded选项控制应用多少边框半径来跟踪小部件。类的结构是k-rounded -{大小}．

控件可使用以下值trackRounded选择:

• sm-小边界半径
• 医学博士-中等边界半径
• lg-大边界半径
• 完整的-椭圆状边界半径
• 没有一个设置

默认值为完整的它被应用到包装上跨度元素中包含On/Off标签k-rounded-full类。

下面的示例显示了一个基本的Switch配置以及如何设置trackRounded选择:

该选项会影响跨度元素，用于包装On/Off标签:

ThumbRounded

的thumbRounded选项控制在小部件的拇指上应用多少边框半径。类的结构是k-rounded -{大小}．

控件可使用以下值thumbRounded选择:

• sm-小边界半径
• 医学博士-中等边界半径
• lg-大边界半径
• 完整的-椭圆状边界半径
• 没有一个设置

默认值为完整的它被应用于跨度元素为拇指穿过k-rounded-full类。

下面的示例显示了一个基本的Switch配置以及如何设置thumbRounded选择:

该选项会影响跨度开关手柄的元素:

新旧渲染

组件的旧渲染包含一个跨度类命名为K-switch -widget -switch-on．的跨度元素包含Switch标签的包装器，并处理两者。

< span class="k-switch-label- On ">打开 关闭    

组件的新呈现包括单独的包装跨度元素，用于标签和句柄。

• 标签放置在跨度带有类的元素k-switch-track k-rounded-full：

 开启 关闭 

• 控件中呈现句柄跨度带有类的元素k-switch-thumb-wrap：

该组件的完整呈现具有以下HTML结构:

< span class="k-switch-track -round -full">打开 关闭     

控件的样式开关在新旧版本中:

< !—在Dojo中打开示例并选择2022 R1之前的版本，以查看外观的差异->   
         
          
         
        改进这篇文章