Kendo Splitter有一个我想要使用的可折叠属性。但是,图标是一个非常小的箭头,根本不直观,用户几乎看不到它。即使他们知道它在那里,图标也很小,点击它需要一些时间,因为悬停这么小的图标并不是那么快。
我想让它更大。我设法扩大了分频器本身
.k-splitbar.k-splitbar-horizontal{
width: 20px;
}
但不是小图标。
我发现用户的this post与我的问题完全相同,但是那里的解决方案不起作用且用户没有给出任何反馈。
答案 0 :(得分:0)
如上所述,您可以遵守规则,这里是对平面主题的所有规则的描述
.k-splitbar-horizontal .k-resize-handle {
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -330px -573px;
width: 20px; height: 20px;
}
.k-splitbar-horizontal-hover > .k-resize-handle {
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -360px -573px;
width: 20px; height: 20px;
}
.k-splitbar-horizontal .k-icon.k-expand-prev{
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -331px -389px;
width: 20px; height: 20px;
}
.k-splitbar-horizontal .k-icon.k-collapse-prev{
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -331px -454px;
width: 20px; height: 20px;}
.k-splitbar-horizontal-hover > .k-icon.k-expand-prev{
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -361px -389px;
width: 20px; height: 20px;
}
.k-splitbar-horizontal-hover > .k-icon.k-collapse-prev{
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -361px -454px;
width: 20px; height: 20px;
}
.k-splitbar.k-splitbar-horizontal{
width: 15px;}
答案 1 :(得分:0)
我知道5年为时已晚,但是如果有人为此而苦苦挣扎,这是我在SASS中的解决方案。
.k-splitbar{
.k-i-arrow-60-left, .k-i-arrow-60-right{
z-index: 100000;
position: relative;
background: #ccc;
border-radius: 0 10px 10px 0;
bottom: -32px;
left: 20px;
width: 34px;
height: 30px;
font-size: 30px;
}
}
这适用于水平窗格,对于垂直窗格,您可以遵循类似的策略。