- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我尝试了多种方法:
设置内联样式,但看起来 @ionic 在生成 toast 时删除了 style="...."
属性
CSS 变量,但不知道如何设置不公开 api( ionic 图标)的嵌套阴影元素的样式
目前我在做:
let opts = { message: '<ion-icon name="icon-name" style="font-size: 50px;...other styles..">' };
const toast = await this.toastController.create(opts);
Toasts 导出命名部分(消息),但这还不够,因为我需要使图标比文本大。
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;
}
}
有什么想法吗?
最佳答案
将 class="icon-large"
添加到您的 ionic 图标。
最简单的确实是在 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) {
...
}
但是不可能在消息中设置 ion-icon 样式(见下面的注释)。
我们仍然可以获取 SCSS 文件来更改 ionic 图标的大小...添加一个带有图标的按钮,然后设置它的样式:
页面.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=(container)、part=(message) 和 part=(button)。
请注意,part() 后面不能跟任何其他选择器。因此,不可能使左侧的图标变大,但保持关闭按钮的大小相同,因为它们都有“part=(button)”。
关于css - 如何在 ion-toast(嵌套的阴影元素)中设置 ion-icon 的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68875468/
我是一名优秀的程序员,十分优秀!