角材垂直步进器，标签和内容部分分开

时间：2019-01-25 07:32:47

标签： css angular angular-material

enter image description here

如果我添加此CSS：

x = 22

CASE x
  WHEN 0..14 THEN puts "#{x} is less than 15"    
  WHEN 15 THEN puts "#{x} equals 15" 
  WHEN 15 THEN puts "#{x} equals 15" 
  WHEN 15..20 THEN puts "#{x} is greater than 15" 
  ELSE puts "Not in the range, value #{x} " 
END

我正在尝试让this stepper工作。

我为垂直步进器使用了角材料设计。如何像示例here那样在左侧使步进器标题在内容的右侧。

还是有任何模块？

4 个答案:

答案 0 :(得分：1)

enter image description here在flex属性下面将其应用于您的mat-step-header，该操作只会将标题向右对齐

mat-step-header{
  display: flex ;
  justify-content: flex-end ;
}

答案 1 :(得分：0)

最后，我实现了我的设计。希望这对任何人都有用。

HTML： 

<mat-vertical-stepper #stepper [@.disabled]="true">
  <mat-step label="Step 1">
      <h2> Step 1</h2>
      <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
    </mat-step>
  <mat-step label="Step 2">
    Step 2
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>
  <mat-step label="Step 3">
    Step 3
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>
  <mat-step label="Step 4">
    Step 4
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
    </mat-step>
    <mat-step label="Step 5">
    Step 5
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
    </mat-step>

    <mat-step label="Step 6">
    Step 6
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
    </mat-step>

</mat-vertical-stepper>
<div >
  <ul>
  <li class="mytest" [ngClass]="{'active': stepper.selectedIndex == 0}"><a (click)="move(0)">Label 1</a></li>
  <li class="mytest" [ngClass]="{'active': stepper.selectedIndex == 1}"><a (click)="move(1)">Label 2</a></li>
  <li class="mytest" [ngClass]="{'active': stepper.selectedIndex == 2}"><a (click)="move(2)">Label 3</a></li>
  <li class="mytest" [ngClass]="{'active': stepper.selectedIndex == 3}"><a (click)="move(3)">Label 4</a></li>
  <li class="mytest" [ngClass]="{'active': stepper.selectedIndex == 4}"><a (click)="move(4)">Label 5</a></li>
  <li class="mytest" [ngClass]="{'active': stepper.selectedIndex == 5}"><a (click)="move(5)">Label 6</a></li>
</ul>
</div>

TS： 

import { Component, OnInit, ViewChild } from '@angular/core';
import {MatStepper} from '@angular/material';

export class implements OnInit {
  isLinear = false;

  @ViewChild('stepper') stepper: MatStepper;

  constructor(private _formBuilder: FormBuilder) {}
   ngOnInit() {
   }
    move(index: number) {
    this.stepper.selectedIndex = index;
  }
}

仅此而已。

使用于：https://stackblitz.com/edit/angular-demo-matstepper-move?file=app%2Fdemo%2Fdemo.component.html

答案 2 :(得分：0)

上述解决方案对我来说稍加修改即可。我使用了垫侧导航和垫步进来实现以下设计。 enter image description here

您还一定想知道标题在哪里，我通过在styles.css中添加此CSS来删除了标题 

.mat-horizontal-stepper-header-container {
    white-space: nowrap;
    display: none !important;
    align-items: center;
  }

使用以下HTML代码通过上述解决方案实现此设计。

