垂直打开角材扩展面板

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

我按照角度材料网站上所述的基本教程进行操作here https://material.angular.io/components/expansion/examples

这是相同的代码。

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>

相同的打字稿代码是

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

有人知道如何垂直打开上面的扩展面板吗？

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

1. In your 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>  

2. 添加样式到您的CSS:

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

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

/* 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 */
}

如果手风琴应从上到下填充视口，请使用 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 */
}