Угловой материал Поверните чернильный матовый мат в вертикальное положение - PullRequest
Новая
       8

Угловой материал Поверните чернильный матовый мат в вертикальное положение

0 голосов
/ 19 ноября 2018

Я хотел изменить компонент вкладки углового материала, чтобы он отображался вертикально.Поэтому я пошел сюда (вкладки) и поиграл с CSS.Мне удалось отобразить вкладки по вертикали.со следующим CSS: 

.mat-tab-group {
    display: flex;
    flex-direction: row!important;
}
.mat-tab-labels {
    display: flex;
    flex-direction: column!important;
}

Но mat-ink-bar остается внизу, как и ожидалось: vertical tabs

Как повернуть панель, чтобы отобразить еевертикально и с правой стороны вкладки надписей?Также надеюсь, что переход бара также можно сохранить.

Я думаю, что стержень можно повернуть по часовой стрелке на 90 градусов и правильно расположить с правой стороны.Ширина полосы также может быть установлена ​​равной высоте вкладок.

1 Ответ

0 голосов
/ 19 ноября 2018

Я думаю 

<mat-ink-bar class="mat-ink-bar" style="visibility: visible; left: 160px; width: 160px;"></mat-ink-bar>

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

.mat-ink-bar {
position: absolute;
bottom: 0;
height: 2px;
transition: .5s cubic-bezier(.35,0,.25,1);

} вместо высоты берут ширину: 2px, а высота должна быть высотой .mat-tab-label.

...