angular6开发steps步骤条组件


Posted in Javascript onJuly 04, 2019

本文实例为大家分享了angular6开发steps步骤条组件的实现代码,供大家参考,具体内容如下

1.先展示步骤条效果

angular6开发steps步骤条组件

2.使用angular命令快速创建组件

ng g c component/steps

创建的组件在component文件夹下面

angular6开发steps步骤条组件

打开steps.component.ts文件,可以看到selector的值是app-steps

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

@Component({
 selector: 'app-steps',
 templateUrl: './steps.component.html',
 styleUrls: ['./steps.component.css']
})
export class StepsComponent implements OnInit {
 constructor() { }
 ngOnInit() { }
}

3.代码

steps.component.html

<div class="steps">
 <ul class="lineUl">
  <li *ngFor="let item of stepsData; let i=index" [ngClass]="{'liWidth': i+1 == stepsData.length}">
   <div class="stepsIcon">
    <div class="radioSelect radioSelectDisabled" [ngClass]="{'radioSelectDisabled': i+1>active}"></div>
    <div *ngIf="i+1 != stepsData.length" class="line" [ngClass]="{'lineDefaule': i+2>active}">
     <span *ngIf="!!item.tips">{{item.tips}}</span>
    </div>
   </div>
  </li>
 </ul>

 <ul class="text">
  <li *ngFor="let item of stepsData; let i=index">
    <div class="title" *ngIf="!!item.title">{{item.title}}</div>
    <div class="description" *ngIf="!!item.description">{{item.description}}</div>
  </li>
 </ul>
</div>

steps.component.ts

import { Component, OnInit, Input } from '@angular/core';
//引入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.component.css

.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-sizing: 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在项目中引用创建的组件

<app-steps [stepsData]="stepsData" [active]='3'></app-steps>
public stepsData:any = [
  {
   title:'步骤1',
   description:'描述文件'
  },
  {
   title:'步骤2',
   description:'描述文件'
  },
  {
   title:'步骤3',
   description:'描述文件',
   tips:'待开奖'
  },
  {
   title:'步骤4',
   description:'描述文件'
  }
 ];

//stepsData:步骤条参数
//active:设置当前激活步骤,默认为1

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 Javascript
JavaScript之HTMLCollection接口代码
Apr 27 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
JS刷新当前页面的几种方法总结
Dec 24 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
JavaScript面向对象分层思维全面解析
Nov 22 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
vue实现底部菜单功能
Jul 24 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 Javascript
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
13 个npm 快速开发技巧(推荐)
Jul 04 #Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 #Javascript
解决vue打包后vendor.js文件过大问题
Jul 03 #Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 #Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 #Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 #Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 #jQuery
You might like
php数组总结篇(一)
2008/09/30 PHP
php压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
php之可变函数的实例详解
2017/09/13 PHP
JS date对象的减法处理实现代码
2010/12/28 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
Python 中Pickle库的使用详解
2018/02/24 Python
pandas多级分组实现排序的方法
2018/04/20 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
Python 控制终端输出文字的实例
2019/07/12 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
Python 可视化神器Plotly详解
2020/12/26 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
日本小田急百货官网:Odakyu
2018/07/19 全球购物
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
金融专业大学生自我评价
2014/01/09 职场文书
英语专业个人求职信范文
2014/02/01 职场文书
电焊工工作岗位职责
2014/02/06 职场文书
雷峰塔导游词
2015/02/09 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
中秋节主题班会
2015/08/14 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
MySQL 数据类型详情
2021/11/11 MySQL