Angular6 Developing Steps Step Components

Example of this article shared the implementation code of Angular6 development STEPS step components for everyone, for your reference, the specific content is as follows

1. First show the effect of steps

angular6开发steps步骤条组件

2. Quickly create component

NG GC Component / Steps
   

Covered Under the Component folder

angular6开发steps步骤条组件
Open the steps.comPonent.ts file, you can see the value of the Selector is app-steps

Import {Component, Oninit} from ‘@ Angular / COMPORE’; @ Component ({Selector: ‘App-Steps’, TemplateURL:’ ./steps.component.html ‘, Styleurls: [‘ ./ Steps.comPonent.css’]}) ONInit {Constructor () {} ngoninit () {} ngoninit () {}}
   
3. Code
Steps.component.html

Active} “>
Active}>
 {{ITEM.TIPS}}  
  • {{{{{{{{{{{ip.describTION}}
Steps.comPonent.ts
  • Import {Component, Oninit, Input} from '@ Angular / Core'; // Input INPUT @Component ({selector: 'app-steps', templateUrl:' ./steps.component.html ', styleUrls: [' ./steps.component.css']})export class StepsComponent implements OnInit {@Input () stepsData : any; @INPUT () Active: string; constructor () {} ngoninit () {Console.log (!! this.active) if (!!! this.active) {this.Active = "1";} }}
.steps ul {display: flex;} li {width: 100%; text-align: center;}. Lineul {padding: 0px 10%; margin-bottom: 5px;}. LiWidth {Width: 20px;}. Stepsicon {Display: flex;}. Radioselect {Box-Siting: Border-Box; Display: Inline-block; border-radius: 100%; Border: 1px Solid # 26a2ff; Position: Relative; Width: 20px; height: 20px; vertical-align: middle; background-color: # 26a2ff;}. Radioselect :: after {Border: 2px solid transparent; border-left: 0; border-top: 0; content: '; TOP : 3px; Left: 6px; Position: absolute; width: 4px; Height: 8px; border-color: #fff; -Webkit-Transform: Rotate (45deg) Scale (1); Transform: Rotate (45deg) Scale (1) ; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s;} radioSelectDisabled {background-color:. # D9D9D9; border-color: #ccc;}. line {DISPLay: Block; Flex: 1; Height: 16px; border-bottom: 1px solid # 26a2ff; margin-top: -5px; font-size: 12px; color: # 26a2ff;}. Linedefaule {border-bottom: 1px solid # D9d9d9;}. Title {font-size: 14px;}. Description {font-size: 12px;}
4 Created components created in the project

   
Public StepsData: Any = [{Title: ‘Step 1’, Description: ‘Description file’}, {title: ‘Step 2’, Description: ‘Description File’}, {Title: ‘Step 3’, Description: ‘Description File’, Tips: ‘Waiting }, {Title: ‘Step 4’, Description: ‘Description File’}]; // StepsData: Step Parameters // Active: Set the current activation step, default is 1

The above is all the content of this article, I hope to help everyone, I hope everyone supports Tumi Cloud.
                     
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment