Question

我需要开发一个应用程序，其中剑道PanelBar是主要元素之一，但我有一些布局要求。

主标题（规范面板文字）
子标题（您可以在面板标题中找到其他文字）
动态图片（在右侧，在下拉标记之前）

示例：

我想知道是否有使用kendo模板自定义Kendo PanelBar（和其他）外观的原生和一般方式。

我知道某些组件（例如kendoMobileListView或其他组件）可能会这样，但我找不到有关面板的文档（或者这个功能通常适用于所有Kendo小部件）。

如果不是：在不依赖老派创作活动的情况下，最好的可重复方法是什么？

Answer 1

JSFiddle - 根据图像高度x宽度调整边距。

$("#panelbar-images").kendoPanelBar({
    dataSource: [
        {
            text: "<span class='k-text'>Baseball</span><span  class='k-sub-text'> SubHeader</span>",
            encoded: false,
            imageUrl: "http://demos.kendoui.com/content/shared/icons/sports/baseball.png",
            items: [
                { text: "Top News", imageUrl: "http://demos.kendoui.com/content/shared/icons/16/star.png" },
                { text: "Photo Galleries", imageUrl: "http://demos.kendoui.com/content/shared/icons/16/photo.png" },
                { text: "Videos Records", imageUrl: "http://demos.kendoui.com/content/shared/icons/16/video.png" },
                { text: "Radio Records", imageUrl: "http://demos.kendoui.com/content/shared/icons/16/speaker.png" }
            ]
        },
        {
            text: "Golf", imageUrl: "http://demos.kendoui.com/content/shared/icons/sports/golf.png",
            items: [
                { text: "Top News", imageUrl: "http://demos.kendoui.com/content/shared/icons/16/star.png" },
                { text: "Photo Galleries", imageUrl: "http://demos.kendoui.com/content/shared/icons/16/photo.png" },
                { text: "Videos Records", imageUrl: "http://demos.kendoui.com/content/shared/icons/16/video.png" },
                { text: "Radio Records", imageUrl: "http://demos.kendoui.com/content/shared/icons/16/speaker.png" }
            ]
        },
        {
            text: "Swimming", imageUrl: "http://demos.kendoui.com/content/shared/icons/sports/swimming.png",
            items: [
                { text: "Top News", imageUrl: "http://demos.kendoui.com/content/shared/icons/16/star.png" },
                { text: "Photo Galleries", imageUrl: "http://demos.kendoui.com/content/shared/icons/16/photo.png" }
            ]
        },
        {
            text: "Snowboarding", imageUrl: "http://demos.kendoui.com/content/shared/icons/sports/snowboarding.png",
            items: [
                { text: "Photo Galleries", imageUrl: "http://demos.kendoui.com/content/shared/icons/16/photo.png" },
                { text: "Videos Records", imageUrl: "http://demos.kendoui.com/content/shared/icons/16/video.png" }
            ]
        }
    ]
});

.k-text{  
    float: left; 
    margin-right:10%;
     font-size:20px;
}
.k-sub-text{
  float: left;
  margin-right:10%;
 }
.k-panelbar img.k-image{ 
   float: none;
}

<link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css" type="text/css" rel="stylesheet">
<link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.blueopal.min.css" type="text/css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>



<div id="panelbar-images"></div>

自定义Kendo UI PanelBar的外观

1 个答案: