angular – 可以更改离子导航栏内的离子标题大小？

发布时间：2020-12-17 06:51:49 所属栏目：安全来源：网络整理

导读：ion-navbar color="primary" ion-titleAtualizado em: {{ultimaAtualizacao | date:'dd/MM/yyyy'}}/ion-title/ion-navbar 我想更改离子标题的文本大小,我已经尝试过使用css,但它没有改变. 解决方法如果要为应用的每个页面更改它,可以使用sass变量.您需要在v

<ion-navbar color="primary">
  <ion-title>Atualizado em: {{ultimaAtualizacao |  date:'dd/MM/yyyy'}}</ion-title>
</ion-navbar>

我想更改离子标题的文本大小,我已经尝试过使用css,但它没有改变.

解决方法

>如果要为应用的每个页面更改它,可以使用sass变量.您需要在variables.scss文件中添加以下内容：

$toolbar-ios-title-font-size: 1.7rem;
$toolbar-md-title-font-size: 2rem;
$toolbar-wp-title-font-size: 1.5rem;

这些是默认值,因此您可以设置所需的值.
>如果只想在一个页面中进行更改,则不应使用sass变量.相反,在该页面的scss文件中使用简单的css规则：

your-page {

  toolbar-title toolbar-title-ios { 
    font-size: 1.7rem;
  }

  toolbar-title toolbar-title-md { 
    font-size: 2rem;
  }

  toolbar-title toolbar-title-wp { 
    font-size: 1.5rem;
  }

}

编辑：

如果使用css规则不起作用,则可能是与这些规则的特殊性相关的问题.你可以试着像这样包装页面的样式：

.ios,.md,.wp {

  your-page {

    // Put your css rules here!

  }

}

通过这样做,您可以提高自定义css规则的特异性,并覆盖Ionic的css规则.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!