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 类，以空格分隔的类字符串，或要应用于面板的body元素的类数组。

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

screenshot from my local

CODE SNIPPET

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部分

.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;
    }
}

如何向tabpanel xtype的标题和正文添加边框

1 个答案: