Как изменить цвет текста для WinJS.UI.ToggleSwitch

Я использую Toggle Switch в области настроек. Проблема в том, что текст в заголовке и labelOff, labelOn не отображается. Я не уверен, как изменить передний цвет или стили из WinJS.UI.ToggleSwitch, чтобы этот текст начал отображаться. Любые примеры будут высоко оценены. Вот мой html.Как изменить цвет текста для WinJS.UI.ToggleSwitch

<!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 титульный .win-labelOff { цвет: зеленый; }

источник

2013-06-16 Paul Snow

Вы можете сослаться на классы стилизации css для WinJS.UI.ToggleSwitch here.

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 страница:

<!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-17 04:16:36 Sushil

Спасибо за ваш ответ. Я обновил свой вопрос с помощью кода, который я использую, включая ваше предложение, но я до сих пор не вижу никакого текста с тумблером. Любые мысли, что я делаю неправильно –

Попробуйте [этот образец. сценарий 5 html page] (http://code.msdn.microsoft.com/windowsapps/App-settings-sample-1f762f49/view/SourceCode#content). он также имеет переключатель переключателя. – Sushil

обновленный ответ. Для этого кода я мог видеть заголовок переключателя в синем цвете. – Sushil

По 2016 Мне не удалось сделать это с помощью «.win-title». Вместо этого используется «.win-toggleswitch-header».

источник

2016-09-15 00:00:00 Olof

Как изменить цвет текста для WinJS.UI.ToggleSwitch

ответ

Смежные вопросы