OrgChart页面模仿编程简单记录

最新推荐文章于 2024-08-08 08:28:51 发布

atwillll

最新推荐文章于 2024-08-08 08:28:51 发布

阅读量409

点赞数

本文链接：https://blog.csdn.net/m0_56632971/article/details/118732490

版权

这篇博客记录了创建交互式OrgChart页面的过程，包括导航栏设计、各功能页面实现，如Default-Chart、Pan&Zoom Chart、Custom Node Chart、Export Chart、Drag&Drop Chart和Edit Node。使用了@dabeng/react-orgchart组件，实现了节点的自定义、缩放、拖放编辑等功能，并详细描述了编辑和导出图表的操作流程。

摘要由CSDN通过智能技术生成

OrgChart页面模仿编程简单记录

导航栏

整体来看，导航栏设计的还是比较简洁，顶部有8个导航模块，每个模块点击后会跳转到相应模块页面。可以使用在App.js页面中使用<Router> <Navlink>来实现。

<Router>  
  <nav>  
   <Navlink>Home</Navlink>  
  </nav>  
</Router>

样式首先是被选择后改变背景颜色，<Navlink> 中有activeclassName 可以改变被选择后的样式。在css中将背景颜色改为白色即可。

<NavLink to="/" exact activeClassName="selected">  
        Home  
      </NavLink>

当鼠标经过时也会进行背景颜色的改变。可以在样式文件中在<nav> 标签中添加hover 来改变背景颜色。

nav a:hover {
background-color: #fff;
color: #000;
}

home页面

主页面为svg格式，为可缩放的矢量图形。通过以下代码实现。

<svg width="860" height="240" xmlns="http://www.w3.org/2000/svg">
      <g>
        <text
          stroke="#b80036"
          transform="matrix(1.2821781635284424,0,0,1.313725471496582,-94.81186294555664,-18.196077346801758) "
          fill="#b80036"
          strokeWidth="3"
          strokeDasharray="null"
          strokeLinejoin="null"
          strokeLinecap="null"
          x="524.741312"
          y="134.910448"
          id="svg_4"
          fontSize="92"
          fontFamily="Sans-serif"
          textAnchor="middle"
          fontWeight="bold"
        >
          OrgChart
        </text>
        <g id="svg_5" stroke="null">
          <rect