стили меню мата не применяются в угловых - PullRequest
Новая
       11

стили меню мата не применяются в угловых

0 голосов
/ 25 апреля 2018

Я пытаюсь создать простую раскладку в angular 2, используя угловой материал и flex css ..

Ниже мой код ... 

<div  class="background" >

<mat-toolbar fxLayout="row"   fxLayoutAlign="space-between  none" >

<div  fxLayout="column" > 
<p>SPACE STUDY</p>
<h6>Rockefeller FY 2018</h6>

<div  fxShow="true" fxHide.gt-sm="true" fxLayout="column" fxLayoutAlign="start none">

 <h6 [matMenuTriggerFor]="dashboarditems">
  <mat-icon style="transform: scale(1.2);">line_weight</mat-icon> </h6>

  <mat-menu  class="mat-menu-panel"  [overlapTrigger]="true" #dashboarditems="matMenu"><br/><br/>
<a  routerLink='/home' routerLinkActive='active'>
<span matTooltip="HOME"><mat-icon style="color:lightgreen;">home</mat-icon></span></a><br/><br/><br/>

<a >
<span matTooltip="SPACE SURVEY"><mat-icon style="color:deeppink;">explore</mat-icon></span></a><br/><br/><br/>

<a  >
<span matTooltip="SPACE ADMIN"><mat-icon style="color:lightblue;">account_circle</mat-icon></span></a><br/><br/><br/>

<a >
<span matTooltip="REPORTS"><mat-icon style="color: orange;">assignment</mat-icon></span></a><br/><br/><br/>

<a >
<span matTooltip="JOINT USE"><mat-icon style="color:yellow;">supervisor_account</mat-icon></span></a><br/><br/><br/>

<a  >
<span matTooltip="HELP"><mat-icon style="color:red;">help</mat-icon></span></a><br/><br/><br/>
  </mat-menu>
</div>


</div>

<div fxLayout="row"  fxShow="true" fxHide.lt-md="true" >
<button mat-raised-button routerLink='/home' routerLinkActive='active'>
<span matTooltip="HOME"><mat-icon style="color:lightgreen;">home</mat-icon></span></button>

<button mat-raised-button >
<span matTooltip="SPACE SURVEY"><mat-icon style="color:deeppink;">explore</mat-icon></span></button>

<button mat-raised-button >
<span matTooltip="SPACE ADMIN"><mat-icon style="color:lightblue;">account_circle</mat-icon></span></button>

<button mat-raised-button >
<span matTooltip="REPORTS"><mat-icon style="color: orange;">assignment</mat-icon></span></button>

<button mat-raised-button  >
<span matTooltip="JOINT USE"><mat-icon style="color:yellow;">supervisor_account</mat-icon></span></button>

<button mat-raised-button >
<span matTooltip="HELP"><mat-icon style="color:red;">help</mat-icon></span></button>
</div>

</mat-toolbar>

</div>


<style>

.background {
/* Remember to use the other versions for IE 10 and older browsers! */
display: flex;
min-height: 100%;
font-family: 'verdana', sans-serif;
color: #fff;
height:100vh;
background: #222222;
background: #16222A; /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #16222A , #3A6073); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #16222A , #3A6073); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

p{
font-size:20px;
font-weight:bold;
font-family: 'verdana', sans-serif;
margin:3px;
}

h6{
    font-size:12px;
    font-weight:bold;
    font-family: 'verdana', sans-serif;
}

.mat-raised-button{
    text-align:left;
    border-radius:10px;
    font-size:11px;
    font-weight:bold;
    font-family: 'verdana', sans-serif;
    color:white;
    background:transparent;
}

.mat-icon {
    transform: scale(1.5);
}

.matTooltip{
    font-size:11px;
    font-weight:bold;
    font-family: 'verdana', sans-serif;
    }

.mat-menu-panel {
    min-width: 35px;
    max-width: 280px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 48px);
    border-radius: 2px;
    outline: 0;
    background: transparent;
    padding-left: 10px;
}
</style>

Это мой вывод

enter image description here

Здесь я пытаюсь изменить цвет фона для контейнера mat-menu на прозрачный, а также установить некоторые другие стили.

Когдая изменяю в консоли его отражение, как показано ниже

enter image description here

Но когда я применил те же изменения в своем коде, стили не применяются.

Я также пытаюсь явно добавить class = "mat-menu-panel" в компонент и div, в который я добавил mat-menu.

Но все же стили не применяются..

Может кто-нибудь, пожалуйста, помогите мне исправить этот стиль ..

пожалуйста, получите доступ к моему примеру кода здесь .. https://stackblitz.com/edit/angular-mat-formfield-flex-layout-vc3fsj?file=app%2Fapp.component.html

Ответы [ 2 ]

0 голосов
/ 25 апреля 2018

Можете ли вы проверить это, я написал некоторый стиль CSS внутри styles.scss https://stackblitz.com/edit/angular-mat-formfield-flex-layout-lvns7f?file=styles.scss

0 голосов
/ 25 апреля 2018

Вы не можете иметь стили в своем HTML-шаблоне. Вы должны поместить их в отдельную таблицу стилей. Как только вы это сделаете, он может не работать для стилей компонентов материала из-за угловой инкапсуляции стиля по умолчанию.

Вы можете

установить стили для глобального файла styles.css

style.css 

.mat-menu-panel {
min-width: 35px;

используйте комбинатор ng-deep

Поместите ваши стили в таблицу стилей, специфичную для компонента

Component.css 

:host ::ng-deep  .mat-menu-panel {
min-width: 35px;
/* ...*/

Изменить инкапсуляцию компонента

Поместите ваши стили в таблицу стилей для конкретного компонента и измените код компонента

Component.ts 

@Component({
//...
 encapsulation: ViewEncapsulation.None 
 })

С этим последним стили будут распространяться на все приложение (как в глобальной таблице стилей)

...