图标翻转 Kendo UI

Question

根据 Kendo's docs，应该可以使用 CSS class 翻转按钮的图标（k-flip-h 水平翻转，k-flip-v垂直翻转）。

我这样做就像使用跨度的文档一样：

$("#normal").kendoButton();
$("#flipped").kendoButton();

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" />
  <script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>

<body>
  <div id="example">
    <button id="normal">
      <span class="k-icon k-i-pencil"/>
    </button>
    <button id="flipped">
      <span class="k-icon k-i-pencil k-flip-h"/>
    </button>
  </div>
</body>

</html>

这会产生两个看起来完全相同的按钮。第二个按钮应该翻转但不是。

我想这是有道理的，因为执行 full-text search in their Github repo for "k-flip-h" 不会在文档以外的任何地方找到 "k-flip-h" 文本。在他们的 Javascript 或 CSS.

中无处可寻

这个功能真的存在吗？

Answer 1

好像是不见了。您可以添加以下 CSS（从 font awesome 借用）以使其工作：

.k-flip-h {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.k-flip-v {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

DEMO

图标翻转 Kendo UI

Icon flipping in Kendo UI

telerik

kendo-ui