json- 查看器
json- 查看器 是一款基于JavaScript的现代JSON数据可视化工具,由包括Web组件和Shadow DOM在内的尖端网络技术所设计. 这个多功能工具授权您在您的网页浏览器中以优雅和有吸引力的方式呈现JSON数据. 它非常适合用于独立的网络应用,并与React等通俗框架无缝地融合.
这个项目的包装大小约为 37.9KB (韩语) 已修改( n)12.4KB 击出) (中文(简体) ). 请注意,大约有三分之一的这种规模是专门用于46个预先确定的主题,从而可以进行丰富的视觉定制.
演示
为了现场展示 json- 查看器请来看我们 演示。 。 。 .
受到反应的启发- Json-view
json- 查看器 受到功能和方便用户的启发 反应- json- 视图然而,我们的任务是使这个功能丰富的可视化工具超越反应的范围。 我们从反应-Json-观点中 采纳了最好的想法 json- 查看器 以迎合更广泛的受众.
特征
- JSON数据时髦可视化.
- 支持浏览器和React应用程序中的用法.
- 利用Web组件和Shadow DOM等现代网络技术.
- 便于融入现有项目.
- 自定义的演示文稿和配置 .
安装
无
你可以轻松地安装 json- 查看器 使用 npm 的软件包,其命令如下:
npm install @andypf/json-viewer
接下来, 把它纳入您的项目中 :
import "@andypf/json-viewer"
现在,你准备在您的网络应用程序中将其作为自定义的 HTML 标记:
<andypf-json-viewer data='{"test": "Hello World"}'></andypf-json-viewer>
浏览器集成
用于 json- 查看器 在您的 Web 应用程序中, 加载 json-viewer.js 并嵌入您选择的 HTML 元素中的 JSON 对象并初始化 json- 查看器 内容如下:
<!doctype html>
<html>
<head>
<script src="https://pfau-software.de/json-viewer/dist/iife/index.js"></script>
</head>
<body>
<andypf-json-viewer>{"name": "Helmut"}</andypf-json-viewer>
</body>
</html>
使用量
作为 HTML 元素
要在您的 HTML 中包含“ json- Viewer” 元素, 您可以通过选项作为属性 :
<andypf-json-viewer
indent="2"
expanded="true"
theme="default-light"
show-data-types="true"
show-toolbar="false"
expand-icon-type="arrow"
show-copy="true"
show-size="true"
expand-empty="false"
data='{"example": "data"}'
></andypf-json-viewer>
您也可以提供 data 选项作为“json-viewer”元素的内容:
<andypf-json-viewer
indent="2"
expanded="true"
theme="default-light"
show-data-types="true"
show-toolbar="false"
expand-icon-type="square"
show-copy="true"
show-size="true"
>
{ "string": "this is a test ...", "integer": 42, "array":[ 1, 2, 3, "test", "NaN"], "float":3.14159,
"string_number":"1234", "date": "Tue, Oct 17, 2023, 08:58 AM" }
</andypf-json-viewer>
您也可以为 JSON 文件提供URL 作为“ 数据 ” :
<andypf-json-viewer
data="https://microsoftedge.github.io/Demos/json-dummy-data/64KB.json"
theme="monokai"
expanded="2"
show-toolbar="true"
></andypf-json-viewer>
使用 JavaScript API
如果您喜欢 JavaScript, 您可以在程序上设置选项 :
const jsonViewer = document.createElement("andypf-json-viewer")
jsonViewer.id = "json"
jsonViewer.expanded = 2
jsonViewer.indent = 2
jsonViewer.showDataTypes = true
jsonViewer.theme = "monokai"
jsonViewer.showToolbar = true
jsonViewer.showSize = true
jsonViewer.showCopy = true
jsonViewer.expandIconType = "square"
jsonViewer.expandEmpty = false
jsonViewer.data = { example: "data" }
与反应合并
json- 查看器 也可以在您的 React 应用程序中作为 React 组件.
import React from "react"
import JsonViewer from "@andypf/json-viewer/dist/esm/react/JsonViewer"
// use the component in your app!
const MyComponent = () => <JsonViewer data={jsonObject} />
或者,如果你更喜欢一种更定制的方法:
import React from "react"
import "@andypf/json-viewer"
const JsonViewer = ({ data, ...props }) => {
const ref = React.useRef(null)
React.useEffect(() => {
if (ref.current) {
ref.current.data = data
}
}, [data])
return <andypf-json-viewer ref={ref} {...props} />
}
export default JsonViewer
选项
| 选项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
indent | 数目 | 2个 | 渲染 JSON 数据时用于缩进的空格数 . |
expanded | 数字或布尔 | 1个 | JSON数据被扩展到的初始深度. 也可以设置为 true 充分扩展数据,或 false 来摧毁它. |
theme | 字符串或 JSON 对象 | "默认灯" | 用于塑造JSON取景器的主题. 您可以提供自定义 CSS 变量的 JSON 对象 。 还有很多 预定义的主题 |
showDataTypes (单位:千美元)show-data-types(中文(简体) ) | 布尔 | 真实 | 是否在数值旁显示数据类型(例如“字符串”、“数字”等). |
showToolbar (单位:千美元)show-toolbar(中文(简体) ) | 布尔 | 虚假 | 是否以扩展和缩进选项及搜索栏显示工具栏 . |
expandIconType (单位:千美元)expand-icon-type(中文(简体) ) | 字符串 | "地道","地道" | 用于扩展和倒塌JSON节点的图标类型. 你可以选择"平方","圆"或"狭". |
showCopy (单位:千美元)show-copy(中文(简体) ) | 布尔 | 真实 | 是否显示复制按钮将 JSON 数据复制到剪贴板 . |
copyWithKey (单位:千美元)copy-with-key(中文(简体) ) | 布尔 | 虚假 | 是否同时复制密钥和值( E)"key": value)或只是单击复制按钮时的值。 何时 false (default),仅复制该值以进行后向兼容. |
showSize (单位:千美元)show-size(中文(简体) ) | 布尔 | 真实 | 是否显示 JSON 数据的大小( 字符数) . |
expandEmpty (单位:千美元)expand-empty(中文(简体) ) | 布尔 | 真实 | 是否自动扩展空对象和数组 。 何时 false中,无论何时 expanded 级别,但仍可手动扩展. |
preserveExpanded (单位:千美元)preserve-expanded(中文(简体) ) | 布尔 | 虚假 | 数据更新时是否保留节点的扩展/缩合状态 . |
data | 字符串 JSON 或 URL 字符串 | (未说明) | JSON数据要可视化. 您可以以字符串 JSON 或 URL 字符串提供 。 或者,您可以通过API作为对象或标记内的内容传递数据. |
工具栏函数
如果启用工具栏,用户可以访问以下功能:
- 重置:恢复原视图.
- 扩展: 将所有级别都扩大一个(+1) .
- 折叠:将所有级别折叠为一(-1).
- 缩进:将缩进水平增加一(+1).
- 缩进:将缩入水平减少一(-1).
- 搜索:搜索JSON内部的特定元素.
主题
“主题”选项允许您从各种主题中选择:
- 冷漠
- 月光灯
- 餐厅
- 地图集
- 铃声
- 黑金属
- 酿酒厂
- 亮点
- 布鲁克
- 黑树树
- 刷子树
- 粉笔
- 马戏团
- 经典黑暗
- 经典光线
- 密码学校
- 纸杯蛋糕
- 库珀蒂诺
- 达鲁花
- 暗齿
- 默认黑暗
- 默认亮度
- 德拉库拉
- 八十岁
- 木头
- 平顶
- 水果苏打
- gi
- 谷歌- 暗边
- 发光
- 灰度- 暗色
- 灰度光线
- 绿色屏幕
- 粗鲁-黑暗-硬
- 粗发-发光-硬
- 口琴暗号
- 口琴灯
- 高电光
- 堆积
- 太阳平面
- 跳伞
- 地平线暗
- 亚-暗
- 亚光
- 冰冻
- 同位素
- 缩写
- 马拉克什
- 马特里亚
- 材料灯
- 材料
- 黄花
- 墨西哥光线
- 摩卡岛
- 单开
- 诺德
- 海洋
- 单光
- 暗处
- 纸色暗色
- 纸张颜色灯
- 半导体
- 皮克语name
- 弹出
- 栏杆
- 设置i
- 日光暗线
- 日光灯
- 空间宏
- 夏季果实暗色
- 夏果灯
- {\fn黑体\fs20\shad2\2ah82\3ah20\4ah33\fscx95\3ch592001\be1}明晚 {\fn黑体\fs20\shad2\2ah82\3ah20\4ah33\fscx95\3ch592001\be1}明天晚上
- 明天见
- 管子
- 黄昏
- 林地
- zen
自定义
自定义主题自定义
设计具有以下属性的 JSON 对象,以您所喜欢的视觉主题为基础, 其基础颜色在 基础16型请注意,该项目并未采用所有颜色:
base00默认背景base01(单位:千美元)未使用: 更轻的背景(为状态栏、行号及折叠标记保留)base02: NaN类型、无效和未定义的边框和背景base03(单位:千美元)未使用: 注释、隐形、线条加亮base04: 项目大小base05: 默认前景、 Brackets 和 Colonsbase06(单位:千美元)未使用: 光前地 (不常用)base07:钥匙、科隆和Bracketsbase08: NaN 颜色base09: 椭圆和字符串值base0A: 正则表达式和数值base0B: 浮点值base0C编号密钥base0D: 图标、搜索输入、日期base0E:布尔和扩展图标base0F: 整数
这种多功能方法授权您创建一个符合您特定的UI元素要求的特制主题,使您可以自由地微调您的JSON取景器的视觉体验.
示例
<andypf-json-viewer
indent="2"
expanded="true"
show-data-types="true"
show-toolbar="false"
expand-icon-type="arrow"
show-copy="true"
show-size="true"
theme='{"base00": "gray", "base01": "blue", "base02": "yellow", "base03": "orange", "base04": "red", "base05": "#9DA0A2", "base06": "#D2D5D7", "base07": "#F1F2F3", "base08": "#EF5253", "base09": "#E66B2B", "base0A": "#E4B51C", "base0B": "#7CC844", "base0C": "#52CBB0", "base0D": "#33A3DC", "base0E": "#A363D5", "base0F": "gray"}'
>
{"string": "this is a test ...", "integer": 42, "array":[ 1, 2, 3, "test", "NaN"], "float":3.14159,
"string_number":"1234", "date": "Tue, Oct 17, 2023, 08:58 AM"}
</andypf-json-viewer>
许可证
这个项目根据麻省理工学院许可证颁发——见 自由主义 详细文件.