Issue
Trying to figure out how to set font size of mat-tab-label
based on screen size (below 400px).
I tried putting custom configs in different media queries like this @include mat-tabs-typography($tabs-typography-mobile);
without success.
I also tried experimenting with BreakpointObservers, but not sure how to target that specific property as I understand Sass very little:
this.observer.observe('(max-width: 400px)').subscribe(result => {
if (result.matches) {
document.documentElement.style.setProperty(???);
}
});
Also tried to target specific element with "View Encapsulation" method, but that just messes up entire layout of the page, so its probably last resort.
Here is the code, I'm trying to change the font size of "label-one", "label-two" and "label-three":
<mat-tab-group mat-stretch-tabs dynamicHeight>
<mat-tab label="label-one">
<div class="tab"></div>
</mat-tab>
<mat-tab label="label-two">
<div class="tab"></div>
</mat-tab>
<mat-tab label="label-three">
<div class="tab"></div>
</mat-tab>
</mat-tab-group>
Solution
just is a media query. In your styles.css, e.g.
html{
font-size:12px
}
@media(min-width: 400px) //if more than 400 px
{
html{
font-size:14px
}
}
You can use in only a determinates elements, you can enclse all under <div class="special">
and use, e.g.
.special .mat-tab-label{
font-size:12px
}
@media(min-width: 400px) //if more than 400 px
{
.special .mat-tab-label{
font-size:14px
}
}
You can use in your styles.css (the styles that change all the application) or using ViewEncapsulation.None and use in component, but if you use this last option remember that all the .css you write in component affect to all the aplication.
Answered By - Eliseo
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.