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 相关文章推荐
Jquery中的层次选择器与find()的区别示例介绍
Feb 20 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
ES6中Class类的静态方法实例小结
Oct 28 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 Javascript
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警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
python使用递归解决全排列数字示例
2014/02/11 Python
python实现的解析crontab配置文件代码
2014/06/30 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
python入门之井字棋小游戏
2020/03/05 Python
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
高中运动会广播稿
2014/01/21 职场文书
读书月活动方案
2014/05/22 职场文书
助理政工师申报材料
2014/06/03 职场文书
新学期开学标语
2014/06/30 职场文书
2014年材料员工作总结
2014/11/19 职场文书
安徽导游词
2015/02/12 职场文书
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android
Redis主从复制操作和配置详情
2022/09/23 Redis
js 实现验证码输入框示例详解
2022/09/23 Javascript