0

我在设置窗格中使用切换开关。问题是title和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{ 颜色：绿色；}

4

2 回答 2

1

您可以在此处参考 WinJS.UI.ToggleSwitch的 css 样式类。

默认.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 页面：

<!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>
于 2013-06-17T04:16:36.970 回答
0

截至 2016 年，我未能使用“.win-title”执行此操作。而是使用“.win-toggleswitch-header”。

于 2016-09-15T00:00:00.970 回答