¿Por qué pueden los elementos materiales angular paso a paso no estilo I directamente?

votos
0

Aquí está un ejemplo de código que he bifurcada de la documentación oficial angular de paso a paso: https://stackblitz.com/edit/angular-tth817

En mi tenedor, estoy tratando de conseguir un par de cosas:

  • Quiero ocultar la cabecera paso a paso.

    • He intentado hacer esto por peinar .mat-horizontal-stepper-header-container(en realidad sólo añadir un borde a la misma).
  • Forcé el contenido del último paso a ser alto. Allí, se puede ver que los botones en cada paso ya no se alinean. Lo que me gustaría hacer es tener el contenido de pasos llenar su matriz ( .containerla roja gruesa línea discontinua), y luego puedo utilizar cuadro de flexión para obtener los botones para alinear todo en la parte inferior.

    • Añadí mat-stepper-horizontal, mat-stepper-horizontalreglas, y éstas tampoco se aplican.

Usted pude decirme:

  • ¿Por qué no están apareciendo estas reglas en absoluto? (Herramientas de desarrollo F12, muestra todas las otras reglas, pero no que los que son paso a paso específico). ¿Que está pasando aqui?

  • En general - lo que la filosofía debería utilizar para peinar el paso a paso? La mejor alternativa que se me ocurre, es poner un div de contenido dentro de cada paso, y el tamaño con VH y vw o algo así.

  • ¿Cómo me deshago de la cabecera?

Publicado el 03/06/2018 a las 02:13
fuente por usuario
En otros idiomas...                            


1 respuestas

votos
4

A partir de los documentos angulares:

Los estilos que se especifican en los metadatos @Component sólo se aplican dentro de la plantilla de ese componente.

( Https://angular.io/guide/component-styles#style-scope )

En otras palabras, la adición de un estilo en este archivo no afectará a los componentes hijos.

Tenga en cuenta que Angular proporcionar selectores CSS especiales que se pueden utilizar para seleccionar los componentes de los niños. Estos son técnicamente obsoletos, pero actualmente no hay mención de lo que va a ocupar su lugar.

::ng-deep .mat-horizontal-stepper-header-container {
  border: solid 1px red; 
}

::ng-deep mat-stepper-horizontal, mat-stepper-horizontal {
  border: dashed 1px blue; 
  padding: 1em;
}
Respondida el 03/06/2018 a las 05:23
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more