Angular中如何自定义KendoUI PanelBar仅点击箭头触发折叠

实现思路 #

• 禁用PanelBar默认的点击标题全域触发展开折叠的行为
• 自定义面板标题模板，仅为箭头图标绑定展开/折叠的切换事件
• 通过组件内部状态手动控制面板项的expanded属性

完整代码实现 #

1. 组件模板代码 #

<div class="panelbar-wrapper">
  <!-- 禁用默认点击展开行为 -->
  <kendo-panelbar [expandOnClick]="false">
    <kendo-panelbar-item 
      title="PanelBar" 
      [expanded]="isPanelExpanded"
    >
      <!-- 自定义标题模板 -->
      <ng-template kendoPanelBarItemTitle>
        <span class="panel-title">PanelBar</span>
        <!-- 仅给箭头图标绑定点击切换事件 -->
        <span 
          class="k-icon k-i-arrow-chevron-down expand-icon"
          (click)="isPanelExpanded = !isPanelExpanded"
        ></span>
      </ng-template>
      <ng-template kendoPanelBarContent>
        <span>Item1</span>
      </ng-template>
    </kendo-panelbar-item>
  </kendo-panelbar>
</div>

2. 组件TS代码 #

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 控制面板展开状态的变量
  isPanelExpanded: boolean = true;
}

3. 可选样式调整 #

如果需要调整箭头的位置、交互效果，可以添加以下CSS：

.expand-icon {
  margin-left: 8px;
  cursor: pointer;
}
.panel-title {
  margin-right: auto;
}

多面板项场景适配 #

如果页面存在多个PanelBar项，可以用数组存储每个项的展开状态，示例如下：

// TS中定义状态和切换方法
panelItems = [
  { id: 1, title: '面板1', expanded: true, content: '内容1' },
  { id: 2, title: '面板2', expanded: false, content: '内容2' }
]

toggleExpand(index: number) {
  this.panelItems[index].expanded = !this.panelItems[index].expanded;
}

模板中通过*ngFor循环渲染即可。

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