Kendo UI угловая разделенная панель изменить цвет фона

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

Каков тогда подходящий способ настроить цвет для кендо-сплиттер-панели?

любезно создать минимальный, полный и проверяемый пример

Sourav Dutta 28.04.2019 19:24
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
1
184
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно применить background-color к элементу kendo-splitter-pane, например:

@Component({
    selector: 'my-app',
    template: `
        <kendo-splitter style = "height: 200px;">
            <kendo-splitter-pane class = "pane1">
                <h3>Left pane</h3>
            </kendo-splitter-pane>

            <kendo-splitter-pane>
                <h3>Center pane</h3>
            </kendo-splitter-pane>

            <kendo-splitter-pane [resizable] = "false">
                <h3>Right pane</h3>
            </kendo-splitter-pane>
        </kendo-splitter>
    `,
    styles: [ `
        h3 {
            font-size: 1.2em;
            padding: 10px;
        }

        .pane1 {
            background-color: red;
        }
    ` ]
})
class AppComponent {}

Другие вопросы по теме