在 Angular 应用的标题部分使用 CSS 或 JS 作为 Click-Expandable 文本

Question

我的 Angular 应用程序的主页上有一个部分，其中显示了一些带有标题和大约两行开头内容的故事。我想做的是提供一个 "Expand" 按钮在开头两行的末尾，单击该按钮将导致文本 space 扩展以允许其余部分文本。我还想要它 toggle-able，这样可以通过单击同一个按钮再次最小化文本。

有什么方法可以单独使用 CSS/HTML 来完成吗？或者这最好通过 JavaScript 来完成——或者两者的结合？我还想知道 Angular material 是否有开箱即用的东西来完成这种 UI 处理。也许是扩展面板 (https://material.angular.io/components/expansion/overview) could work? What does Google use for their own click-expandable stories in Google news (https://news.google.com)？

总的来说，我正在寻找一种适用于现代浏览器的优雅、简单的解决方案。另外请注意，这将是动态内容，因此它需要能够通过计算字符数或类似的东西来工作，而不是通过提前将信息分组到不同的 div 元素中。

Answer 1

由于您使用的是 Angular，因此您应该按照 "angular" 的方式执行此操作。

我们将使用 CSS 和 Angular 动画.

Working Example

解释：

我们的组件将被称为 app-card，通过单击其 header，我们将 show/hide 卡片 "body".

的全部内容

card.component.html

<div class="card-container">

  <div class="card-header" (click)="toggleFold()">
    I am the head of the card
  </div>

  <div class="card-body" [@panelState]="folded">
    <ng-content></ng-content>
  </div>

</div>

要注意的关键部分是当我们点击卡片 header 时发生的 toggleFold() 函数，以及绑定我们 [ 的当前状态的 @panelState =60=] 取决于 folded 属性.

card.component.ts

import { Component, OnInit } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css'],
  animations : [
    // Here we are defining what are the states our panel can be in 
    // and the style each state corresponds to.
    trigger('panelState', [
      state('closed', style({ height: '32px', overflow: 'hidden' })),
      state('open', style({ height: '*' })),
      transition('closed <=> open', animate('300ms ease-in-out')),
    ]),
  ],
})
export class CardComponent {
  folded = 'closed';

  // toggleFold function simply changes our folded property
  // between "open" and "closed"
  toggleFold(){
    this.folded = this.folded === 'open' ? 'closed' : 'open';
  }
}

注意：

为了使用 angular 动画，您需要从 "@angular/platform-browser/animations" 导入 "BrowserAnimationsModule"。 =47=] 到你的 app.module.ts

app.module.ts

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppComponent } from './app.component'; import { CardComponent } from './card/card.component'; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, // << ], declarations: [ AppComponent, CardComponent, ], bootstrap: [ AppComponent ] }) export class AppModule { }

在 Angular 应用的标题部分使用 CSS 或 JS 作为 Click-Expandable 文本

Using CSS or JS for Click-Expandable Text on Headlines Section of Angular App

javascript

css

expand

angular-material

angular

Working Example

解释：