kendo-ui - kendo mobile - ListView 中的详细披露指示器

Question

在为 iOS 设备呈现 HTML 时，kendo ui mobile 的以下片段在第一个列表项上创建了一个带有详细信息披露指示符(列表单元格右侧的“>”图标)的列表:

            <ul data-role="listview" data-click="tap_Item">
                <li id="menuItem1"><a>Item one</a></li>
                <li id="menuItem2">Item two</li>
                <li id="menuItem3">Item three</li>
            </ul>

将“项目一”放在 anchor 标记中为该单元格提供了详细信息披露指示符。

使用自定义模板生成列表时:

<script type="text/x-kendo-template" id="custom_list">
    <h3 class="item-title">${startDate}</h3>
</script>

如何为单元格提供详细披露指标？

Answer 1

最简单的方法是添加 css 类 km-listview-link到列表项的内容:

<li id="menuItem2"><span class="km-listview-link">Item two</span></li>

或者，这是 Kendo 用来放置箭头的 CSS。您可以将选择器更改为其他内容。

.km-listview-link:after {
    color: #7B7B7B;
    border-color: #777;
    content: "\a0";
    display: block;
    position: absolute;
    right: 1rem;
    top: 50%;
    margin-top: -0.32rem;
    margin-left: -0.2rem;
    border-style: solid;
    border-width: .24rem .24rem 0 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    width: .5rem;
    height: .5rem;
    display: inline-block;
    vertical-align: middle;
}