如何在 ion-toast（嵌套阴影元素）内设置离子图标的样式？

Question

我尝试了多种方法：

1. 设置内联样式，但看起来 @ionic 在生成 toast 时删除了

   style="...."

   属性

2. CSS 变量，但无法弄清楚如何设置不公开 api（离子图标）的嵌套阴影元素的样式

目前我正在做：

let opts = { message: '<ion-icon name="icon-name" style="font-size: 50px;...other styles..">' };
const toast = await this.toastController.create(opts);

Toast 导出命名部分（消息），但这还不够，因为我需要使图标大于文本。

ion-toast {  
  // this works
  &::part(message) {
        font-size: 1.2em;
  }      
  
  
  // None of this works and my goal is to style the ion-icon
  
  &::part(message) ion-icon {
        font-size: 1.2em;
  }      
  &::part(message) /deep/ ion-icon {
        font-size: 1.2em;
  }      

  &::part(message)::part(ion-icon) {
        font-size: 1.2em;
  }      

}

这是我的吐司的样子：

有什么想法吗？

Answer 1

解决方案1

将

class="icon-large"

添加到您的离子图标。

解决方案2

最简单的方法确实是在 ion-icon 元素中使用

style:"font-size:2em;"

属性，但正确地指出，Ionic（实际上是 Angular）从元素中删除了 HTML。解决方法是使用管道。它非常复杂（例如参见https://medium.com/@ahmedhamedTN/make-styles-work-when-dealing-with-innerhtml-in-angular-ac2d524ba001）。

非解决方案

我们可以使用以下命令让 SCSS 在 ion-toast 中设置消息本身的样式：

ion-toast::part(message) {
 ...
}

但是，不可能在消息中设置离子图标样式（请参阅下面的注释）。

解决方案3

我们仍然可以获取 SCSS 文件来更改离子图标大小...... 添加带有图标的按钮，然后设置其样式：

page.ts：

const opts = {
  ...
  buttons: [
    {
      side: 'start',
      icon: 'icon-name',
      handler: () => {},
    },
  ],
};
const toast = await this.toastController.create(opts);
toast.present();

页面.scss：

ion-toast::part(button) {
  height: auto;
  width: auto;
  font-size: 1.6em; // this sets actual icon size
}

为什么：

由于 toast 的某些部分放置在 #shadow-root 内，因此从 SCSS 获取它们的唯一方法是使用组件本身分配的“::part()”。要查找可用的部件，请阅读文档： https://ionicframework.com/docs/api/toast#css-shadow-parts，或打开检查器，找到 .ion-toast 并查看 #shadow-root 下的元素。对于 Ionic 5 Angular，我找到了部分=（容器）、部分=（消息）和部分=（按钮）。

请注意，part() 后面不能跟任何其他选择器。因此，不可能使左侧的图标变大，但保持关闭按钮相同的大小，因为它们都有“部分=（按钮）”。

Answer 2

您可以使用文档中推荐的自定义 CSS 以任何您想要的方式设置样式。 例如我的css代码：

应用程序推荐-toast.css：

ion-toast.app-recommend-toast {
  --min-height: 30vh;
}

ion-toast.app-recommend-toast::part(header) {
  font-weight: 900;
  font-size: 18px;
}

ion-toast.app-recommend-toast::part(icon) {
  width: 60px;
  height: 80px;
}

注意：不要忘记将相应的css类名添加到Toast元素中

自定义CSS参考： https://ionicframework.com/docs/api/toast#theming