如何在Angular中基于Div内容自定义Syncfusion EJ2 Tab样式

步骤1：定义表头数据（TS文件） #

在组件的TypeScript代码里，把表头内容拆分为带样式标签的结构，方便单独控制数字和文字的样式：

import { Component } from '@angular/core';

@Component({
  selector: 'app-tab-demo',
  templateUrl: './tab-demo.component.html',
  styleUrls: ['./tab-demo.component.css']
})
export class TabDemoComponent {
  // 表头数组，按需定义多个项
  headerText: any[] = [
    { text: '<span class="tab-number">1</span> <span class="tab-label">设置基础信息</span>' },
    { text: '<span class="tab-number">2</span> <span class="tab-label">分配角色</span>' }
  ];
}

步骤2：编写模板代码（HTML文件） #

参考你提供的结构绑定表头数据，同时给Tab组件开启HTML支持（避免标签被转义）：

<ejs-tab enableHtmlSanitizer="false">
  <e-tabitems>
    <e-tabitem [header]='headerText[0]'>
      <ng-template #content>
        <div id='basic-info'>
          <p>设置基础信息内容</p>
        </div>
      </ng-template>
    </e-tabitem>
    <e-tabitem [header]='headerText[1]'>
      <ng-template #content>
        <div id='roles'>
          <p>分配角色内容</p>
        </div>
      </ng-template>
    </e-tabitem>
  </e-tabitems>
</ejs-tab>

步骤3：添加自定义样式（CSS文件） #

在组件样式文件里，给数字设置蓝色圆形样式，文字保持黑色：

/* 表头数字的蓝色圆形样式 */
.tab-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #165DFF; /* 可按需调整蓝色色调 */
  color: #ffffff; /* 数字用白色，和蓝色背景对比更清晰 */
  margin-right: 8px;
  font-size: 14px;
}

/* 表头文字的黑色样式 */
.tab-label {
  color: #000000;
  font-size: 14px;
}

说明 #

• enableHtmlSanitizer="false"是关键，否则Syncfusion会自动转义表头里的HTML标签，导致样式不生效
• 可根据需求调整圆形尺寸、蓝色色值、文字大小等参数

内容的提问来源于stack exchange，提问作者Ayush shrivastava