j 查询版本
ES6 版本
Web 组件版本
Vue.js 版本
Angular 版本 - 最节省空间的解决方案
特征
- 扩展/缩放节点
- 允许用户通过拖放节点更改 orgchart 结构
- 允许用户编辑 org 图表
- 支持导出图表为图片或 pdf 文档
- 支持平面并缩放
- 允许用户自定义每个节点的内部结构
道具
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| 图表分类 | 字符串 | 用于图 DOM 节点的 Css 类. | |
| 容器分类 | 字符串 | 添加一个可选的额外类名到.orgchart-container 它可能看起来像是类="orgchart-container xxxyyy". | |
| 可折叠 | 布尔 | 真实 | 允许扩展/压缩节点. |
| 数据源 | 对象 | 数据源 used 用于构建 orgchart 的结构. | |
| 可拖动 | 布尔 | 虚假 | 允许将节点拖放到图表的层次. |
| 多个选择 | 布尔 | 虚假 | 如果真实,用户可以通过鼠标点击选择多个节点. |
| 节点模板 | 元素类型 | 一个提供节点内容的组件 Markup. 当您想要使用自己的风格和标记来创建自定义的 Orgchart 节点时,此道具是有用的. | |
| 点击图 | 函数 | 当 Orgchart 点击时, 调用已启动 . | |
| 点击节点 | 函数 | 点出节点时调用. | |
| 平板电脑 | 布尔 | 虚假 | 如果是真的,图表可以被平面. |
| 缩放 | 布尔 | 虚假 | 如果真实,图表可以缩放. |
| 动物保护网 | 编号 | 第7条 | 用户可以以不同的尺度(0.5~7)来放大图表. |
| 缩放范围 | 编号 | 0.5 (韩语) | 用户可以以不同的尺度(0.5~7)来放大图表. |
方法
| 名称 | 说明 |
|---|---|
| 扩展所有节点 | 用户可以使用这种方法来扩展所有节点. 样本代码: orgchart Ref.current.expand AllNodes () |
| 导出为 | 用户可以使用这种方法导出 orgchart 到 png org pdf 文件. 样本代码: orgchart Ref.current.exportTo(文件名,文件扩展名) |
安装
npm install @dabeng/react-orgchart
演示
这个项目是和 创建反应应用。 。 。 .
可用的脚本
在工程目录中,您可以运行:
npm start
在开发模式下运行应用程序.
打开 http://localhost:3:00 (英语) 在浏览器中查看.
如果您做了编辑, 页面会重新装入 .
您也会看到控制台上的任何错误 .
npm test
启动交互式监视模式下的测试跑取器.
见关于 运行中的测试 更多信息.
npm run build
构建用于制作的应用程序 build 文件夹.
它正确地捆绑了React在生产模式中,并优化了构件以达到最佳性能.
构件被精密化,文件名包括散列.
你的应用程序准备就绪!
见关于 部署 更多信息.
npm run eject
注:这是单向操作. 曾经 eject你们不能回去!
如果您对构建工具和配置选择不满意, 你可以 eject 在任何时间。 此命令将会从您的工程中删除单个构建依赖 .
相反,它会将所有配置文件和过渡依赖(Webpack, Babel, ESLint等)复制到您的项目中, 这样你就可以完全控制它们. 所有的命令,除了 eject 但是他们会指向复制的脚本 这样你就可以修改它们 这时候你只能靠自己了.
你永远不用用 eject。 配置的功能集适合中小型部署, 你不应该觉得有义务使用这个功能。 但是,我们明白,如果你在准备使用时不能定制这个工具,这个工具将毫无用处.
学习更多
你可以多学点 创建 App 文档。 。 。 .
学回放,看看 反应文档。 。 。 .
代码分割
本节移于此: https://facebook.github.io/create-react-app/docs/code-splition 页面存档备份,存于互联网档案馆
分析套装大小
本节移于此: https://facebook.github.io/create-react-app/docs/analysis-the-bundle-size 页面存档备份,存于互联网档案馆
制作渐进网络应用程序
本节移于此: 页:1
高级配置
本节移于此: https://facebook.github.io/create-react-app/docs/advanced-confignation 页面存档备份,存于互联网档案馆
部署
本节移于此: https://facebook.github.io/create-react-app/docs/ 部署