1. 홈
  2. 질의 응답
  3. TabPanel의 탭 CSS

TabPanel의 탭 CSS

2013-07-17 2 views
2

나는 지난 2 시간 동안 아이콘의 색상과 각각의 '라벨'을 변경하는 방법을 찾아왔다. 나는 흰색으로 설정하려는TabPanel의 탭 CSS

는

나는,이 수없는 SCSS 변수를 찾기 위해 노력했다. 여러 가지 방법으로 CSS 클래스를 추가하려고했지만 아무 것도 작동하지 않았습니다.

누군가가 실례를 가지고 있습니까?

enter image description here

출처

2013-07-17 Fawar

답변

2

다음 CSS를 UPDATE

.x-tabbar-dark .x-tab { 
     color: #FFFFFF; 
    } 

    // Here change the style of active tab if you need to 
    .x-tabbar-dark.x-docked-bottom .x-tab-active .x-button-icon { 
     background-image: none; 
     background-color: #FFFFFF; 
    } 

    .x-tabbar-dark.x-docked-bottom .x-tab .x-button-icon { 
     background-image: none; 
     background-color: #FFFFFF; 
    }

CSS 트릭을 할 것입니다

app.scss

// The following two lines import the default Sencha Touch theme. If you are building 
// a new theme, remove them and the add your own CSS on top of the base CSS (which 
// is already included in your app.json file). 
@import 'sencha-touch/default'; 
@import 'sencha-touch/default/all'; 

// Custom code goes here.. 

// Examples of using the icon mixin: 
// @include icon('user'); 

.x-tabbar-dark .x-tab { 
    color: #FFFFFF; 
} 

.x-tabbar-dark.x-docked-bottom .x-tab-active .x-button-icon { 
    background-image: none; 
    background-color: #FFFFFF; 
} 

.x-tabbar-dark.x-docked-bottom .x-tab .x-button-icon { 
    background-image: none; 
    background-color: #FFFFFF; 
}

Index.html을

<!DOCTYPE HTML> 
<html manifest="" lang="en-US"> 
<head> 
    <meta charset="UTF-8"> 
    <title>moneyManager</title> 
    <style type="text/css"> 
     /** 
     * Example of an initial loading indicator. 
     * It is recommended to keep this as minimal as possible to provide instant feedback 
     * while other resources are still being loaded for the first time 
     */ 
     html, body { 
      height: 100%; 
      background-color: #1985D0 
     } 

     #appLoadingIndicator { 
      position: absolute; 
      top: 50%; 
      margin-top: -15px; 
      text-align: center; 
      width: 100%; 
      height: 30px; 
      -webkit-animation-name: appLoadingIndicator; 
      -webkit-animation-duration: 0.5s; 
      -webkit-animation-iteration-count: infinite; 
      -webkit-animation-direction: linear; 
     } 

     #appLoadingIndicator > * { 
      background-color: #FFFFFF; 
      display: inline-block; 
      height: 30px; 
      -webkit-border-radius: 15px; 
      margin: 0 5px; 
      width: 30px; 
      opacity: 0.8; 
     } 

     @-webkit-keyframes appLoadingIndicator{ 
      0% { 
       opacity: 0.8 
      } 
      50% { 
       opacity: 0 
      } 
      100% { 
       opacity: 0.8 
      } 
     } 
    </style> 
    <!-- The line below must be kept intact for Sencha Command to build your application --> 
    <script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script> 
</head> 
<body> 
    <div id="appLoadingIndicator"> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
</body> 
</html>

출처

2013-07-18 06:01:37 Viswa

+0

그 CSS 클래스가 이전을 대체하기위한 것입니다? 그렇다면 그 코드를 어디에 넣어야합니까? CLS 프로퍼티를 다른 클래스로 설정해야합니까? – Fawar

+0

예, 기본 스타일을 대체하고 해당 코드를 CSS 파일에 넣고 HTML 파일에 포함 시키거나 이미 프로젝트에 대한 CSS 파일을 만든 다음 해당 코드를 그 안에 넣습니다. – Viswa

+0

좋았어, 내가 제대로 이해했는지 확인하기 위해서. 만약 내가 자신의 CSS 소스 중 하나에서 클래스를 선언했다면, 그것은 자동으로 sencha 프레임 워크에서 나온 클래스를 덮어 버릴 것인가? 모든 것을 망칠 필요가 없습니까? 너 마술사 야? – Fawar

관련 문제

 관련 문제