kendo ui角度拆分面板更改背景颜色

时间:2019-04-28 17:22:45

标签: css angular kendo-ui

我尝试更改背景颜色 剑道分割窗格。但是,即使我向其中添加了样式标签,它也似乎不适用于其内部元素。

那么为剑道分割面板自定义颜色的合适方法是什么?

1 个答案:

答案 0 :(得分: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 {}