很久没有写博客了,自从工作忙了就忘了学习新东西,真是越大越懒。

做项目中,需要一个process流程的UI组件,翻遍公司组件和业界框架,都没有满足自适应要求的现成的process组件,只能自己实现。实现的过程中,发现有两个有意思的地方,特此分享出来。

首先看看最后需要的效果:=> 点我查看demo

实现

流程组件中,两个hr构成圆点之间的连接线。

圆点用span 通过 border-raduis: 50%实现。

接下来,第一个难点来了,如何实现 居中 并且 自适应。

自适应的意思是,拉伸浏览器的时候,流程组件也跟着变化长度,并且不变型。那么,我们自然的想到了用百分数设置宽度。

第一张方案:

用 outer 居中, inner平分内部,即每个inner占用 1/7 = 14.2%。内部原点span和文字通过每个inner的text-align:center;居中。

接下来就连接线hr的宽度的计算就成了问题。比如连接线hr的起始位置怎么计算?inner的1/2,也就是1/14=0.071?

第一次inner的1/7就有省略小数点的误差,再一半肯定更有误差,hr的宽度会再乘以2,乘以3,误差会更大,很有可能出现下面的情况:

第二种方案:

要解决节点span长度计算的问题,就必须让其乘以的倍数是精确可计算的。于是:

通过外层outer实现居中,inner+左侧等宽的空白 平分内部宽度,即 1/8=12.5%。

这里又来了另一个问题:如何使下方文字左移自身宽度一半?

父元素设置 text-align: center; ?? 不行,我们的圆点span只能从最左边开始。

自身position: absolute; left: 50%; margin-left: -宽度?不行,自身宽度不知道,变化的。

position: relative; left: -50%?不行,left 百分比是以最近已定位父元素的宽度为参照。

最后解决办法是,增加一层父元素,使父元素宽度为自身宽度。这样left百分比就可以相当于以自身宽度。

最后的效果:

02.06更新

由于是跨部门合作,对方返回的流程状态总是在变,从7个变到5个,从5个变到6个。

7个状态有8个span,这样 1/8 = 12.5

5个是加3个变8,也是12.5。通过margin-left微调。

6个同理,加2变8,通过margin-left微调。

自适应process组件的更多相关文章

  1. 使用Process组件访问本地进程

    实现效果; 知识运用: Process组件的StartInfo属性 //获取或设置要传递给Process的Start方法的属性 public ProcessStartInfo StartInfo {g ...

  2. C#的Process类调用第三方插件实现PDF文件转SWF文件

    在项目开发过程中,有时会需要用到调用第三方程序实现本系统的某一些功能,例如本文中需要使用到的swftools插件,那么如何在程序中使用这个插件,并且该插件是如何将PDF文件转化为SWF文件的呢?接下来 ...

  3. C# - 多线程 之 Process与Thread与ThreadPool

    Process 进程类, // 提供对本地和远程进程的访问,启动/停止本地系统进程 public class Process : Component { public int Id { get; } ...

  4. System.Diagnostics.Process.Star的用法

    System.Diagnostics.Process.Start(); 能做什么呢?它主要有以下几个功能: 1.打开某个链接网址(弹窗). 2.定位打开某个文件目录. 3.打开系统特殊文件夹,如“控制 ...

  5. C# Process.Start()方法详解

    System.Diagnostics.Process.Start(); 能做什么呢?它主要有以下几个功能: 1.打开某个链接网址(弹窗). 2.定位打开某个文件目录. 3.打开系统特殊文件夹,如“控制 ...

  6. Process类

    public bool Process.Start () 启动(或重用)此 Process 组件的 StartInfo 属性指定的进程资源,并将其与该组件关联. public bool Process ...

  7. 详解Bootstrap导航组件

    在bootstrap框架中将导航独立出来成为一个导航组件,根据不同的版本,可以找到相应的源码: LESS:  navs.less SASS:  _navs.scss 标签形导航,也称选项卡导航 标签形 ...

  8. C#使用Process类调用外部程序(转)

    在程序开发中,一个程序经常需要去调用其他的程序,C#中Process类正好提供了这样的功能.它提供对本地和远程进程的访问并使您能够启动和停止本地系统进程.一.启动进程实例 Process myProc ...

  9. C# Process类_进程_应用程序域与上下文之间的关系

    进程(Process)是Windows系统中的一个基本概念,它包含着一个运行程序所需要的资源.进程之间是相对独立的,一个进程无法直接访问另一个进程的数据(除非分布式),一个进程运行的失败也不会影响其他 ...

随机推荐

  1. git命令与协同开发

    一 git命令 1.简单命令 git init # 初始化 (建立git 版本相关文件关系都放这里) git config --global user.email "you@example. ...

  2. 本地连不上远程mysql数据库(1)

    Ubuntu 16.04下开启Mysql 3306端口远程访问   0. 前言 网上看到很多开启Mysql远程访问端口,修改的配置文件我都没有找到. 特意查看了我的Linux版本 $ sudo lsb ...

  3. C#基元类型取值范围对照表

    byte   无符号 8 为整数,值为0-255; sbyte   有符号8位整数,-128~127; short   有符号16位整数,范围在-32768~32767 ushort   无符号16位 ...

  4. linux 查看内存信息,及其他硬件信息 dmidecode命令

    由于想换内存,想看看内存型号.频率,简单搜了下命令 可以用dmidecode 命令查看. dmidecode -t memory 这个命令可以查看内存的几乎所有信息,包括频率 大小等等 另外这个命令强 ...

  5. 抗DDOS攻击

    2016年10月的某天,“半个美国互联网”都瘫痪了,就是因为遭受了DDoS攻击——Twitter.GitHub.Spotify.Airbnb.Etsy等大量站点都因此受到影响.DNS服务提供商Dyn公 ...

  6. 添加一个vue全局守卫,主要用于用户登录时候验证

    //注册一个全局守卫,作用是在路由跳转钱,对路由进行判断,防止未登录用户跳转到其他页面 router.beforeEach((to, from, next) => { let token = l ...

  7. Boostnote:适合程序员的笔记软件【转】

    本文转载自:https://blog.csdn.net/u013553529/article/details/70306899 Boostnote:适合程序员的笔记软件 注意: Boostnote正在 ...

  8. COS-2OS结构和硬件支持

    操作系统(Operating System,简称OS),是电子计算机系统中负责支撑应用程序运行环境以及用户操作环境的系统软件,同时也是计算机系统的核心与基石.它的职责常包括对硬件的直接监管.对各种计算 ...

  9. idea开启springboot的devtools自动热部署功能

    1.先在pom文件中添加下面代码段 <!-- 热部署 --> <dependency> <groupId>org.springframework.boot</ ...

  10. Apache HTTP Server——官网下载

    Windows版 Apache 2.4.x OpenSSL 1.0.2 VC14  ——Apache 2.4.34 x64(注:x64就是64位,x86就是32位) https://www.apach ...