Question

0

625

Views

¿Cómo diseñar un ícono de iones dentro de un brindis de iones (elementos de sombra anidados)?

He intentado múltiples enfoques:

Establezca estilos en línea, pero parece que @ionic elimina los atributos style="...." al generar el brindis
Variables CSS pero no puedo averiguar cómo diseñar un elemento de sombra anidado que no expone una API (icono de ion)

Actualmente estoy haciendo:

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

Las tostadas exportan una parte con nombre (mensaje) pero esto no es suficiente ya que necesito hacer que el ícono sea más grande que el texto.

 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; } }

Así es como se ve mi tostada:

¿Alguna idea?

over 4 years ago · Santiago Trujillo

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-07T20:07:37.874Z

Solución 1

Agregue class="icon-large" a su icono de iones.

Solución 2

Lo más fácil hubiera sido usar style:"font-size:2em;" propiedad en el elemento ion-icon, sin embargo, señaló correctamente que Ionic (en realidad Angular) elimina HTML de los elementos. La solución sería usar una tubería. Es bastante complicado (por ejemplo, consulte https://medium.com/@ahmedhamedTN/make-styles-work-when-dealing-with-innerhtml-in-angular-ac2d524ba001 ).

no solución

Podemos hacer que SCSS le dé estilo al mensaje dentro de ion-toast, usando lo siguiente:

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

Sin embargo, es imposible diseñar un icono de iones dentro del mensaje (vea la nota a continuación).

Solución 3

Todavía podemos obtener el archivo SCSS para cambiar el tamaño del icono de iones... Agregue un botón con un icono y luego diseñelo:

página.ts:

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

página.scss:

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

Por qué:

Dado que partes del brindis se colocan dentro de #shadow-root, la única forma de llegar a ellas desde SCSS es usando "::part()" según lo asignado por los propios componentes. Para encontrar qué partes están disponibles, lea los documentos: https://ionicframework.com/docs/api/toast#css-shadow-parts , o abra el inspector, busque .ion-toast y revise los elementos dentro de #shadow-root. Para Ionic 5 Angular encontré parte = (contenedor), parte = (mensaje) y parte = (botón).

Tenga en cuenta que part() no puede ser seguido por ningún otro selector. Por lo tanto, es imposible agrandar el ícono de la izquierda pero mantener el botón de cierre del mismo tamaño, ya que ambos tienen "parte = (botón)".

0

625