css - 如何在 tabpanel xtype 的页眉和正文中添加边框

Question

创建 EXT js 文件:

为 tabpanel 的页眉和主体添加边框。

我尝试在 .scss 文件中添加以下内容，但没有成功。

*.scss
.maintabpanel1 {

 .x-tab-bar-plain { border:1px solid red !important;

}

.x-tab-bar-top+.x-panel-body, .x-panel.x-tabpanel-child {

  border: 1px solid green !important;`enter code here`
}

Answer 1

您需要提供cls和 bodyCls到你的tabpanel .

• 一个 cls 可选的额外 CSS 类，它将被添加到该组件的元素中。该值可以是字符串、由空格分隔的字符串列表或字符串数​​组。这对于使用标准 CSS 规则向组件或其任何子组件添加自定义样式非常有用。
• bodyCls 类、以空格分隔的类字符串或要应用于面板正文元素的类数组。

在这个 gitlab-repo ，我已经使用 ExtJS6.2 创建了一个演示。我希望这会帮助/指导您实现您的要求。

screenshot from my local .

代码片段

Ext.define('GeoLocation.view.main.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'app-main',
    cls: 'x-geo-tab',
    bodyCls: 'x-geo-tab-body',
    controller: 'main',
    titleRotation: 0,
    tabRotation: 0,
    activeTab: 0,
    items: [{
        title: 'Tab 1',
        html: 'it is tab 1'
    }, {
        title: 'Tab 2',
        html: 'it is tab 2'
    }, {
        title: 'Tab 3',
        html: 'it is tab 3'
    }]
});

CSS part

.x-geo-tab {
    .x-tab-bar-default {
        background-color: #ece2e2;
        border: 2px solid red !important;
        padding: 5px;
        .x-tab-bar-strip-default {
            background-color: red;
            height: 2px !important;
        }
    }
    .x-geo-tab-body {
        border: 2px solid green !important;
        padding: 10px;
    }
}