yazoox
V2EX  ›  React

看到一些树型控件,展开父节点后,父节点和子节点之间,有 dot line 连接,这个是如何实现的?

  •  
  •   yazoox · Aug 5, 2021 · 2363 views
    This topic created in 1771 days ago, the information mentioned may be changed or developed.

    不知道应该放在 css 还是 react (我司开发,主要用的 react )分类里面。

    如图
    Tree.png

    想请教一下,这个 dot-lines (还带转弯的有竖有横),是怎么画出来的?直接通过 css 么?

    谢谢!

    7 replies    2021-08-06 09:20:19 +08:00
    AlphaTr
        1
    AlphaTr  
       Aug 5, 2021
    直接通过 CSS 来实现吧,垂直方向的给展开的父级来添加 :after 伪元素,水平方向的给每个非根子元素添加伪元素
    liyang5945
        2
    liyang5945  
       Aug 5, 2021
    以前用过一个 ztree 的插件是用背景图实现的
    des
        3
    des  
       Aug 5, 2021 via iPhone
    通过多个图形组合,图片或者 css 都行,注意调整间距
    当然你要用 svg 做整一个也不是不行
    jorneyr
        4
    jorneyr  
       Aug 5, 2021   ❤️ 1
    可以参考 http://qtdebug.com/qtbook-qss-subcontrol/#QTreeView 这个的图,比较直观的看到树的样式,每一级的缩进都有 n 个 div 块,对每一个块进行计算得到它要填充什么图案。
    old9
        5
    old9  
       Aug 5, 2021
    写过一个简单的,就是用 :before :after 画 border,结构就是基本的 ul >li > (span + ul)
    yazoox
        6
    yazoox  
    OP
       Aug 5, 2021
    @old9 一定要用 ul > li > span 么?我们的 treeview/item 没有用 ul & li
    old9
        7
    old9  
       Aug 6, 2021
    @yazoox 只是举例描述一下结构,ul li 比较好理解层级关系,具体用什么 tag 无所谓,反正是 css 控制
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1177 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 47ms · UTC 17:57 · PVG 01:57 · LAX 10:57 · JFK 13:57
    ♥ Do have faith in what you're doing.