上下文:我正在编写一个 ExtJS 应用程序来帮助志愿者管理营地数据库。包含应急信息、饮食要求和舱位分配。我希望它对用户友好,以便志愿者可以快速上手,所以我决定标签需要更大以引起对应用程序主要操作的注意.
问题:不过我只是不知道如何更改标签高度。
到目前为止的工作:
- 我已经尝试为我的选项卡面板设置 tabBar 属性,但选项卡没有调整大小,而且样式看起来很奇怪
- 我浏览了论坛,有人建议修改 CSS,但没有示例
你能帮忙吗?这就是我想要实现的目标:
最佳答案
我想我找到了解决办法!
确保您已经设置了您正在使用的 Ext.tab.Panel 的“cls”属性,然后将以下内容粘贴到您的自定义 CSS 文件中。
.MainPanel .x-tab-bar-strip {
top: 40px !important; /* Default value is 20, we add 20 = 40 */
}
.MainPanel .x-tab-bar .x-tab-bar-body {
height: 43px !important; /* Default value is 23, we add 20 = 43 */
border: 0 !important; /* Overides the border that appears on resizing the grid */
}
.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner {
height: 41px !important; /* Default value is 21, we add 20 = 41 */
}
.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner .x-tab {
height: 41px !important; /* Default value is 21, we add 20 = 41 */
}
.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner .x-tab button {
height: 33px !important; /* Default value 13, we add 20 = 33 */
line-height: 33px !important; /* Default value 13, we add 20 = 33 */
}
请注意,这会使选项卡变大并使文本居中对齐,但理想情况下图标也会居中对齐。
关于tabs - 更改 ExtJS 4 选项卡的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7237795/