Kendo UI 中的图标翻转

debugcn 发表于 Dev

菲尔

根据Kendo 的文档，应该可以使用 CSS 类翻转按钮的图标（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>

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

我想这是有道理的，因为在他们的 Github 存储库中对“k-flip-h”进行全文搜索，除了文档之外的任何地方都找不到“k-flip-h”文本。在他们的 Javascript 或 CSS 中找不到它。

这个功能真的存在吗？

伊赞克

它似乎丢失了。您可以添加以下 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);
}

演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。