Изменить высоту дизайна материала панели инструментов

Как изменить высоту панели инструментов md в дизайне материалов?

http://jsfiddle.net/g8z57Lvz/1/

На первой панели инструментов я хочу высоту от 30 пикселей и пробовал:

<md-toolbar style:"height: 30px;">

Но это вообще не работает. Мне нужна панель навигации с двумя объемами, это из-за двух панелей инструментов.

Я пробую это, но теперь письмо исчезает.

http://jsfiddle.net/kostonstyle/r178sp9o/1/


angularjs angular-material
person softshipper    schedule 09.03.2015    source источник
comment
Вот рабочая ссылка: jsfiddle.net/r178sp9o/12   -  person nitin    schedule 15.03.2015

Ответы (5)


arrow_upward
9
arrow_downward

Высоту панели инструментов можно изменить, добавив классы в файл md-toolbar.

Для панели инструментов среднего размера добавьте class="md-medium-tall"

Для панели инструментов больше, чем обычно, добавьте class="md-tall"

Вы также можете настроить стиль панели инструментов style="height:50px;"

person Community    schedule 04.08.2015
comment
Мне нужна панель инструментов меньшего размера, чем по умолчанию, и она не работает - person boi_echos; 31.01.2016

arrow_upward
14
arrow_downward

Вы можете использовать встроенный стиль, подобный этому

<md-toolbar style="min-height:30px">

Используйте min-height, чтобы уменьшить панель инструментов.

person boi_echos    schedule 31.01.2016
comment
В зависимости от того, как настроена ваша страница, это может не сработать. Я добавил свой обходной путь ниже (работает в некоторых случаях, когда не работает только установка min-height) - person Kyle Krzeski; 13.06.2018
comment
Благодарю вас! Это была недостающая часть невозможности масштабировать md-toolbar меньше, чем 64px. - person Jouke; 23.08.2018

arrow_upward
8
arrow_downward

Принятый ответ не сработал для меня. Вот как я заработал в своем приложении Angular Material:

<mat-toolbar color="primary"
     style="min-height: 30px !important; height: 30px !important;">
person Eric Green    schedule 09.08.2018

arrow_upward
4
arrow_downward

Это сработало для меня на Angular 8. Поместите этот код в свой scss

.mat-toolbar {
  min-height: 50px !important; 
  height: 50px !important;
}

.mat-toolbar-row {
  min-height: 50px !important; 
  height: 50px !important;
}

Замените «мат» на «мд»

person Hasnat Ali Raja    schedule 11.01.2020

arrow_upward
0
arrow_downward

Если просто установка min-height не работает, как это не сработало для меня, вам также придется добавить max-height с тем же значением:

HTML

<md-toolbar class="toolbar"></md-toolbar>

CSS

.toolbar {
  max-height: 30px;
  min-height: 30px;
}
person Kyle Krzeski    schedule 13.06.2018