时间戳

首页 > 解决方案 > 手风琴组件标题中的操作

ngx-admin - 手风琴组件标题中的操作

问题描述

我想在手风琴组件的标题中添加操作。唯一的问题是，如果您单击该操作，手风琴将在折叠和展开之间进行更改。

例子：

<nb-accordion>
  <nb-accordion-item #primaryItem expanded="true">
    <nb-accordion-item-header>
      Dashboard
      <nb-actions size="small">
        <nb-action icon="search">Search</nb-action>
        <nb-action icon="star"></nb-action>
        <nb-action icon="star" status="warning"></nb-action>
      </nb-actions>
    </nb-accordion-item-header>
    <nb-accordion-item-body>
      item content
    </nb-accordion-item-body>
  </nb-accordion-item>
</nb-accordion>

看起来像这样： 在此处输入图像描述

我可以在 api 中看到有一个collapsedChange事件，但这会在更改后发出。

我在这里不走运吗？有没有办法拦截和取消崩溃事件？

提前致谢

标签： ngx-admin

解决方案

所以看来我是唯一一个在寻找这个的人。所以我建立了自己的定制卡来提供我想要的功能。你可以把它用在你自己的 Angular 项目中。它是带有页眉和页脚部分以及用于添加操作的部分的可折叠卡片。

汽车部件：

<nb-card accent="{{accentColor}}" status="{{statusColor}}">
  <nb-card-header>
    <span class="float-left card-title">
      <ng-content select="[slot=title]"></ng-content>
    </span>
    <nb-actions size="small" class="float-right">
      <nb-action><button type="button" status="basic" nbButton size="small" (click)="toggleExpand()">
          <nb-icon icon="{{expandedIcon}}"></nb-icon>{{ expandedText }}
        </button></nb-action>
      <!-- icon="{{expandedIcon}}" -->
    </nb-actions>
    <span class="float-right" *ngIf="hasActions">
      <ng-content select="[slot=actions]"></ng-content>
    </span>
  </nb-card-header>
  <nb-card-body *ngIf="expandedState" class="content-body">
    <ng-content select="[slot=body]"></ng-content>
  </nb-card-body>
  <nb-card-footer *ngIf="expandedState && hasFooter">
    <ng-content select="[slot=footer]"></ng-content>
  </nb-card-footer>
</nb-card>

组件 .ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-content-card',
  templateUrl: './content-card.component.html',
  styleUrls: ['./content-card.component.scss'],
})
export class ContentCardComponent implements OnInit {
  // STATUS OPTIONS: basic, primary, info, success, warning, danger, control
  // ACCENT OPTIONS: basic, primary, info, success, warning, danger, control

  @Input() hasActions: boolean;
  @Input() hasFooter: boolean;
  @Input() accentColor: string;
  @Input() statusColor: string;

  public readonly upIcon = 'arrowhead-up-outline';
  public readonly downIcon = 'arrowhead-down-outline';
  public readonly hideText = 'hide';
  public readonly showText = 'show';

  public expandedState = true;
  public expandedText: string;
  public expandedIcon: string;

  constructor() {}

  ngOnInit() {
    this.expandedIcon = this.upIcon;
    this.expandedText = this.hideText;
  }

  public toggleExpand(): void {
    this.expandedState = !this.expandedState;
    if (this.expandedState) {
      this.expandedIcon = this.upIcon;
      this.expandedText = this.hideText;
    } else {
      this.expandedIcon = this.downIcon;
      this.expandedText = this.showText;
    }
  }
}

组件 .scss

.float-right {
  float: right;
}

.float-left {
  float: left;
}

推荐阅读