1

嘿，我在 ionic2 中制作了一个待办事项列表应用程序，我有一个侧边栏列表。在 list.html 我有以下代码：

<ion-navbar *navbar>
  <a menu-toggle>
    <icon menu></icon>
  </a>
  <ion-title class="listTitle">My First List</ion-title>
</ion-navbar>

我正在尝试使用 css 将“我的第一个列表”的颜色更改为白色。但它不起作用。我还为标题定义了背景颜色，但它覆盖了菜单图标。这是为什么？

的CSS：

.listTitle
{
    background-color : #58B43F;
    color : #ffffff !important;
    box-shadow : 0px 6px 10px #888888;
}

我的预期结果是导航栏将呈绿色，带有白色标题和白色菜单图标。我该怎么做？

谢谢。

4

1 回答 1

2

Ionic 2 使用关键字从app.variables.scss文件中引用 SASS 变量，这些变量可以作为属性直接添加到标签中。使用它，我们可以将primaryand更改secondary为绿色和白色：

$colors: (
  primary:    #58B43F,
  secondary:  #fff,
  ...
);

secondary出于某种原因，当我尝试将颜色属性应用于标签时它不起作用ion-title，但是嵌套的文本标签可以正常工作（例如<p>）。

因此，下面是如何使用这些颜色别名来设置样式ion-navbar（特别注意标签声明中的位置primary和别名）：secondary

<ion-navbar primary *navbar>
  <a menu-toggle>
    <icon menu></icon>
  </a>
  <ion-title>
    <p secondary>My First List</p>
  </ion-title>
</ion-navbar>

编辑：其他定制

要调整导航栏高度，请将这些添加到app.variables.scss：

$toolbar-ios-height: 8rem; // ios
$toolbar-md-height: 8rem;  // android

要使用新的字体系列，请覆盖ion-navbar样式：

ion-navbar {
  font-family: 'MyFontFamily';
  text-transform: uppercase;
  letter-spacing: 0.14em; 
}
于 2016-02-13T07:47:44.737 回答