圖標在Kendo UI中翻轉

根據Kendo's docs，應該可以使用CSS類翻轉按鈕的圖標（水平翻轉k-flip-h，垂直翻轉k-flip-v）。圖標在Kendo UI中翻轉

我這樣做就像使用跨文檔：

$("#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中找到。

此功能是否真的存在？

來源

2017-08-16 Phil

它似乎沒有。您可以添加下面的CSS（從字體真棒借來的），使其工作：

.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

來源

2017-08-16 21:09:29 ezanker

圖標在Kendo UI中翻轉

回答

相關問題