Question

我正在使用Ionic Framework做一个简单的应用程序，我正在使用ion-tabs。我已经尝试了一切来自定义我的离子标签，但没有任何作用，任何人都可以帮我展示一个CSS吗？

我不想要离子色，如：积极，黑暗或自信，我想真正定制它

＆＃13;

<ion-tabs class="tabs-icon-top">

    <!--To Do-->
    <ion-tab title="To Do" icon-off="ion-android-list" icon-on="ion-android-list" href="#/tab/todo">
        <ion-nav-view name="toDoView"></ion-nav-view>
    </ion-tab>

    <!--Done-->
    <ion-tab title="Done" icon-off="ion-android-checkbox" icon-on="ion-android-checkbox" href="#/tab/done">
        <ion-nav-view name="doneView"></ion-nav-view>
    </ion-tab>

    <!--Add To Do-->
    <ion-tab title="Add To Do" icon-off="ion-android-add-circle" icon-on="ion-android-add-circle" href="#/tab/add">
        <ion-nav-view name="addToDoView"></ion-nav-view>
    </ion-tab>
    
</ion-tabs>

＆＃13;

Answer 1

在主题文件夹内，在 variables.scss 中，您可以在第26行找到下一个代码：

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);

在这里你可以添加类似的内容：

mynewcolor: #333131

你的代码看起来像这样：

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  mynewcolor: #333131
);

您可以在此变量中添加所需的所有颜色。之后，您可以转到tabs.html并将其添加到 ion-tabs

中

<ion-tabs color="mynewcolor">
 //my tabs
</ion-tabs>

就是这样。你应该在标签中看到你的新颜色。

如何定制离子片？

1 个答案: