WinJS.UI.ToggleSwitch의 텍스트 색을 변경하는 방법

설정 창에서 토글 스위치를 사용하고 있습니다. 문제는 제목의 텍스트와 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

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 페이지 : 현재로

<!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 페이지] (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의 텍스트 색을 변경하는 방법

답변

관련 문제