angular - 垂直打开 Angular Material 扩展面板

Question

我想以垂直模式打开扩展面板(即向右或向左滑动)。

我遵循了 Angular Material 网站上描述的基本教程 here

这是相同的代码。

HTML

<md-expansion-panel>
  <md-expansion-panel-header>
    <md-panel-title>
       Personal data
    </md-panel-title>
   <md-panel-description>
      Type your name and age
   </md-panel-description>
 </md-expansion-panel-header>

<md-form-field>
   <input mdInput placeholder="First name">
 </md-form-field>

 <md-form-field>
    <input mdInput placeholder="Age">
  </md-form-field>
</md-expansion-panel>

相同的 typescript 代码是

import {Component} from '@angular/core';
@Component({
    selector: 'expansion-overview-example',
    templateUrl: 'expansion-overview-example.html',
})
export class ExpansionOverviewExample {}

有谁知道如何垂直打开上面的扩展面板。

Answer 1

您可以通过将面板内容移动到容器并添加一些 CSS 来对其进行调整。

1. 在您的 HTML 中，将您的面板内容添加到具有类 "panel-content" 的额外容器中:

<mat-accordion multi="true">
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Some title
      </mat-panel-title>
      <mat-panel-description>
        Some description
      </mat-panel-description>
    </mat-expansion-panel-header>
    <div class="panel-content">
      <p><strong>Panel Content</strong>If you ask Chuck Norris what time it is, he always says, "Two seconds 'til." After you ask, "Two seconds 'til what?" he roundhouse kicks you in the face, The quickest way to a man's heart is with Chuck Norris' fist Even corn flakes become deadly weapons in the hands of Chuck Norris.</p>
      <p>More content</p>
    </div>
  </mat-expansion-panel>
  ...
</mat-accordion>  

1. 向您的 CSS 添加样式:

CSS 基本上首先旋转整个 Accordion ，然后仅旋转回面板的内容。

由于旋转，定位有点棘手。请注意，如果您想调整 Accordion 的高度，您需要设置宽度。

/* Accordion with height 600px and panel content width of 400px each */
.mat-accordion {
  display: block;
  transform-origin: top left;
  transform: rotate(-90deg) translateX(-600px); /* rotate and position it; translateX value corresponds to panel height */
  width: 600px; /* this will be the height of the accordion (inversed due to rotation) */
}

.mat-expansion-panel {
  max-height: 500px; /* this will be the width of the panel (inversed due to rotation) */
}

.panel-content {
  transform-origin: top left;
  transform: rotate(90deg); /* rotate back */
  margin-left: 100%; /* position it */
  height: 600px; /* real height of the content */
  width: 400px; /* real width of the content */
}

如果 Accordion 应该从上到下填充视口(viewport)，请使用 100vw 和 100vh 而不是像素值，例如

/* Accordion with 3 panels, stretching from top to bottom */
.mat-accordion {
  display: block;
  transform-origin: top left;
  transform: rotate(-90deg) translateX(-100vh); /* rotate and position it; translateX value corresponds to panel height */
  width: 100vh; /* this will be the height of the accordion (inversed due to rotation) */
}

.mat-expansion-panel {
  max-height: calc(100vw / 3); /* this will be the width of the panel (inversed due to rotation), 3 is panel amount */
}

.panel-content {
  background-color: lightblue;
  transform-origin: top left;
  transform: rotate(90deg); /* rotate back */
  margin-left: 100%; /* position it */
  height: 100vw; /* real height of the content */
  width: calc(100vw / 3 - 100px); /* real width of the content, 3 is panel amount */
}