kendo-ui - kendo mobile - 列表视图中的详细披露指示器

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>

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

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

<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;
}

Answer 2

我会在您的标题周围放置一个锚标记并赋予它 listview-link 角色：

<a data-role="listview-link"><h3 class="item-title">${startDate}</h3></a>