Question

我在设置窗格中使用了切换开关。问题是标题和labelOff，labelOn中的文本不可见。我不知道如何从WinJS.UI.ToggleSwitch更改前面的颜色或样式，以便此文本开始显示。任何例子都将受到高度赞赏。这是我的HTML。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div class="mypage fragment"
            id="mysettings" 
            data-win-control="WinJS.UI.SettingsFlyout"  data-win-options="{width:'narrow'}">
            <div class="win-header">       
                    <button onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton">
                    </button>
                <div class="win-label">My Settings</div>
            </div>
            <div class="mytoggle"  data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{ title:'Test', labelOff: 'Close', labelOn:'Open', checked: true}"></div>
        </div>  
    </body>
</html>

以下是我的css

.fragment.mypage .mytoggle .win-title .win-labelOff { 颜色：绿色; }

Answer 1

您可以参考WinJS.UI.ToggleSwitch here的CSS样式类。

default.js：

app.onsettings = function onsettings(e)
{
    e.detail.applicationcommands = {
        about: { title: 'About', href: '/pages/settings/about.html' },
    };
    WinJS.UI.SettingsFlyout.populateSettings(e);
}

/pages/about/about.css：

.myflyout .win-content .mytoggle .win-title
{
    color: blue;
}

/pages/about/about.html page：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="/pages/settings/about.css" rel="stylesheet" />
</head>
<body>
    <!-- BEGINSETTINGFLYOUT -->
    <div class="myflyout" data-win-control="WinJS.UI.SettingsFlyout" 
       data-win-options="{settingsCommandId:'about'}">
        <div class="win-ui-light win-header" >
           <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" 
            class="win-backbutton"></button>
           <div class="win-label">About</div>
           <img src="/images/smalllogo.png" style="position: absolute; right: 20px;"/>
        </div>                
        <div class="win-content">
            <div class="mytoggle" data-win-control="WinJS.UI.ToggleSwitch" 
               data-win-options="{title: 'example of toggle'}" >
            </div>
        </div>
    </div>
    <!-- ENDSETTINGSFLYOUT -->
</body>
</html>

Answer 2

截至2016年，我用“.win-title”做错了。而是使用“.win-toggleswitch-header”。

如何更改WinJS.UI.ToggleSwitch的文本颜色

2 个答案: