css 如何在devextreme中< dx-tree-view>使用显示复选框模式调整复选框大小：法线

31moq8wy 于 2023-02-20 发布在其他

关注(0)|答案(1)|浏览(142)

我正在探索DevExtreme库，在<dx-tree-view>中调整复选框大小时遇到了一个问题。
如果我只创建一个<dx-check-box>，它有一个属性可以设置复选框[iconSize]="'15px'"的大小，当我想减少复选框的大小时，我使用了这个属性。还有一个<dx-tree-view>树，我在那里设置了Show Check Boxes Mode: normal选项。我想将其中的复选框大小减少到15px，但树的[iconSize]属性没有。
我怎样才能正确地减少树中复选框的大小呢？我试着通过css设置这些大小：

.dx-checkbox-icon {
  width: 15px;
  height: 15px;
}

并且复选框变小，但其内部的复选标记不会改变。
以下是一些例子：case 1，case 2

css

来源：https://stackoverflow.com/questions/75471744/how-to-resize-checkboxes-in-devextreme-dx-tree-view-with-show-check-boxes-mode

1条答案

按热度按时间

fhg3lkii1#

经过几个小时的研究，我实现了我想要的。也许这会帮助一些人，保存他们的时间：

:host::ng-deep {     
   .dx-treeview-item {
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 28px;
      min-height: 20px;
    }
    .dx-treeview-toggle-item-visibility {
      top: -3px;
    }
    .dx-checkbox {
      .dx-checkbox-icon {
        width: 15px;
        height: 15px;
      }
      &.dx-checkbox-indeterminate {
        .dx-checkbox-icon {
          font-size: 10px;
        }
      }
      &.dx-checkbox-checked {
        .dx-checkbox-icon {
          font-size: 12px;
        }
      }
    }
  }

我使用SCSS来覆盖样式。

赞(0）回复(0）举报 2023-02-20

我来回答

css 如何在devextreme中< dx-tree-view>使用显示复选框模式调整复选框大小：法线

1条答案

相关问题

热门标签

最新问答