xiaokun/netease-modsdk-wiki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

搬运一批Bedrock wiki内容，完善翻译

Browse Source
This commit is contained in:
boybook
2025-03-20 00:13:44 +08:00
parent ead7392a76
commit 4896c1a4f2
163 changed files with 33930 additions and 1464 deletions
Download Patch File Download Diff File Expand all files Collapse all files

374
docs/wiki/4-Json-UI/1-基础/json-ui-intro.md
View File

@@ -306,11 +306,13 @@ UI 元素是 JSON UI 的基本组成单元，每个命名空间内的元素名
```
:::
当更改时，派生元素的任何属性都将被完全覆盖。
## 数据绑定
通过 `bindings` 实现数据源与元素的动态关联。
绑定机制用于将硬编码值与界面元素关联，并在处理元素时使用这些值。以下是一个使用硬编码文本的标签示例：
### 简单绑定
`text`属性值设定为`#hardtext`。通过`bindings`配置，我们可以获取硬编码变量`#hardtext`的值，使`text`属性能够正确调用。这种配置直接将`#hardtext`的值赋给`text`属性。
::: code-group
```json [vanilla/ui/example_file.json]
@@ -328,18 +330,18 @@ UI 元素是 JSON UI 的基本组成单元，每个命名空间内的元素名
```
:::
### 重定向绑定
另一种常见的配置形式如下：
::: code-group
```json [vanilla/ui/example_file.json]
{
"label": {
"type": "label",
"text": "#display_text",
"text": "#text",
"bindings": [
{
"binding_name": "#source_data",
"binding_name_override": "#display_text"
"binding_name": "#hardtext",
"binding_name_override": "#text"
}
]
}
@@ -347,18 +349,27 @@ UI 元素是 JSON UI 的基本组成单元，每个命名空间内的元素名
```
:::
### 跨元素绑定
此时，`#hardtext`的值会被赋给`#text`绑定属性，进而传递给`text`属性。
这种机制在`visible`（可见性）和`enabled`（启用状态）属性中尤为常见。以下是一个组合示例：
::: code-group
```json
{
"status_panel": {
"send_button": {
"bindings": [
{
"binding_type": "view",
"source_control_name": "my_toggle",
"source_property_name": "#state",
"target_property_name": "#visible"
"binding_name": "#using_touch",
"binding_name_override": "#visible"
}
]
},
"play_button": {
"bindings": [
{
"binding_name": "#play_button_enabled",
"binding_name_override": "#enabled"
}
]
}
@@ -366,117 +377,70 @@ UI 元素是 JSON UI 的基本组成单元，每个命名空间内的元素名
```
:::
## 条件渲染
此处的`#using_touch`和`#play_button_enabled`存储布尔值。当使用触控设备时，`#using_touch`为`true`，否则为`false`。`#play_button_enabled`用于「添加外部服务器」界面，当所有文本字段（服务器名称、IP地址和端口号）均有内容时才会设为`true`。<br>
因此，`#using_touch`的值会覆盖`#visible`绑定属性（该属性通常通过`property_bag`设置，等同于直接设置`visible`属性），同理`#play_button_enabled`会覆盖`#enabled`的值。
通过变量和绑定实现动态显示控制。
### 变量条件
当需要根据开关状态显示特定面板时，需使用另一种绑定结构。这种配置需要指定数据源元素、源属性及目标属性：
::: code-group
```json [vanilla/ui/hud_screen.json]
```json
{
"hud_actionbar_text/actionbar_message": {
"$atext": "$actionbar_text",
"visible": "(not ($atext = 'hello world'))"
}
}
```
:::
### 工厂条件
::: code-group
```json [vanilla/ui/hud_screen.json]
{
"conditional_image": {
"type": "image",
"texture": "textures/ui/Black",
"$atext": "$actionbar_text",
"visible": "($atext = 'show_image')"
"panel": {
...
"bindings": [
{
"binding_type": "view",
"source_control_name": "my_toggle", // 源元素名称
"source_property_name": "#toggle_state", // 需要获取的开关状态属性
"target_property_name": "#visible" // 待覆盖的目标属性
}
]
},
"image_factory": {
"type": "panel",
"factory": {
"name": "hud_actionbar_text_factory",
"control_ids": {
"hud_actionbar_text": "conditional_image@hud.conditional_image"
}
}
"my_toggle": {
...
}
}
```
:::
通过结合操作符系统，可实现复杂的条件逻辑判断，为界面交互提供灵活的控制能力。
当开关被勾选时，`#toggle_state`会变为`1`或`true`，从而将元素的`visible`属性设为可见。取消勾选时，该值变为`0`或`false`，再次覆盖`visible`属性值。
::: code-group
```json [vanilla/ui/hud_screen.json]
```
## 条件性渲染
在标准属性体系下，通过屏幕显示状态控制基岩版UI系统具有挑战性。然而变量（variables）和绑定（bindings）在JSON UI中具有特殊地位，因为它们承载着来自基岩引擎的实时数据。通过巧妙的UI技巧组合，开发者可以完全控制UI元素的渲染条件。这些方法分为两大类：基于变量的条件渲染和基于绑定的条件渲染。
:::warning ⚠️ 注意
本示例适用于国际版的受限制的 JSON UI 系统（客户端无法实现脚本控制）<br>
对中国版来说，不需要这种复杂的黑科技实现HUD元素的可见性控制。<br>
但是也能因此学习到数据绑定的使用方法，何尝不是一种收获呢？
:::
### 使用绑定的条件渲染
### 变量条件渲染
根据上文提到的操作栏示例，你可能会认为标题也使用变量。但实际情况并非如此。标题使用绑定（bindings）来获取数据，如下所示。
变量可用于实现条件性UI渲染。UI变量是指前缀带`$`的特殊属性，例如`hud_screen.json`中的`$actionbar_text`就承载着引擎数据。观察`hud_actionbar_text`控件可知，该变量用于显示动作栏文本。
::: code-group
```json [vanilla/ui/hud_screen.json]
{
...
"hud_title_text": {
"type": "stack_panel",
"orientation": "vertical", // 垂直排列
"offset": [ 0, -19 ], // 位置偏移
"layer": 1, // 渲染层级
"alpha": "@hud.anim_title_text_alpha_in", // 透明度动画
"propagate_alpha": true, // 透明度继承
"controls": [ // 子控件集合
"hud_actionbar_text": {
"type": "image",
"size": [ "100%c + 12px", "100%c + 5px" ],
"offset": [ 0, "50%-68px" ],
"texture": "textures/ui/hud_tip_text_background",
"alpha": "@hud.anim_actionbar_text_background_alpha_out",
"controls": [
{
"title_frame": {
"type": "panel", // 面板类型
"size": [ "100%", "100%cm" ], // 尺寸设置
"controls": [
{
"title_background": {
"type": "image", // 图像类型
"size": [ "100%sm + 30px", "100%sm + 6px" ], // 动态尺寸计算
"texture": "textures/ui/hud_tip_text_background", // 纹理路径
"alpha": "@hud.anim_title_background_alpha_in" // 背景透明度动画
}
},
{
"title": {
"type": "label", // 文本标签类型
"anchor_from": "top_middle", // 锚点起始位置
"anchor_to": "top_middle", // 锚点目标位置
"color": "$title_command_text_color", // 文字颜色变量
"text": "#text", // 文本内容绑定
"layer": 1, // 渲染层级
"localize": false, // 关闭本地化
"font_size": "extra_large", // 超大字号
"variables": [ // 条件变量组
{
"requires": "(not $title_shadow)", // 无阴影条件
"$show_shadow": false // 关闭阴影显示
},
{
"requires": "$title_shadow", // 启用阴影条件
"$show_shadow": true // 启用阴影显示
}
],
"shadow": "$show_shadow", // 阴影状态绑定
"text_alignment": "center", // 文本居中
"offset": [ 0, 6 ], // 位置微调
"bindings": [ // 数据绑定组
{
"binding_name": "#hud_title_text_string", // 原始绑定名
"binding_name_override": "#text", // 覆盖目标属性
"binding_type": "global" // 全局绑定类型
}
]
}
}
]
"actionbar_message": {
"type": "label",
"anchor_from": "center",
"anchor_to": "center",
"color": "$tool_tip_text",
"layer": 1,
"text": "$actionbar_text",
"localize": false,
"alpha": "@hud.anim_actionbar_text_alpha_out"
}
}
]
@@ -486,7 +450,100 @@ UI 元素是 JSON UI 的基本组成单元，每个命名空间内的元素名
```
:::
我们需要在文本组件中添加另一个绑定对象来控制可见性。注意`#visible`属性会通过绑定直接控制元素可见性。以下示例将不会渲染"hello world"标题，但会显示其他所有标题。可在游戏中输入`/title @s title hello world`观察效果。
通过`visible`属性可实现基于引擎变量的条件渲染。以下示例复制了`$actionbar_text`变量以便进行修改和比较（原始变量无法直接操作）。新建的`$atext`变量用于控制`visible`属性，其逻辑是"当动作栏文本不等于`hello world`时显示文本标签"。
::: code-group
```json [vanilla/ui/hud_screen.json]
{
...
"hud_actionbar_text": {
"type": "image",
"size": ["100%c + 12px", "100%c + 5px"],
"offset": [0, "50%-68px"],
"texture": "textures/ui/hud_tip_text_background",
"alpha": "@hud.anim_actionbar_text_background_alpha_out",
"controls": [
{
"actionbar_message": {
"type": "label",
"anchor_from": "center",
"anchor_to": "center",
"color": "$tool_tip_text",
"layer": 1,
"text": "$actionbar_text",
"localize": false,
"alpha": "@hud.anim_actionbar_text_alpha_out",
// 当动作栏文本等于"hello world"时忽略该文本标签
"$atext": "$actionbar_text",
"visible": "(非 ($atext = 'hello world'))"
}
}
]
}
...
}
```
:::
将此JSON转换为资源包使用的非侵入式UI文件应如下所示：
::: code-group
```json [vanilla/ui/hud_screen.json]
{
"hud_actionbar_text/actionbar_message": {
"$atext": "$actionbar_text",
"visible": "(非 ($atext = 'hello world'))"
}
}
```
:::
在启用资源包的世界中执行`/title @s actionbar hello world`时，动作栏将不会显示信息。其他动作栏指令仍可正常显示。若需要同时隐藏文本背景，可移除`/actionbar_message`节点。由于背景元素`hud_actionbar_text`被隐藏时，其子元素也会连带隐藏。
下面展示更复杂的变量条件渲染示例。此处需要使用动作栏工厂（actionbar factory）。工厂是元素生成器，其中`hud_actionbar_text_factory`等具有硬编码属性。该工厂在每次执行动作栏指令时重置其`control_id`内的元素，并传递`$actionbar_text`等特殊变量，这些数据只能通过工厂获取。
::: code-group
```json [vanilla/ui/hud_screen.json]
{
"black_conditional_image": {
"type": "image",
"texture": "textures/ui/Black",
"size": [16, 16],
"layer": 10,
"$atext": "$actionbar_text",
"visible": "($atext = 'hello world')"
},
"black_conditional_image_factory": {
"type": "panel",
"factory": {
"name": "hud_actionbar_text_factory",
"control_ids": {
"hud_actionbar_text": "black_conditional_image@hud.black_conditional_image"
}
}
},
"root_panel": {
"modifications": [
{
"array_name": "controls",
"operation": "insert_front",
"value": {
"black_conditional_image_factory@hud.black_conditional_image_factory": {}
}
}
]
}
}
```
:::
当动作栏文本等于`hello world`时，此示例会在HUD界面显示16x16黑色方块。开发者可为图像添加动画增强表现力。变量条件渲染不仅限于图像和文本，任何UI对象类型均可应用。结合动作栏文本的UI代码可实现高度定制化（至少在`hud_screen.json`中）。`visible`属性支持UI运算符，提供更精细的控制。任何承载引擎数据的变量都支持变量条件渲染。
### 绑定条件渲染
观察标题系统（title）时，可能误以为其使用变量系统。实际上标题系统采用绑定机制获取数据，如下所示：
::: code-group
```json [vanilla/ui/hud_screen.json]
@@ -525,7 +582,76 @@ UI 元素是 JSON UI 的基本组成单元，每个命名空间内的元素名
"font_size": "extra_large",
"variables": [
{
"requires": "(not $title_shadow)",
"requires": "(非 $title_shadow)",
"$show_shadow": false
},
{
"requires": "$title_shadow",
"$show_shadow": true
}
],
"shadow": "$show_shadow",
"text_alignment": "center",
"offset": [ 0, 6 ],
"bindings": [
{
"binding_name": "#hud_title_text_string",
"binding_name_override": "#text",
"binding_type": "global"
}
]
}
}
]
}
}
]
}
...
}
```
:::
通过添加绑定对象控制可见性。`#visible`属性直接反映元素的可见状态。以下示例将隐藏`hello world`标题文本，其他文本正常显示。游戏中可执行`/title @s title hello world`验证效果。
::: code-group
```json [vanilla/ui/hud_screen.json]
{
...
"hud_title_text": {
"type": "stack_panel",
"orientation": "vertical",
"offset": [ 0, -19 ],
"layer": 1,
"alpha": "@hud.anim_title_text_alpha_in",
"propagate_alpha": true,
"controls": [
{
"title_frame": {
"type": "panel",
"size": [ "100%", "100%cm" ],
"controls": [
{
"title_background": {
"type": "image",
"size": [ "100%sm + 30px", "100%sm + 6px" ],
"texture": "textures/ui/hud_tip_text_background",
"alpha": "@hud.anim_title_background_alpha_in"
}
},
{
"title": {
"type": "label",
"anchor_from": "top_middle",
"anchor_to": "top_middle",
"color": "$title_command_text_color",
"text": "#text",
"layer": 1,
"localize": false,
"font_size": "extra_large",
"variables": [
{
"requires": "(非 $title_shadow)",
"$show_shadow": false
},
{
@@ -543,9 +669,9 @@ UI 元素是 JSON UI 的基本组成单元，每个命名空间内的元素名
"binding_type": "global"
},
{
"binding_type": "view", // 将此设为视图绑定
"source_property_name": "(not (#text = 'hello world'))", // 当标题文本不等于"hello world"时触发
"target_property_name": "#visible" // 根据条件覆盖可见性属性
"binding_type": "view", // 转换为视图绑定
"source_property_name": "(非 (#text = 'hello world'))", // 检测标题文本是否不等于"hello world"
"target_property_name": "#visible" // 根据检测结果覆盖可见性属性
}
]
}
@@ -560,7 +686,7 @@ UI 元素是 JSON UI 的基本组成单元，每个命名空间内的元素名
```
:::
在资源包中使用非侵入式UI文件修改时，应保持如下格式：
转换为资源包文件时应如下配置：
::: code-group
```json [RP/ui/hud_screen.json]
@@ -568,11 +694,11 @@ UI 元素是 JSON UI 的基本组成单元，每个命名空间内的元素名
"hud_title_text/title_frame/title": {
"modifications": [
{
"array_name": "bindings", // 目标数组名
"operation": "insert_back", // 末尾插入操作
"value": { // 新增绑定对象
"array_name": "bindings",
"operation": "insert_back",
"value": {
"binding_type": "view",
"source_property_name": "(not (#text = 'hello world'))",
"source_property_name": "(非 (#text = 'hello world'))",
"target_property_name": "#visible"
}
}
@@ -582,24 +708,24 @@ UI 元素是 JSON UI 的基本组成单元，每个命名空间内的元素名
```
:::
下面是一个更复杂的条件渲染示例。16x16的黑色图片仅在标题文本等于"hello world"时显示。虽然在此案例中不需要使用标题工厂（title factory），但如需使用UI动画则建议采用。
下方是更复杂的绑定条件渲染示例。当标题文本等于`hello world`时显示16x16黑色图像。虽然不强制要求使用标题工厂，但若涉及UI动画则推荐使用。
::: code-group
```json [RP/ui/hud_screen.json]
{
"black_conditional_image": {
"type": "image",
"texture": "textures/ui/Black", // 黑色纹理
"size": [16, 16], // 固定尺寸
"layer": 10, // 较高渲染层级
"texture": "textures/ui/Black",
"size": [16, 16],
"layer": 10,
"bindings": [
{
"binding_name": "#hud_title_text_string" // 标题文本绑定
"binding_name": "#hud_title_text_string"
},
{
"binding_type": "view",
"source_property_name": "(#hud_title_text_string = 'hello world')", // 条件判断
"target_property_name": "#visible" // 可见性控制
"source_property_name": "(#hud_title_text_string = 'hello world')",
"target_property_name": "#visible"
}
]
},
@@ -607,9 +733,9 @@ UI 元素是 JSON UI 的基本组成单元，每个命名空间内的元素名
"black_conditional_image_factory": {
"type": "panel",
"factory": {
"name": "hud_title_text_factory", // 使用标题工厂
"name": "hud_title_text_factory",
"control_ids": {
"hud_title_text": "black_conditional_image@hud.black_conditional_image" // 控件ID映射
"hud_title_text": "black_conditional_image@hud.black_conditional_image"
}
}
},
@@ -617,10 +743,10 @@ UI 元素是 JSON UI 的基本组成单元，每个命名空间内的元素名
"root_panel": {
"modifications": [
{
"array_name": "controls", // 根面板控件数组
"operation": "insert_front", // 前置插入
"array_name": "controls",
"operation": "insert_front",
"value": {
"black_conditional_image_factory@hud.black_conditional_image_factory": {} // 工厂实例
"black_conditional_image_factory@hud.black_conditional_image_factory": {}
}
}
]

5
docs/wiki/4-Json-UI/2-巧思案例/add-hud-elements.md
View File

@@ -12,6 +12,11 @@ mentions:
<!--@include: @/wiki/bedrock-wiki-mirror.md-->
:::warning ⚠️ 注意
本教程仅适用于国际版的受限制的 JSON UI 系统（客户端无法实现脚本控制）<br>
中国版无需使用此黑科技实现HUD元素新增。
:::
在本教程中，你将学习如何向HUD界面添加元素。
## 概述

4
docs/wiki/4-Json-UI/2-巧思案例/aseprite-animations.md
View File

@@ -1,5 +1,5 @@
---
title: Aseprite动画
title: 序列帧动画
category: 教程
mentions:
- TheDataLioness
@@ -9,7 +9,7 @@ mentions:
- stirante
---
# Aseprite动画
# 序列帧动画（Aseprite）
<!--@include: @/wiki/bedrock-wiki-mirror.md-->

37
docs/wiki/4-Json-UI/2-巧思案例/preserve-title-texts.md
View File

@@ -1,5 +1,5 @@
---
title: 保留标题文本
title: Title传递HUD元素更新
category: 教程分类
tags:
- 中级
@@ -8,26 +8,31 @@ mentions:
- SmokeyStack
---
# 保留标题文本
# 通过 Title 传递 HUD 元素更新
<!--@include: @/wiki/bedrock-wiki-mirror.md-->
在本教程中，您将学习如何保存绑定数据并根据含有特定字符串的标题更新界面元素。
:::warning ⚠️ 注意
本教程仅适用于国际版的受限制的 JSON UI 系统（客户端无法实现脚本控制）<br>
中国版无需使用此黑科技实现HUD元素的更新。
:::
在本教程中，您将学习如何保存绑定数据并根据含有特定字符串的 Title 更新界面元素。
## 概述
标题是向UI系统传递数据的常用方法。当标题包含特定字符串时才更新相关数据元素，而忽略所有不含该字符串的标题数据非常有用。尽管本教程以标题为例，但该方法适用于所有通过绑定传递的数据（如副标题、玩家记分板名称等）。
Title 是向UI系统传递数据的常用方法。当 Title 包含特定字符串时才更新相关数据元素，而忽略所有不含该字符串的 Title 数据非常有用。尽管本教程以 Title 为例，但该方法适用于所有通过绑定传递的数据（如副 Title 、玩家记分板名称等）。
要保存特定字符串，我们需要组合使用 `visibility_changed` 绑定更新条件和 `source_control_name`，从而仅在包含特定字符串时更新绑定，并将该绑定传递给另一个元素。
## 标题指令
## Title 指令
以下代码创建了一个标签元素，当将其添加到根面板时，可以在屏幕显示包含字符串"update"的标题（显示文本中会移除"update"部分）。后续传入的标题信息只有包含"update"时才会更新显示文本。
以下代码创建了一个标签元素，当将其添加到根面板时，可以在屏幕显示包含字符串"update"的 Title （显示文本中会移除"update"部分）。后续传入的 Title 信息只有包含"update"时才会更新显示文本。
::: code-group
```json [RP/ui/hud_screen.json]
"preserved_title_display": {
"$update_string": "update", // 标题必须包含此字符串才触发元素更新
"$update_string": "update", // Title 必须包含此字符串才触发元素更新
"type": "label",
"text": "#text",
"controls": [
@@ -37,14 +42,14 @@ mentions:
"size": [ 0, 0 ],
"bindings": [
{
"binding_name": "#hud_title_text_string" // 读取当前标题字符串
"binding_name": "#hud_title_text_string" // 读取当前 Title 字符串
},
{
"binding_name": "#hud_title_text_string",
"binding_name_override": "#preserved_text", // 元素可见性变化时更新#preserved_text
"binding_condition": "visibility_changed"
},
// 当包含更新字符的标题传入后，元素会短暂可见后立即隐藏
// 当包含更新字符的 Title 传入后，元素会短暂可见后立即隐藏
{
"binding_type": "view",
"source_property_name": "(not (#hud_title_text_string = #preserved_text) and not ((#hud_title_text_string - $update_string) = #hud_title_text_string))",
@@ -66,13 +71,13 @@ mentions:
},
```
变量 `$update_string` 定义了触发元素更新的标题必须包含的特定字符串。子元素 `data_control` 用于在标题包含更新字符串时存储标题文本。`data_control` 必须是要传递保留文本元素的子级或同级元素，因为其可见性变化会触发文本保存。该元素的三个绑定分别实现：
1. 首绑定：持续追踪当前标题文本
2. 次绑定：在元素可见性变化时将当前标题保存至 `#preserved_text`
3. 末绑定：当传入含更新字符串的标题时短暂显示元素后立即隐藏
变量 `$update_string` 定义了触发元素更新的 Title 必须包含的特定字符串。子元素 `data_control` 用于在 Title 包含更新字符串时存储 Title 文本。`data_control` 必须是要传递保留文本元素的子级或同级元素，因为其可见性变化会触发文本保存。该元素的三个绑定分别实现：
1. 首绑定：持续追踪当前 Title 文本
2. 次绑定：在元素可见性变化时将当前 Title 保存至 `#preserved_text`
3. 末绑定：当传入含更新字符串的 Title 时短暂显示元素后立即隐藏
在 `data_control` 元素的第三个绑定中，需同时满足两个条件才可见：
1. `not (#hud_title_text_string = #preserved_text)` - 当前标题与保存标题不一致时成立
2. `not ((#hud_title_text_string - $update_string)` - 当前标题含有更新字符串时成立
1. `not (#hud_title_text_string = #preserved_text)` - 当前 Title 与保存 Title 不一致时成立
2. `not ((#hud_title_text_string - $update_string)` - 当前 Title 含有更新字符串时成立
当含有更新字符串且与已存文本不同的标题传入时，两条件同时触发，元素更新数据后立即重新隐藏自身。
当含有更新字符串且与已存文本不同的 Title 传入时，两条件同时触发，元素更新数据后立即重新隐藏自身。

78
docs/wiki/4-Json-UI/3-文档/json-ui-documentation.md
View File

@@ -1,5 +1,5 @@
---
title: JSON UI Documentation
title: JSON UI 完整文档
category: Documentation
nav_order: 1
mentions:
@@ -23,43 +23,55 @@ mentions:
- Gotemba912
---
# JSON UI Documentation
# JSON UI 完整文档
## UI Elements
## UI元素
### Element Types
### 元素类型
| Name | Description | Allowed Properties |
| ---------------- | ----------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| panel | A container, like `<div>` in HTML | [Control](/json-ui/json-ui-documentation#control) <br> [Layout](/json-ui/json-ui-documentation#layout) <br> [Data Binding](/json-ui/json-ui-documentation#data-binding) |
| stack_panel | Similar to `panel` but stacks its children depending on `orientation` property value | [Stack Panel](/json-ui/json-ui-documentation#stack-panel) <br> [Collection](/json-ui/json-ui-documentation#collection) <br> [Control](/json-ui/json-ui-documentation#control) <br> [Layout](/json-ui/json-ui-documentation#layout) <br> [Data Binding](/json-ui/json-ui-documentation#data-binding) |
| collection_panel | Similar to `stack_panel`, but does not have the `orientation` property | [Collection](/json-ui/json-ui-documentation#collection) <br> [Control](/json-ui/json-ui-documentation#control) <br> [Layout](/json-ui/json-ui-documentation#layout) <br> [Data Binding](/json-ui/json-ui-documentation#data-binding) |
| grid | Grid of elements | [Grid](/json-ui/json-ui-documentation#grid) <br> [Collection](/json-ui/json-ui-documentation#collection) <br> [Control](/json-ui/json-ui-documentation#control) <br> [Layout](/json-ui/json-ui-documentation#layout) <br> [Data Binding](/json-ui/json-ui-documentation#data-binding) |
| label | Text element | [Text](/json-ui/json-ui-documentation#text) <br> [Control](/json-ui/json-ui-documentation#control) <br> [Layout](/json-ui/json-ui-documentation#layout) <br> [Data Binding](/json-ui/json-ui-documentation#data-binding) |
| image | Sprite element. Draws a texture. | [Sprite](/json-ui/json-ui-documentation#sprite) <br> [Control](/json-ui/json-ui-documentation#control) <br> [Layout](/json-ui/json-ui-documentation#layout) <br> [Data Binding](/json-ui/json-ui-documentation#data-binding) |
| input_panel | A `panel` that accepts input | [Input](/json-ui/json-ui-documentation#input) <br> [Focus](/json-ui/json-ui-documentation#focus) <br> [Sound](/json-ui/json-ui-documentation#sound) <br> [Control](/json-ui/json-ui-documentation#control) <br> [Layout](/json-ui/json-ui-documentation#layout) <br> [Data Binding](/json-ui/json-ui-documentation#data-binding) |
| button | A button and it can have 4 states (default, hover, pressed and locked) | [Button](/json-ui/json-ui-documentation#button) <br> [Input](/json-ui/json-ui-documentation#input) <br> [Focus](/json-ui/json-ui-documentation#focus) <br> [Sound](/json-ui/json-ui-documentation#sound) <br> [Control](/json-ui/json-ui-documentation#control) <br> [Layout](/json-ui/json-ui-documentation#layout) <br> [Data Binding](/json-ui/json-ui-documentation#data-binding) |
| toggle | A toggle and it has 2 states (checked or unchecked). Each state has a hover and locked variant | [Toggle](/json-ui/json-ui-documentation#toggle) <br> [Input](/json-ui/json-ui-documentation#input) <br> [Focus](/json-ui/json-ui-documentation#focus) <br> [Sound](/json-ui/json-ui-documentation#sound) <br> [Control](/json-ui/json-ui-documentation#control) <br> [Layout](/json-ui/json-ui-documentation#layout) <br> [Data Binding](/json-ui/json-ui-documentation#data-binding) |
| dropdown | A toggle for dropdown purposes | [Dropdown](/json-ui/json-ui-documentation#dropdown) <br> [Toggle](/json-ui/json-ui-documentation#toggle) <br> [Input](/json-ui/json-ui-documentation#input) <br> [Focus](/json-ui/json-ui-documentation#focus) <br> [Sound](/json-ui/json-ui-documentation#sound) <br> [Control](/json-ui/json-ui-documentation#control) <br> [Layout](/json-ui/json-ui-documentation#layout) <br> [Data Binding](/json-ui/json-ui-documentation#data-binding) |
| slider | Range input element | [Slider](/json-ui/json-ui-documentation#slider) <br> [Input](/json-ui/json-ui-documentation#input) <br> [Focus](/json-ui/json-ui-documentation#focus) <br> [Sound](/json-ui/json-ui-documentation#sound) <br> [Control](/json-ui/json-ui-documentation#control) <br> [Layout](/json-ui/json-ui-documentation#layout) <br> [Data Binding](/json-ui/json-ui-documentation#data-binding) |
| slider_box | The slider button that you use to change the slider value | [Slider Box](/json-ui/json-ui-documentation#slider-box) <br> [Input](/json-ui/json-ui-documentation#input) <br> [Control](/json-ui/json-ui-documentation#control) <br> [Layout](/json-ui/json-ui-documentation#layout) <br> [Data Binding](/json-ui/json-ui-documentation#data-binding) |
| edit_box | Text field element. By default it's single-lined | [Text Edit](/json-ui/json-ui-documentation#text-edit) <br> [Button](/json-ui/json-ui-documentation#button) <br> [Input](/json-ui/json-ui-documentation#input) <br> [Focus](/json-ui/json-ui-documentation#focus) <br> [Control](/json-ui/json-ui-documentation#control) <br> [Layout](/json-ui/json-ui-documentation#layout) <br> [Data Binding](/json-ui/json-ui-documentation#data-binding) |
| scroll_view | Creates a scrolling panel element | [Scroll View](/json-ui/json-ui-documentation#scroll-view) <br> [Input](/json-ui/json-ui-documentation#input) <br> [Control](/json-ui/json-ui-documentation#control) <br> [Layout](/json-ui/json-ui-documentation#layout) <br> [Data Binding](/json-ui/json-ui-documentation#data-binding) |
| scrollbar_track | The scrollbar track | [Input](/json-ui/json-ui-documentation#input) <br> [Control](/json-ui/json-ui-documentation#control) <br> [Layout](/json-ui/json-ui-documentation#layout) |
| scrollbar_box | The scrollbar "thumb"/button. The draggable scrolling handle. By default is oriented vertically | [Input](/json-ui/json-ui-documentation#input) <br> [Control](/json-ui/json-ui-documentation#control) <br> [Layout](/json-ui/json-ui-documentation#layout) |
| factory | A element generator | [Control](/json-ui/json-ui-documentation#control) <br> [Layout](/json-ui/json-ui-documentation#layout) |
| screen | Screen element | [Screen](/json-ui/json-ui-documentation#screen) [Control](/json-ui/json-ui-documentation#control) <br> [Layout](/json-ui/json-ui-documentation#layout) <br> [Data Binding](/json-ui/json-ui-documentation#data-binding) |
| custom | Special renderer element that is created in the code because it's too complex for JSON UI | [Custom Render](/json-ui/json-ui-documentation#custom-render) <br> [Control](/json-ui/json-ui-documentation#control) <br> [Layout](/json-ui/json-ui-documentation#layout) <br> [Data Binding](/json-ui/json-ui-documentation#data-binding) |
| selection_wheel | | [Selection Wheel](/json-ui/json-ui-documentation#selection-wheel) <br> [Input](/json-ui/json-ui-documentation#input) <br> [Focus](/json-ui/json-ui-documentation#focus) <br> [Sound](/json-ui/json-ui-documentation#sound) <br> [Control](/json-ui/json-ui-documentation#control) <br> [Layout](/json-ui/json-ui-documentation#layout) <br> [Data Binding](/json-ui/json-ui-documentation#data-binding) |
| 名称 | 描述 | 允许的属性 |
| ------------------ | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| panel | 容器元素，类似HTML中的`<div>` | [控件](/json-ui/json-ui-documentation#control) <br> [布局](/json-ui/json-ui-documentation#layout) <br> [数据绑定](/json-ui/json-ui-documentation#data-binding) |
| stack_panel | 类似`panel`，但会根据`orientation`属性值自动堆叠子元素 | [堆叠面板](/json-ui/json-ui-documentation#stack-panel) <br> [集合](/json-ui/json-ui-documentation#collection) <br> [控件](/json-ui/json-ui-documentation#control) <br> [布局](/json-ui/json-ui-documentation#layout) <br> [数据绑定](/json-ui/json-ui-documentation#data-binding) |
| collection_panel | 类似`stack_panel`，但没有`orientation`属性 | [集合](/json-ui/json-ui-documentation#collection) <br> [控件](/json-ui/json-ui-documentation#control) <br> [布局](/json-ui/json-ui-documentation#layout) <br> [数据绑定](/json-ui/json-ui-documentation#data-binding) |
| grid | 网格布局元素 | [网格](/json-ui/json-ui-documentation#grid) <br> [集合](/json-ui/json-ui-documentation#collection) <br> [控件](/json-ui/json-ui-documentation#control) <br> [布局](/json-ui/json-ui-documentation#layout) <br> [数据绑定](/json-ui/json-ui-documentation#data-binding) |
| label | 文本元素 | [文本](/json-ui/json-ui-documentation#text) <br> [控件](/json-ui/json-ui-documentation#control) <br> [布局](/json-ui/json-ui-documentation#layout) <br> [数据绑定](/json-ui/json-ui-documentation#data-binding) |
| image | 图像元素，用于绘制纹理 | [精灵](/json-ui/json-ui-documentation#sprite) <br> [控件](/json-ui/json-ui-documentation#control) <br> [布局](/json-ui/json-ui-documentation#layout) <br> [数据绑定](/json-ui/json-ui-documentation#data-binding) |
| input_panel | 可接收输入的面板 | [输入](/json-ui/json-ui-documentation#input) <br> [焦点](/json-ui/json-ui-documentation#focus) <br> [音效](/json-ui/json-ui-documentation#sound) <br> [控件](/json-ui/json-ui-documentation#control) <br> [布局](/json-ui/json-ui-documentation#layout) <br> [数据绑定](/json-ui/json-ui-documentation#data-binding) |
| button | 按钮元素，支持四种状态（默认、悬停、按下、锁定） | [按钮](/json-ui/json-ui-documentation#button) <br> [输入](/json-ui/json-ui-documentation#input) <br> [焦点](/json-ui/json-ui-documentation#focus) <br> [音效](/json-ui/json-ui-documentation#sound) <br> [控件](/json-ui/json-ui-documentation#control) <br> [布局](/json-ui/json-ui-documentation#layout) <br> [数据绑定](/json-ui/json-ui-documentation#data-binding) |
| toggle | 开关元素，包含两种状态（选中/未选中），每种状态有悬停和锁定变体 | [开关](/json-ui/json-ui-documentation#toggle) <br> [输入](/json-ui/json-ui-documentation#input) <br> [焦点](/json-ui/json-ui-documentation#focus) <br> [音效](/json-ui/json-ui-documentation#sound) <br> [控件](/json-ui/json-ui-documentation#control) <br> [布局](/json-ui/json-ui-documentation#layout) <br> [数据绑定](/json-ui/json-ui-documentation#data-binding) |
| dropdown | 下拉菜单开关 | [下拉菜单](/json-ui/json-ui-documentation#dropdown) <br> [开关](/json-ui/json-ui-documentation#toggle) <br> [输入](/json-ui/json-ui-documentation#input) <br> [焦点](/json-ui/json-ui-documentation#focus) <br> [音效](/json-ui/json-ui-documentation#sound) <br> [控件](/json-ui/json-ui-documentation#control) <br> [布局](/json-ui/json-ui-documentation#layout) <br> [数据绑定](/json-ui/json-ui-documentation#data-binding) |
| slider | 范围输入元素 | [滑块](/json-ui/json-ui-documentation#slider) <br> [输入](/json-ui/json-ui-documentation#input) <br> [焦点](/json-ui/json-ui-documentation#focus) <br> [音效](/json-ui/json-ui-documentation#sound) <br> [控件](/json-ui/json-ui-documentation#control) <br> [布局](/json-ui/json-ui-documentation#layout) <br> [数据绑定](/json-ui/json-ui-documentation#data-binding) |
| slider_box | 用于调整滑块值的拖动按钮 | [滑块按钮](/json-ui/json-ui-documentation#slider-box) <br> [输入](/json-ui/json-ui-documentation#input) <br> [控件](/json-ui/json-ui-documentation#control) <br> [布局](/json-ui/json-ui-documentation#layout) <br> [数据绑定](/json-ui/json-ui-documentation#data-binding) |
| edit_box | 文本输入框（默认单行） | [文本编辑](/json-ui/json-ui-documentation#text-edit) <br> [按钮](/json-ui/json-ui-documentation#button) <br> [输入](/json-ui/json-ui-documentation#input) <br> [焦点](/json-ui/json-ui-documentation#focus) <br> [控件](/json-ui/json-ui-documentation#control) <br> [布局](/json-ui/json-ui-documentation#layout) <br> [数据绑定](/json-ui/json-ui-documentation#data-binding) |
| scroll_view | 创建可滚动面板 | [滚动视图](/json-ui/json-ui-documentation#scroll-view) <br> [输入](/json-ui/json-ui-documentation#input) <br> [控件](/json-ui/json-ui-documentation#control) <br> [布局](/json-ui/json-ui-documentation#layout) <br> [数据绑定](/json-ui/json-ui-documentation#data-binding) |
| scrollbar_track | 滚动条轨道 | [输入](/json-ui/json-ui-documentation#input) <br> [控件](/json-ui/json-ui-documentation#control) <br> [布局](/json-ui/json-ui-documentation#layout) |
| scrollbar_box | 滚动条"滑块"（可拖动的滚动手柄，默认垂直方向） | [输入](/json-ui/json-ui-documentation#input) <br> [控件](/json-ui/json-ui-documentation#control) <br> [布局](/json-ui/json-ui-documentation#layout) |
| factory | 元素生成器 | [控件](/json-ui/json-ui-documentation#control) <br> [布局](/json-ui/json-ui-documentation#layout) |
| screen | 屏幕元素 | [屏幕](/json-ui/json-ui-documentation#screen) <br> [控件](/json-ui/json-ui-documentation#control) <br> [布局](/json-ui/json-ui-documentation#layout) <br> [数据绑定](/json-ui/json-ui-documentation#data-binding) |
| custom | 需通过代码创建的复杂渲染元素 | [自定义渲染](/json-ui/json-ui-documentation#custom-render) <br> [控件](/json-ui/json-ui-documentation#control) <br> [布局](/json-ui/json-ui-documentation#layout) <br> [数据绑定](/json-ui/json-ui-documentation#data-binding) |
| selection_wheel | 选择轮盘 | [选择轮盘](/json-ui/json-ui-documentation#selection-wheel) <br> [输入](/json-ui/json-ui-documentation#input) <br> [焦点](/json-ui/json-ui-documentation#focus) <br> [音效](/json-ui/json-ui-documentation#sound) <br> [控件](/json-ui/json-ui-documentation#control) <br> [布局](/json-ui/json-ui-documentation#layout) <br> [数据绑定](/json-ui/json-ui-documentation#data-binding) |
#### Legacy Element Types (No longer work)
#### 遗留元素类型（已失效）
| Name | Description | Allowed Properties |
| -------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| tab | The way tabs were made before the addition of toggles | [Tab](/json-ui/json-ui-documentation#tab-legacy) <br> [Button](/json-ui/json-ui-documentation#button) <br> [Input](/json-ui/json-ui-documentation#input) <br> [Focus](/json-ui/json-ui-documentation#focus) <br> [Sound](/json-ui/json-ui-documentation#sound) <br> [Control](/json-ui/json-ui-documentation#control) <br> [Layout](/json-ui/json-ui-documentation#layout) <br> [Data Binding](/json-ui/json-ui-documentation#data-binding) |
| carousel_label | | [Carousel Text](/json-ui/json-ui-documentation#carousel-text-legacy) <br> [Text](/json-ui/json-ui-documentation#text) <br> [Control](/json-ui/json-ui-documentation#control) <br> [Layout](/json-ui/json-ui-documentation#layout) <br> [Data Binding](/json-ui/json-ui-documentation#data-binding) |
| grid_item | A `panel` but specifically to be an item/child of a grid | [Control](/json-ui/json-ui-documentation#control) <br> [Layout](/json-ui/json-ui-documentation#layout) <br> [Data Binding](/json-ui/json-ui-documentation#data-binding) |
| scrollbar | | [Input](/json-ui/json-ui-documentation#input) <br> [Focus](/json-ui/json-ui-documentation#focus) <br> [Control](/json-ui/json-ui-documentation#control) <br> [Layout](/json-ui/json-ui-documentation#layout) <br> [Data Binding](/json-ui/json-ui-documentation#data-binding) |
| 名称 | 描述 | 允许的属性 |
| ---------------- | ---------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| tab | 在引入toggle之前创建标签页的方式 | [标签页（旧版）](/json-ui/json-ui-documentation#tab-legacy) <br> [按钮](/json-ui/json-ui-documentation#button) <br> [输入](/json-ui/json-ui-documentation#input) <br> [焦点](/json-ui/json-ui-documentation#focus) <br> [音效](/json-ui/json-ui-documentation#sound) <br> [控件](/json-ui/json-ui-documentation#control) <br> [布局](/json-ui/json-ui-documentation#layout) <br> [数据绑定](/json-ui/json-ui-documentation#data-binding) |
| carousel_label | 轮播文本元素 | [轮播文本（旧版）](/json-ui/json-ui-documentation#carousel-text-legacy) <br> [文本](/json-ui/json-ui-documentation#text) <br> [控件](/json-ui/json-ui-documentation#control) <br> [布局](/json-ui/json-ui-documentation#layout) <br> [数据绑定](/json-ui/json-ui-documentation#data-binding) |
| grid_item | 专门作为网格子元素的容器 | [控件](/json-ui/json-ui-documentation#control) <br> [布局](/json-ui/json-ui-documentation#layout) <br> [数据绑定](/json-ui/json-ui-documentation#data-binding) |
| scrollbar | 旧版滚动条 | [输入](/json-ui/json-ui-documentation#input) <br> [焦点](/json-ui/json-ui-documentation#focus) <br> [控件](/json-ui/json-ui-documentation#control) <br> [布局](/json-ui/json-ui-documentation#layout) <br> [数据绑定](/json-ui/json-ui-documentation#data-binding) |
::: code-group
```json [示例]
// 代码块注释示例
{
"panel": {
"type": "stack_panel",
"orientation": "vertical"
}
}
```
:::
## Properties