TabPanel中Tab的CSS

时间：2013-07-17 16:43:04

标签： extjs sencha-touch sencha-touch-2

过去2小时我一直在搞乱如何改变图标的​​颜色及其各自的“标签”。

我想将其设为白色，

我试图找到一个SCSS变量，但是没有。 我尝试以各种方式添加一个css类，没有一个工作。

有人有工作的例子吗？

enter image description here

1 个答案:

答案 0 :(得分：2)

遵循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;  
    }

的更新 的

<强> 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>
相关问题
最新问题