Фон ящика изменения материала Vue

Я создал приложение vuejs и использую googles material design

Я пытаюсь найти способ изменить цвет фона.

<template>
    <div class = "page-container">
        <md-app>
            <md-app-toolbar class = "md-primary" md-elevation = "0">
                <md-button class = "md-icon-button" @click = "toggleMenu" v-if = "!menuVisible">
                    <md-icon>menu</md-icon>
                </md-button>
                <span class = "md-title">My Title</span>
            </md-app-toolbar>

            <md-app-drawer :md-active.sync = "menuVisible" md-persistent = "mini">
                <md-toolbar class = "md-transparent" md-elevation = "0">
                    <span>Navigation</span>

                    <div class = "md-toolbar-section-end">
                        <md-button class = "md-icon-button md-dense" @click = "toggleMenu">
                            <md-icon>keyboard_arrow_left</md-icon>
                        </md-button>
                    </div>
                </md-toolbar>
                <md-list>
                    <md-list-item>
                        <md-icon>move_to_inbox</md-icon>
                        <span class = "md-list-item-text">Inbox</span>
                    </md-list-item>

                    <md-list-item>
                        <md-icon>send</md-icon>
                        <span class = "md-list-item-text">Sent Mail</span>
                    </md-list-item>

                    <md-list-item>
                        <md-icon>delete</md-icon>
                        <span class = "md-list-item-text">Trash</span>
                    </md-list-item>

                    <md-list-item>
                        <md-icon>error</md-icon>
                        <span class = "md-list-item-text">Spam</span>
                    </md-list-item>
                </md-list>
            </md-app-drawer>
            <md-app-content>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea.
            </md-app-content>
        </md-app>
    </div>
</template>

Я прочитаю, если вы добавите следующее

@import "~vue-material/dist/theme/engine"; // Import the theme engine

@include md-register-theme("default", (
    primary: #3fffbe, // The primary color of your brand
    accent: #1a11e8 // The secondary color of your brand
));

@import "~vue-material/dist/theme/all"; // Apply the theme

но не знаю, как добавить его в ящик, чтобы изменить задний фон. Любые идеи?

вы можете указать, какую версию вы используете?

— 13.06.2018 15:49

css vue.js sass vue-material

27.03.2018 22:56

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

2 625

Ответы 2

Из материала Vue документы:

Vue Material use classes to apply those color intentions: md-primary, md-accent, and md-transparent. The background color is applied automatically by the theme engine.

Это относится и к компоненту md-app-drawer. Что вы можете сделать, так это переопределить его стили класса по умолчанию. Я предполагаю, что это относится к классу md-drawer, поэтому он выглядит так:

.md-drawer {
    background: blue !important; // makes the drawer partially blue
}

md-drawer имеет набор дочерних компонентов (например, md-list), стили которых вам также придется переопределить. Был ли ваш настоящий вопрос «Есть ли способ сделать это с настройкой темы?». Если так, думаю, ответ будет отрицательным.

27.03.2018 23:06

попробуйте это, я думаю, это работает для вас

@import "~vue-material/dist/theme/engine"; // Import the theme engine

@include md-register-theme("default", (
  primary: md-get-palette-color(blue, A200), // The primary color of your application
  accent: md-get-palette-color(red, A200) // The accent or secondary color
));

@import "~vue-material/dist/theme/all"; // Apply the theme

где A200 - Оттенки основаны на весе цвета, это может быть 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400 или A700

13.06.2018 15:51