2

在过去的 2 个小时里，我一直在搞砸如何更改图标的颜色及其各自的“标签”。

我想把它设置为白色，

我试图找到一个 SCSS 变量，但找不到。我尝试通过各种方式添加一个 css 类，但都没有奏效。

有人会有一个工作示例吗？

在此处输入图像描述

4

1 回答 1

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

更新

应用程序.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;  
}

索引.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-18T06:01:37.573 回答