剑道拆分器：调整可折叠图标的大小答案

【问题标题】：Kendo splitter: resizing collapsible icon剑道拆分器：调整可折叠图标的大小
【发布时间】：2015-02-08 15:28:49
【问题描述】：

Kendo Splitter 有一个我想使用的可折叠属性。但是，图标是一个非常小的箭头，一点都不直观，用户几乎看不到它。即使他们知道它在那里，图标也太小了，点击它需要一些时间，因为悬停在这么小的图标上并没有那么快。

我想让它变得更大。我设法扩大了分隔线本身

.k-splitbar.k-splitbar-horizontal{
    width: 20px; 
}

但不是小图标。

我从一位用户那里找到了this post，与我遇到了完全相同的问题，但那里的解决方案不起作用，用户也没有给出任何反馈。

【问题讨论】：

您可以覆盖 CSS 规则。另一篇文章中的解决方案是正确的方法。您的自定义规则应该在您的 HTML 之后 Kendo's 中声明。您还可以选择使用!important。
我也有同样的问题。让分隔栏变大没问题，但我无法让图标渲染得更大。我试过 !important 但没有用。

标签： css kendo-ui telerik kendo-splitter

【解决方案1】：

如上所述，您可以超越规则，这里是平面主题的所有规则的描述

.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;}

【讨论】：

【解决方案2】：

我知道 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;
    }
}

这适用于水平窗格，您可以对垂直窗格遵循类似的策略。

【讨论】：