Как установить mat-ink-bar вкладки Angular material для ширины текста заголовка вкладки - PullRequest
0 голосов
/ 01 мая 2018

Я хочу, чтобы mat-ink-bar вкладки Angular Material брал ширину ширины текста заголовка вкладки. В настоящее время он больше ширины текста заголовка вкладки.

Следующее изображение показывает, как оно выглядит сейчас.

Current look

На следующем рисунке показано, как я хочу.

How I want the mat-tab-ink-bar to look

Не могли бы вы помочь мне, как это сделать?

Ответы [ 2 ]

0 голосов
/ 17 января 2019

enter image description here Я добился этого, удалив min-width и отступы в классе .mat-tab-label. и добавление поля в соответствии с моим требованием держать этикетки отдельно. это работало, поскольку mat-ink-bar принимает ширину mat-tab-label, которая была установлена ​​min-width в 160px;

0 голосов
/ 19 декабря 2018

Я сделал это, используя псевдо-классы css и до, но для того, чтобы вырезать определенное количество ширины mat-ink-bar. Пожалуйста, смотрите ниже код SCSS

  mat-ink-bar {           
                &:before,
                &:after {
                    content: "";
                    height: 2px;
                    width: 20px;
                    background-color: white;
                    position: absolute;
                    left: 0;
                }
                &:after {
                    left: initial;
                    right: 0;
                }
            }
...