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

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