Question

我开始在Windows 10通用应用创建中沿着Javascript / HTML / CSS路线开始。我正在关注Pivots并试图了解如何在标签上添加图标以及文本。最好还是使用CSS设置标签的样式。

可悲的是，似乎没有任何工作。我可以设置整个Pivot的样式，但不能自己设置标签。

<body class="win-type-body">
<p>Content goes here</p>
<div id="pivotScenario" data-win-control="WinJS.UI.Pivot" data-win-options="{ title: 'Links', selectedIndex: 1 }">
    <div class="listviewpivotitem" data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'Link 1', managedLV: true }">
        Link 1
    </div>

    <div class="listviewpivotitem" data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'Link 2', managedLV: true }">
        Link 2
    </div>

    <div class="listviewpivotitem" data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'link 3', managedLV: true }">
        Link 3
    </div>
</div>

Answer 1

首先，我建议您使用DOM Explorer来查询数据透视标记。

调试＆gt; Windows＆gt; DOM Explorer＆gt;全部显示

数据透视控件为您在页面上实现的结构控件呈现不同的标记结构。使用DOM Explorer将允许您查看生成的标记，以便您可以定位特定元素并按照您希望的方式对其进行自定义。

您的枢轴控件呈现如下：

<div class="win-pivot win-disposable win-element-resize win-pivot-mouse" id="pivotScenario" role="tablist" aria-label="Pivot" data-win-options="{ title: 'Links', selectedIndex: 1 }" data-win-control="WinJS.UI.Pivot">
    <div class="win-pivot-title" style="display: block;">Links</div><div class="win-pivot-header-area"><div class="win-pivot-header-leftcustom"></div><div class="win-pivot-header-items"><div tabindex="0" class="win-pivot-headers" style="margin-right: 0px; margin-left: 12px;"><button tabindex="-1" class="win-pivot-header" role="tab" aria-selected="false" style="margin-right: 12px; margin-left: 12px;" type="button">Link 1</button><button tabindex="-1" class="win-pivot-header win-pivot-header-selected" role="tab" aria-selected="true" style="margin-right: 12px; margin-left: 12px;" type="button">Link 2</button><button tabindex="-1" class="win-pivot-header" role="tab" aria-selected="false" style="margin-right: 12px; margin-left: 12px;" type="button">link 3</button></div></div><div class="win-pivot-header-rightcustom"></div></div><div class="win-pivot-viewport" role="group" style="-ms-scroll-snap-points-x: snapInterval(0%, 1270px);" aria-label="Scrolling Container">
        <div class="win-pivot-surface">
            <div class="listviewpivotitem win-pivot-item win-disposable" role="tabpanel" style="display: none;" data-win-options="{ 'header': 'Link 1', managedLV: true }" data-win-control="WinJS.UI.PivotItem">
                <div class="win-pivot-item-content">
                    Link 1
                </div>
            </div>
            <div class="listviewpivotitem win-pivot-item win-disposable" role="tabpanel" style="left: 1270px;" data-win-options="{ 'header': 'Link 2', managedLV: true }" data-win-control="WinJS.UI.PivotItem">
                <div class="win-pivot-item-content">
                    Link 2
                </div>
            </div>
            <div class="listviewpivotitem win-pivot-item win-disposable" role="tabpanel" style="display: none;" data-win-options="{ 'header': 'link 3', managedLV: true }" data-win-control="WinJS.UI.PivotItem">
                <div class="win-pivot-item-content">
                    Link 3
                </div>
            </div>
        </div>
    </div>
</div>

因此，您可以定位.win-pivot-item-content类并使用::before伪类添加图标。要么是父级的.listviewpivotitem级，要么使用带填充的背景图像：

.win-pivot-item-content::before {
    content: "";
    background: url(someicon.png) no-repeat;
    width: 40px;
    height: 40px;
    display: inline-block;
}

在枢轴上的图标

1 个答案: