如何在固定高度Div中实现「查看更多」按钮（Angular+Angular Material+Sass）

核心实现思路 #

针对柱状图这类容器级内容，核心是通过控制容器高度配合过渡动画实现折叠/展开，结合Angular的状态绑定与Angular Material组件完成交互，比纯文本方案更通用。

步骤1：Angular模板结构 #

用属性绑定控制容器高度，搭配Material按钮触发状态切换：

<!-- 柱状图容器 -->
<div class="chart-container" [style.height]="isExpanded ? 'auto' : '200px'">
  <!-- 你的柱状图组件 -->
  <app-bar-chart></app-bar-chart>
</div>

<!-- 切换按钮 -->
<button mat-button (click)="isExpanded = !isExpanded" class="toggle-btn">
  {{ isExpanded ? '收起' : '查看更多' }}
</button>

步骤2：Sass样式处理 #

添加平滑过渡效果，处理容器溢出：

.chart-container {
  overflow: hidden;
  transition: height 0.3s ease;
  // 默认折叠高度可按需调整
  height: 200px;
}

.toggle-btn {
  margin-top: 12px;
  color: #1976d2; // 适配Material主题色，可自定义
}

步骤3：组件逻辑 #

在组件类中定义状态变量：

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

@Component({
  selector: 'app-chart-wrapper',
  templateUrl: './chart-wrapper.component.html',
  styleUrls: ['./chart-wrapper.component.scss']
})
export class ChartWrapperComponent {
  isExpanded = false;
}

进阶优化（可选） #

• 动态计算折叠高度：通过ViewChild获取容器元素，初始化时自动计算显示部分内容的高度并赋值，适配不同内容长度。
• 增强动画效果：结合@angular/animations模块，添加淡入淡出等动画，让过渡更自然。
• 响应式适配：用Sass媒体查询在不同屏幕尺寸下调整折叠高度：

@media (max-width: 768px) {
  .chart-container {
    height: 150px;
  }
}

搜索关键词建议 #

• Angular Material expand collapse container
• Angular toggle container height with animation
• Sass transition height auto
• Angular viewchild calculate element height

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