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

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 class。我在样式中做了这个修复以使图像正确适合按钮：

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

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

How to define new icons with winjs commands?

winjs