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

Я хотел бы создать панель инструментов для угловых 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 материально-, которые могут быть использованы, чтобы получить такие удобную панель инструментов для карточек или сделать я должен сделать пользовательские CSS для Это ?

источник

2016-01-25 Zalaboza

Ваш шаблон почти завершен, что еще нужно? По углам, отрегулируйте цвет, добавьте нижнюю границу, и все готово. Ничего не сделано. – kuhnroyal

Я не понимаю ... вы показали код, чтобы сделать это без объяснения проблемы. Примечание: двойные теги закрытия '' – charlietfl

@charlietfl моя проблема в следующем коде создаст панель инструментов с основным цветом Bg -blue background not white-, а шрифт, размер текста и цвет все не оптимизированы для панели инструментов. – Zalaboza

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

реализация инструментов-theme.scss: https://github.com/angular/material/blob/master/src/components/toolbar/toolbar-theme.scss

Один из способов использовать фон-цветы вы любите, чтобы переопределить CSS с важным

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.

источник

2016-01-26 10:43:16

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

ответ

Смежные вопросы