ion-view 自定义 view-title 离子框架

Question

我想自定义 view-title 的 ion-view 以便标题显示 4 个红色字母和 4 个白色字母。我该怎么做？

例如我使用这样的模板：

<ion-view view-title="HelloWorld">

现在我希望 Hello 显示为红色，world 显示为白色。

我的主要问题是我无法通过 css 访问 view-title。

Answer 1

这样就解决了修改view-title的问题：

<ion-nav-title>
    <span class="red">Hello</span>World
</ion-nav-title>

Answer 2

试试这个，

<ion-view>    
     <ion-nav-title>
        <span style="color:red">Hello</span>World
     </ion-nav-title>
</ion-view>

Answer 3

除了 iDeekshith 的回答和未来的人，您还可以将图像添加到 header（也许是您应用程序的徽标）。

<ion-nav-title>
    <div>
        <span class="header-logo"><img src="img/logo.png" width="30" alt="App logo"/></span>
        Your App Title
    </div>
 </ion-nav-title>

ion-view 自定义 view-title 离子框架

ion-view customize view-title ionic framework

css

ionic