<mat-sidenav-container class="example-container">
    <mat-sidenav #sidenav mode="side" opened class="example-sidenav" [fixedInViewport]="options.value.fixed"
        [fixedTopGap]="options.value.top">
        <mat-nav-list>
            <a mat-list-item (click)="move(0)">Contract Essential Details</a>
            <a mat-list-item (click)="move(1)">Terms and conditions</a>
            <a mat-list-item (click)="move(2)">Lines</a>
            <a mat-list-item (click)="move(3)">Commitments</a>
            <a mat-list-item (click)="move(4)">Assets</a>
            <a mat-list-item (click)="move(5)">License</a>
            <a mat-list-item (click)="move(6)">Consumption Chart</a>
            <a mat-list-item (click)="move(7)">Renewal</a>
            <a mat-list-item (click)="move(8)">Artifacts</a>
            <a mat-list-item (click)="move(9)">Version Control</a>
        </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content>
        <mat-horizontal-stepper #stepper [@.disabled]="true">
            <mat-step>
                <div>
                    <button mat-raised-button (click)="stepper.reset()" style="float: right;">Reset</button>
                    <button  mat-raised-button matStepperNext style="float: right;">Next</button>
                </div>
                <h2 mat-dialog-title id="u1469">Contract Essential Details</h2>
                <div id="u1475">10% Complete
                </div>
                <div style="width: 182px;">
                    <mat-progress-bar value=10></mat-progress-bar>
                </div>

             

            </mat-step>
            <mat-step>
                <div>
                    <button  mat-raised-button matStepperPrevious style="float: right;">Back</button>
                    <button  mat-raised-button matStepperNext style="float: right;">Next</button>
                </div>
                <h2 mat-dialog-title id="u1469">Terms and conditions</h2>
                <div id="u1475">20% Complete
                </div>
                <div style="width: 182px;">
                    <mat-progress-bar value=20></mat-progress-bar>
                </div>
               
            </mat-step>
            <mat-step [stepControl]="firstFormGroup">
                <div>
                    <button mat-raised-button matStepperPrevious style="float: right;">Back</button>
                    <button  mat-raised-button matStepperNext style="float: right;">Next</button>
                </div>
                <h2 mat-dialog-title id="u1469">Lines</h2>
                <div id="u1475">30% Complete
                </div>
                <div style="width: 182px;">
                    <mat-progress-bar value=30></mat-progress-bar>
                </div>
                
                
            </mat-step>
            <mat-step [stepControl]="secondFormGroup">
                <div>
                    <button  mat-raised-button matStepperPrevious style="float: right;">Back</button>
                    <button  mat-raised-button matStepperNext style="float: right;">Next</button>
                </div>
                <h2 mat-dialog-title id="u1469">Contract Commitments</h2>
                <div id="u1475">40% Complete
                </div>
                <div style="width: 182px;">
                    <mat-progress-bar value=40></mat-progress-bar>
                </div>
                
               
            </mat-step>
            <mat-step>
                <div>
                    <button  mat-raised-button matStepperPrevious style="float: right;">Back</button>
                    <button  mat-raised-button matStepperNext style="float: right;">Next</button>
                </div>
                <h2 mat-dialog-title id="u1469">Assets</h2>
                <div id="u1475">50% Complete
                </div>
                <div style="width: 182px;">
                    <mat-progress-bar value=50></mat-progress-bar>
                </div>
                
            </mat-step>

            <mat-step>
                <div>
                    <button  mat-raised-button matStepperPrevious style="float: right;">Back</button>
                    <button  mat-raised-button matStepperNext style="float: right;">Next</button>
                </div>
                <h2 mat-dialog-title id="u1469">License</h2>
                <div id="u1475">60% Complete
                </div>
                <div style="width: 182px;">
                    <mat-progress-bar value=60></mat-progress-bar>
                </div>
                
            </mat-step>
            <mat-step>
                <div>
                    <button mat-raised-button matStepperPrevious style="float: right;">Back</button>
                    <button mat-raised-button matStepperNext style="float: right;">Next</button>
                </div>
                <h2 mat-dialog-title id="u1469">Consumption Chart</h2>
                <div id="u1475">70% Complete
                </div>
                <div style="width: 182px;">
                    <mat-progress-bar value=70></mat-progress-bar>
                </div>
               
            </mat-step>
            <mat-step>
                <div>
                    <button  mat-raised-button matStepperPrevious style="float: right;">Back</button>
                    <button  mat-raised-button matStepperNext style="float: right;">Next</button>
                </div>
                <h2 mat-dialog-title id="u1469">Renewal</h2>
                <div id="u1475">80% Complete
                </div>
                <div style="width: 182px;">
                    <mat-progress-bar value=80></mat-progress-bar>
                </div>
              
            </mat-step>
            <mat-step>
                <div>
                    <button  mat-raised-button matStepperPrevious style="float: right;">Back</button>
                    <button  mat-raised-button matStepperNext style="float: right;">Next</button>

                </div>
                <h2 mat-dialog-title id="u1469">Artifacts</h2>
                <div id="u1475">90% Complete
                </div>
                <div style="width: 182px;">
                    <mat-progress-bar value=90></mat-progress-bar>
                </div>
            </mat-step>
            <mat-step>
                <div>
                    <button  mat-raised-button matStepperPrevious style="float: right;">Back</button>

                </div>
                <h2 mat-dialog-title id="u1469">Version Control</h2>
                <div id="u1475">100% Complete
                </div>
                <div style="width: 182px;">
                    <mat-progress-bar value=100></mat-progress-bar>
                </div>
               
            </mat-step>

        </mat-horizontal-stepper>
    </mat-sidenav-content>
</mat-sidenav-container>

答案 3 :(得分：0)

我和您有同样的需求，我发现了另一个非常简单的解决方案。您可以使用“水平步进器”，然后向 .mat-h​​orizo​​ntal-stepper-header-container 左浮动，向 .mat-h​​orizo​​ntal-content-container 右浮动。 >

相关问题
最新问题