CSS Tabs в TabPanel

Я занимаюсь в течение последних 2 часов, чтобы узнать, как изменить цвет значков и их соответствующую метку.CSS Tabs в TabPanel

Я хочу, чтобы установить его на белый,

Я пытался найти переменную SCSS, не мог. Я попытался добавить класс css по-разному, никто не работал.

Был ли у кого-нибудь рабочий пример?

enter image description here

источник

2013-07-17 Fawar

После CSS будет делать трюк

CSS

.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; 
    }

UPDATE

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

Эти классы CSS предназначены для замены старого? Если да, то где я должен поставить этот код? Else, какое свойство CLS нужно установить для этих классов? – Fawar

Да, он заменит стиль по умолчанию и поместит этот код в файл css и включит его в ваш html-файл или если вы уже создали файл css для своего проекта, тогда поставьте этот код там. – Viswa

Хорошо, просто чтобы я правильно понял. Если бы я должен был объявить эти классы в одном из моих собственных ресурсов css rus, то он автоматически переопределил бы один из рамок sencha? Не нужно возиться со всем? Вы волшебник? – Fawar

CSS Tabs в TabPanel

ответ

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