垂直打开角度材料扩展面板

Question

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

我遵循的基本教程的角材网站上描述这里

这是相同的代码。

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 {}

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

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>  

2. 在CSS中添加样式 ：

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

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

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