angular6开发steps步骤条组件
前端  /  管理员 发布于 3年前   642
本文实例为大家分享了angular6开发steps步骤条组件的实现代码,供大家参考,具体内容如下
1.先展示步骤条效果
2.使用angular命令快速创建组件
ng g c component/steps
创建的组件在component文件夹下面
打开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
active}">active}"> {{item.tips}}
{{item.title}}{{item.description}}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在项目中引用创建的组件
public stepsData:any = [ { title:'步骤1', description:'描述文件' }, { title:'步骤2', description:'描述文件' }, { title:'步骤3', description:'描述文件', tips:'待开奖' }, { title:'步骤4', description:'描述文件' } ];//stepsData:步骤条参数//active:设置当前激活步骤,默认为1以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
- Angular实现的进度条功能示例
- AngularJS实现进度条功能示例
- Spring Boot+AngularJS+BootStrap实现进度条示例代码
Top
- 相关文章
- 使用 Alpine.js 排序插件对元素进行排序(0个评论)
- 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
- 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
- 使用mock-server实现模拟接口对接流程步骤(0个评论)
- vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
- 近期文章
- 使用 Alpine.js 排序插件对元素进行排序(0个评论)
- 2024/4/28最新免费公益节点SSR/V2ray/Shadowrocket/Clash节点分享|科学上网|免费梯子(0个评论)
- Laravel 11.5版本发布-匿名事件广播(0个评论)
- Windows 10的告别:2025年10月14日,一段时代的终结(0个评论)
- windows10系统种go + gin项目编译打包及部署至线上Ubuntu服务器中(0个评论)
- Property Hooks RFC在PHP 8.4中越来越接近现实(0个评论)
- 在Laravel 11.4测试中断言异常(0个评论)
- Laravel 11.4版本发布(0个评论)
- 在laravel框架中使用Laravel Stripe Connect包实现与Stripe Connect集成示例(0个评论)
- 在go语言种实现为加密添加数据和为解密取消添加数据示例(0个评论)
- 近期评论
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..
Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号