Question

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

我按照角度材料网站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>

同样的打字稿代码是

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

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

Answer 1

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

在您的 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>

将样式添加到您的 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 */
}

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

1 个答案: