дизайн углового материала - добавьте пользовательский цвет кнопки

Я хочу добавить свои собственные цвета, похожие на "primary", "warn" и т.д., Например, я добавил класс для оранжевого фона, но я использую его как класс, а не атрибут цвета. Он работает, но код выглядит запутанным.

<button md-raised-button color="primary" class="btn-w-md ml-3 orange-500-bg"><i class="material-icons">description</i> Deactivate</button>

Что мне нужно сделать, чтобы добавить color="orange"?

Ответ 1

Вы можете изменить цвет кнопки только обычным способом css, определив класс для оранжевого цвета фона и используя его в качестве атрибута класса.

Если вам нужно использовать его как цвет = "оранжевый". Затем вам нужно создать собственную тему с нужными вам цветами. О том, как это сделать, см. Приложение Theming вашего углового материала. Вы даже можете сделать это на заказ для каждого элемента. Благодаря настройке вы можете выбрать различные темы на основе элементов

Но, тем не менее, вы не сможете использовать его как color = "orange", вы можете определить оранжевый в качестве основного или акцентного цвета и использовать его как color = "primary" или color = "accent" в зависимости от ваших потребностей.

Тема может иметь только следующие элементы с разными цветами

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

Ответ 2

Вы можете добавить любой цвет, как показано ниже.

 <a mat-mini-fab [color]="'success'" routerLink=".">link</a>

Ответ 3

Этот ответ находится в контексте углового проекта 5.1.1 с использованием углового/кли и углового материала 5.1.

mat-... кажется, наследует свой цвет от родителя, поэтому, если вы окружаете с помощью span или div и применяете туда цвет, он должен провалиться. В моем конкретном случае мы хотели динамически установить цвет значков. Наша первоначальная реализация и новая реализация приведены ниже.

Это присвоение класса переопределит класс значков mat-. Похоже, что это использование работает, но больше не работает:

<mat-icon [class]="custom-class">icon name</mat-icon>

Теперь вы можете обернуть:

<span [class]="custom-class"><mat-icon>icon name</mat-icon></span>

Первый случай приводит к тому, что слова "имя значка" окрашены по желанию, но без значка. Второй случай приводит к желаемому поведению.

Ответ 4

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

.mat-button, .mat-raised-button{
    background-color:red;
}

Примечание. Объявите ссылку на таблицу стилей на уровне компонента. LIVE DEMO

Ответ 5

Я создал стили для всех типов матовых кнопок

STACKBLITZ DEMO

(добавьте к своим глобальным стилям)

.mat-button.mat-success,
.mat-stroked-button.mat-success {
    color: #155724;
}
.mat-button.mat-success:hover,
.mat-stroked-button.mat-success:hover {
  background-color: #f0fff3;
}

.mat-raised-button.mat-success,
.mat-flat-button.mat-success,
.mat-fab.mat-success,
.mat-mini-fab.mat-success {
  color: #f0fff3;
  background-color: #155724;
}

.mat-icon-button.mat-success {
  color:#155724;
}