轻松自定义一个相应式的timeline时间线组件（横向和纵向）

2019年8月24日 649次阅读 来源: iflve18

1、先来看看结果
《轻松自定义一个相应式的timeline时间线组件（横向和纵向）》

2、申明
项目中用到的，思绪很简朴，就用flex规划来完成相应式，我这里就以横向为例（竖向的比较简朴就不烦琐了），背面须要增添单个点选中状况，增加笔墨以及触发种种动画结果，能够尝试加上去，合营vue等框架能够很轻易开发成通用组件。关于更多奇妙的组件封装，迎接到场QQ群，配合议论点此到场，或许438863673

3、上代码

<!--html代码--/>
 <div class="container">
        <div style="display:flex;">
            <div style="flex:1;display:flex">
                <div style="flex:1"></div>
                <div class="dot"></div>
                <div class="item"></div>
            </div>
            <div style="flex:1;display:flex">
                <div class="item"></div>
                <div class="dot"></div>
                <div class="item"></div>
            </div>
            <div style="flex:1;display:flex">
                <div class="item"></div>
                <div class="dot"></div>
                <div class="item"></div>
            </div>
            <div style="flex:1;display:flex">
                <div class="item"></div>
                <div class="dot"></div>
                <div style="flex:1;"></div>
            </div>
        </div>
    </div>

css也很简朴

<style>
        .container{
            width: 200px;
            height: 200px;
            border:1px solid red;
        }
        .dot{
            border:2px solid #007Aff;
            width: 5px;
            height: 5px;
            border-radius: 5px;
            background: white;
            margin: auto;
            margin-bottom: -4px;
        }
        .item{
            flex:1;
            border-bottom:1px solid #D84C29;
        }
    </style>

4、总结
是否是够简朴的? 就用了一下相对定位和弹性规划，屏幕大小都能一般显现。

    原文作者：iflve18
    原文地址: https://segmentfault.com/a/1190000013860878
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