本文实例为大家分享了angular6开发步伐步骤条组件的实现代码,供大家参考,具体内容如下
1.先展示步骤条效果
2.使用有角的命令快速创建组件
天然气成分/步骤创建的组件在成分文件夹下面
打开steps.component.ts文件,可以看到选择器的值是应用程序步骤
从“@棱角分明/核心”导入{组件,在初始化时};@ Component({选择器: ' app-steps ',模板Url: ' ./steps.component.html ',style URL 3360[]./steps.component.css']})导出类步骤组件实现了在init { constructor(){ } ngOnInit(){ } } 3上.代码
steps.component.html
div class=' steps ' ul class=' Lineul ' Li * ngFOr=' let item of steps data;let I=index '[ngClass]=' { ' liWidth ' : I 1==steps data。length } ' div class=' stepsIcon ' div class=' radio selection radio selection disabled '[ngClass]=' { ' radio selection disabled ' : I 1 active } '/div * ngIf=' I 1!=stepsdata。length ' class=' line '[ngClass]=' { ' LineDefaule ' : I 2 active } ' span * Ngif='!项目。提示" { item。tips } }/span/div/div/Li/ul class=' text ' Li * ngFOr=' let item of steps data;let I=index ' div class=' title ' * Ngif='!项目。标题" { item。title } }/div div class=' description ' * NgiF='!项目。描述" { item。描述} }/div/Li/ul/div步骤。组件。分时(同timesharing)
从“@棱角分明/核心”导入{组件,OnInit,Input };//引入输入@组件({选择器: '应用程序步骤',模板Url: ' ./steps.component.html ',style URL 3360[]./steps.component.css']})导出类步骤组件实现在init { @ Input()} steps data : any上;@ Input()活动:字符串;constructor(){ } ngOnInit(){ console。日志(!this.active) if(!这个。主动){这个。active=' 1} }}steps.component.css。steps ul { display : flex } Li { width : 100%;文本对齐:中心;}.lineUl { padd : 0px 10%;边距-底部: 5px}.liWidth { width: 20px}。stepsIcon { display: flex}。辐射选择{箱式:边框-盒子;显示器:内联块;边界半径: 100%;border: 1px固体# 26 a2 ff相对位置:宽度: 20px高度: 20像素垂直对齐: 中间;背景色: # 26 a2 ff} .{边界: 2px后的无线电电气:实心透明;边框-左侧: 0;边框-top : 0;内容: " ";top: 3pxleft: 6px绝对位置:宽度: 4px高度: 8px边框颜色: # fff-webkit-transform:旋转(45度)刻度(1);变压器:旋转(45度)刻度(1);-web套件-transit :-web套件-transit 0.2s;transit :-web套件-transform 0.2s;过渡:变换0.2stransition: transform 0.2s,-web kit-transform 0.2s;}.radio electricaldisabled {底色: # d9d 9;边框颜色: # CCC}.第{显示:行块;flex : 1;高度: 16pxborder-底部: 1px实心# 26 a2 ff边距-top :-5px;font-size : 12px颜色: # 26 a2 ff}.lineDefaule {边框-底部: 1px实心# d9d 9;}.title { font-size : 14px}.描述{ font-size : 12px}4在项目中引用创建的组件
app-steps[steps data]=' steps data '[active]=' 3 '/app-steps public steps data : ANy=[{ title : '步骤1 ',描述: '描述文件},{ title: '步骤2 ',描述: '描述文件},{ title: '步骤3 ',描述: '描述文件,tips: '待开奖},{ title: '步骤4 ',描述: '描述文件' } ];//stepsData:步骤条参数//活动:设置当前激活步骤,默认为一以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。