Question

嘿我在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;
}

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

感谢。

Answer 1

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

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

由于某些原因，当我尝试将secondary颜色属性应用于ion-title标记时，它无法正常工作，但嵌套文本标记工作正常（例如<p>）。< / 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; 
}

在离子2中更改ion-title的字体颜色

1 个答案: