панель инструментов карточки углового материала

Я хотел бы создать панель инструментов для угловых md-карт.

что-то похожее на это изображение введите здесь описание изображения

<md-card layout="column" >
              <md-toolbar>
                <div class="md-toolbar-tools">
                  <h3>Card Header</h3>
                  <span flex></span>
                  <md-button class="md-icon-button">
                    <md-icon md-font-icon="fa-calendar" class="fa" aria-label="open menu"></md-icon>
                  </md-button>
                  <md-button class="md-icon-button">
                    <md-icon md-font-icon="fa-user" class="fa" aria-label="open menu"></md-icon>
                  </md-button>
                </div>
              </md-toolbar>
              </md-card-content>Card Content</md-card-content>
</md-card>

Существуют ли какие-либо текущие директивы для ngMaterial -angular material-, которые можно использовать для получения такой красивой панели инструментов для карточек, или мне нужно создать для нее собственный css?


material-design angularjs angularjs-material
person Zalaboza    schedule 25.01.2016    source источник
comment
Ваш шаблон почти готов, что еще вам нужно? Скруглите углы, отрегулируйте цвет, добавьте нижнюю границу, и все готово. Предварительно ничего не делается.   -  person kuhnroyal    schedule 25.01.2016
comment
Я не понимаю... вы показали код, чтобы сделать это без объяснения проблемы. Обратите внимание на двойные закрывающие теги </md-card-content>   -  person charlietfl    schedule 25.01.2016
comment
@charlietfl моя проблема заключается в том, что следующий код создаст панель инструментов с основным цветом Bg -синий фон, а не белый-, а шрифт, размер текста и цвет не оптимизированы для панели инструментов карты.   -  person Zalaboza    schedule 25.01.2016
comment
не могли бы вы поместить это в скрипку, плюхнуть и т. д.?   -  person couzzi    schedule 25.01.2016
comment
можно использовать несколько тем, если это поможет. Что касается стиля, придется настроить по вкусу   -  person charlietfl    schedule 25.01.2016
comment
У меня так, ничего сверхъестественного нет. Вы можете добавить тему или 5 строк CSS, чтобы делать то, что вы хотите.   -  person kuhnroyal    schedule 25.01.2016

Ответы (1)


arrow_upward
1
arrow_downward

Панель инструментов Angular Material по умолчанию использует основной цвет вашей темы в качестве цвета фона панели инструментов.

Реализация toolbar-theme.scss: https://github.com/angular/material/blob/master/src/components/toolbar/toolbar-theme.scss

Один из способов использовать фоновые цвета, которые вам нравятся, — переопределить css с помощью !important

md-toolbar {
    background-color: white !important;
}

Другой способ — установить белый акцентный цвет. Вы можете узнать, как настроить цвета темы в своем приложении: https://material.angularjs.org/0.11.4/Theming/03_configuring_a_theme

Затем вы можете использовать md-accent в директиве панели инструментов, например:

<md-toolbar class="md-accent">
  <h2>title</h2>
</md-toolbar>

Но этот метод основан на предположении, что цвет акцентной темы белый. Если вы следуете дизайну материалов Google, вам следует установить несколько тем, как сказал charlietfl.

Если вы хотите, чтобы шрифт, размер текста и цвет были такими же, как на изображении, которое вы показали, вы можете проверить элементы в своем браузере, чтобы получить стили, которые он использует, и поместить их в свой CSS.

person Charlie Ng    schedule 26.01.2016