Saltar al contenido

Cambiar el estilo de flecha para la flecha predeterminada del panel de expansión

Nuestro equipo de expertos pasados algunos días de investigación y de recopilar de información, hallamos la solución, deseamos que te sea útil en tu trabajo.

Solución:

Sí, es posible. Dale a tu panel de expansión una identificación de referencia, por ejemplo example y establecer el hideToggle propiedad como true.

En el puede colocar sus iconos y utilizar el expanded propiedad del panel para mostrar u ocultar los iconos relevantes.

  
    
      
        Personal data
      
      
        Type your name and age
        play_arrow
        arrow_drop_down
      
    

    
      
    

    
      
    
  

Para proporcionar espacio entre el ícono y la descripción del panel, agregue las siguientes clases en su componente.css:

.custom-header .mat-expansion-panel-header-title, 
.custom-header .mat-expansion-panel-header-description 
  flex-basis: 0;


.custom-header .mat-expansion-panel-header-description 
  justify-content: space-between;
  align-items: center;

He usado iconos de materiales. Puede colocar sus iconos personalizados si lo desea. Aquí hay un enlace a demostración de stackblitz.

extendió la respuesta de @Faisal y según la última versión del material angular, usaremos mat prefix en lugar de md para los componentes de Material.

Material angular 8.1.4



  
    Info
  
  
    play_arrow
    arrow_drop_down
  


Demostración de Stackblitz

valoraciones y reseñas

Si haces scroll puedes encontrar las observaciones de otros desarrolladores, tú de igual forma tienes la libertad de mostrar el tuyo si lo deseas.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 5)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *