Question

如何使用WinJS未提供的图标？例如，从这里使用one。

html看起来像：

<div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Home', icon: 'home'}"></div>

Answer 1

png图像应为20x20像素，背景为透明（https://msdn.microsoft.com/en-us/library/windows/apps/hh700483.aspx）。 png设置为javascript：

document.getElementById("thatFancyButton").style.backgroundImage = url('pathOfPNGImage');

所以在你的情况下它是（在url（）中注意\'\'）：

<div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Home', icon: 'url(\'pathOfPng.png\')'}"></div>

以下是SplitViewCommand图标设置逻辑的片段：

            /// <field type="String" locid="WinJS.UI.SplitViewCommand.icon" helpKeyword="WinJS.UI.SplitViewCommand.icon">
            /// Gets or sets the icon of the SplitViewCommand. This value is either one of the values of the AppBarIcon enumeration or the path of a custom PNG file.
            /// </field>
            icon: {
                get: function () {
                    return this._icon;
                },
                set: function (value) {
                    this._icon = (_Icon[value] || value);

                    // If the icon's a single character, presume a glyph
                    if (this._icon && this._icon.length === 1) {
                        // Set the glyph
                        this._imageSpan.textContent = this._icon;
                        this._imageSpan.style.backgroundImage = "";
                        this._imageSpan.style.msHighContrastAdjust = "";
                        this._imageSpan.style.display = "";
                    } else if (this._icon && this._icon.length > 1) {
                        // Must be an image, set that
                        this._imageSpan.textContent = "";
                        this._imageSpan.style.backgroundImage = this._icon;
                        this._imageSpan.style.msHighContrastAdjust = "none";
                        this._imageSpan.style.display = "";
                    } else {
                        this._imageSpan.textContent = "";
                        this._imageSpan.style.backgroundImage = "";
                        this._imageSpan.style.msHighContrastAdjust = "";
                        this._imageSpan.style.display = "none";
                    }
                }
            },

如果碰巧背景图片大小有误，请修改win-commandimage类。我在样式中进行了此修复，以使图像正确适合按钮：

.win-commandimage {
    background-size:contain;
}

如何使用winjs命令定义新图标？

1 个答案: