Angular Материал: как установить фоновый цвет (без CSS)

Я разрабатываю приложение для создания чистого материала, используя Angular Material framework.

Однако я не понимаю, как устанавливать цвета фона контейнера (например, форму входа с синим фоном). Я мог бы сделать это с помощью CSS, конечно, но мне интересно, есть ли встроенная опция директивы/темы для этого.

Ответ 1

Я уверен, что видел это где-то в документах, но я не могу найти его сейчас. Вы должны сделать две разные вещи:

установите .backgroundPalette('indigo') так же, как вы устанавливаете основную тему
создать контейнер

Я проверил его на версии 0.8.1 angular -материала, и он работает нормально.

Не стесняйтесь спрашивать, если у вас есть дополнительные вопросы.

Например:

app.config(function ($mdThemingProvider) {
  $mdThemingProvider
    .theme('default')
    .primaryPalette('indigo')
    .accentPalette('pink')
    .warnPalette('red')
    .backgroundPalette('blue-grey');
});

и в вашем шаблоне:

<md-content>
    <p>Some text</p>
</md-content>

Ответ 2

Вы можете установить любой цвет из палитры с помощью директивы md-colors.

https://material.angularjs.org/1.1.4/api/directive/mdColors

Формат будет [? theme] - [palette] - [? hue] - [? opacity] где? означает необязательный параметр.

Но по моему опыту вы должны указать тему, даже если она по умолчанию:

<md-button md-colors="{color: 'default-red-A100', 'background': 'default-primary-600'}">Button</md-button>

Ответ 3

В боковом столбце, игнорируя часть вопроса "без css", я вижу, что создатели Material Angular используют простой старый CSS для создания цвета фона, см. this codepen (вы также найдете это через раздел Начало работы: "Вилка кодефа" ).

HTML

<div id="content" ng-view flex> </div>

CSS

.demo #content {
  background-color: rgb(255, 244, 220);
  padding:30px;
  font-weight:600;
  border: 1px solid #aeaeae;
  border-top:none;
}