Question

我想自定义离子视图的视图标题，以便标题显示红色的4个字母和白色的4个字母。我该怎么做？

例如，我使用这样的模板：

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

现在我希望Hello以红色显示并且世界显示为白色。

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

Answer 1

试试这个，

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

Answer 2

这解决了修改视图标题的问题：

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

Answer 3

除了iDeekshith的回答以及未来的人，您还可以在标题中添加图像（也许是应用程序的徽标）。

<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离子框架

3 个答案: