-
-
xxxl 数据领袖Lv6
发表于2020-8-19 16:10
楼主
本帖最后由 xxxl 于 2020-10-30 15:04 编辑
tab标签页样式的修改我们可以直接选中编辑区，在编辑区属性的报表自定义样式中添加样式脚本。
示例代码如下：复制代码修改前原样式时是这样的
修改后是这样的
我们还可以在计算报表后按f12 打开调试窗口，查看元素的class样式进行对应的修改。
补充：
以上修改tab页样式会直接应用到整个报表中，如果需要单独针对某一个tab页设置样式，就要在类名前面加div及tab页的代号了，比如需要某个tab页头居中，另一个tab页头居右可以这样设置。
复制代码最后效果
tab标签页样式的修改我们可以直接选中编辑区，在编辑区属性的报表自定义样式中添加样式脚本。
示例代码如下：
- .xtabctrl .xtab-header-default {
- height: 77px;
- border:0px;
- background:transparent;
- }
- .xtabctrl .xtab-header-default ul li {/*标签头的通常样式*/
- font-size: 12px;
- width:206px;
- height:77px;
- margin:0;
- padding:0;
- }
- .xtabctrl .xtab-header-default .xtab-header-center {/*标签头的通常样式*/
- text-align: center;
- line-height: 36px;
- width:206px;
- height:77px;
- font-size: 24px;
- color: #05F0FF;
- margin: 0px;
- background-color: transparent;
- background-image: url(/abi/vfs/root/products/ebi/sys/picture/背景图.png);
- background-repeat: no-repeat;
- }
-
- .xtabctrl .xtab-header-default .xtab-header-active .xtab-header-right {/* 选中后的背景颜色*/
- background : #0697A3;
- }
- .xtabctrl .xtab-header-default .xtab-header-active .xtab-header-center {
- background:none;
- margin: 0px ;
- font-size: 24px;
- }
- .xtabctrl .xtab-header .xtab-header-active .xtab-header-text {/*选中后标签头的样式*/
- font-weight: normal;
- color:#ffffff;
- }
- .xtabctrl .xtab-header .xtab-header-text {/* 标签头文字居中*/
- top: 25%;
- position: relative;
- }
- .xtabctrl .xtab-body-default{/* 标签体的样式 当标签头宽高修改后标签体可能遮住标签头导致不能点击 需要调整位置*/
- top:77px;
- }
修改后是这样的
我们还可以在计算报表后按f12 打开调试窗口，查看元素的class样式进行对应的修改。
补充：
以上修改tab页样式会直接应用到整个报表中，如果需要单独针对某一个tab页设置样式，就要在类名前面加div及tab页的代号了，比如需要某个tab页头居中，另一个tab页头居右可以这样设置。
- div#HHH2 .xtabctrl .xtab-header ul {//代号为HHH2的tab页 标签页头居右
- text-align: right;
- white-space: nowrap;
- overflow: hidden;
- }
- div#HHH4 .xtabctrl .xtab-header ul {//代号为HHH4的tab页 标签页头居中
- text-align: center;
- white-space: nowrap;
- overflow: hidden;
- }
最近看过此主题的会员
6个回答
7#
修改tab页样式的代码同样适用于酷屏中，
酷屏中操作步骤是先克隆出组件，然后编辑克隆出来的组件，在组件的css文件中加以上样式代码像这样
另外可能会遇到酷屏组件样式相互冲突的情况参考这个帖子解决https://bbs.esensoft.com/thread-134911-1-1.html
gelin 发表于 2020-9-4 11:40
我是在酷屏中使用的tab
就是想默认tab显示第一个标签页
