@dcl/ react-ecs (英语)
对Decentrand的实体组件系统(ECS)的回放装订,提供了使用React组件模型和JSX语法在Decentrand场景中构建UI的宣示方式.
特征
- 基于 Flexbox 的布局: 执行 CSS Flexbox 的子集,用于强大的和直观的UI布局
- 反应组件: 用于构建 UI 的类似 Familier React 组件 API
- 类型安全: 带有适当类型定义的完整类型脚本支持
- 事件处理: 支持鼠标事件和用户交互
- 业绩: 优化最低运行时间间接费用的调节
- 主题支持: 内置有上下文切换的光和暗主题系统
组成部分准则
@dcl/react-ecs中的所有组件必须:
- 归还JSX。 一致性和可替换性要素
- 通过背景整合支持主题
- 可重复使用,可与其它部件相混合
安装
npm install @dcl/react-ecs
基本用途
import { ReactEcs, UiEntity, Label, Button } from '@dcl/react-ecs'
export function MyUI() {
return (
<UiEntity
uiTransform={{
width: 300,
height: 100,
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
<Label value="Hello Decentraland!" />
<Button value="Click Me!" onMouseDown={() => console.log('clicked!')} />
</UiEntity>
)
}
主题系统
软件包包括一个主题系统,用于一致的UI样式:
import { ReactEcs, ThemeProvider, Button } from '@dcl/react-ecs'
// Wrap your UI with ThemeProvider
export function MyUI() {
return (
<ThemeProvider>
<Button value="Theme-Aware Button" />
</ThemeProvider>
)
}
// Use themes in custom components
function CustomComponent() {
const { theme, toggleTheme } = React.useContext(ThemeContext)
return (
<UiEntity
uiBackground={{
color: theme === 'light' ? '#FFFFFF' : '#000000'
}}
onMouseDown={toggleTheme}
/>
)
}
构成部分
核心组成部分
- 用户实体: UI 元素的基础组件
- 标签: 文本显示组件
- 按钮: 交互式按钮组件
- 投入: 文本输入字段
- 下坠: 选择下拉菜单
布局系统
版式系统以Flexbox为基础,支持以下属性: 1
display: 'flex'flexDirection: 'row' | 'column'justifyContent: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around'alignItems: 'flex-start' | 'center' | 'flex-end' | 'stretch'width, (中文(简体) ),heightmargin, (中文(简体) ),paddingpositionType: 'absolute' | 'relative'
事件处理
组件支持以下鼠标事件 :
<Button onMouseDown={() => {}} onMouseUp={() => {}} onMouseEnter={() => {}} onMouseLeave={() => {}} />
技术细节
该套件执行自定义的React调和器,将React的组件模型与Decentrand的ECS相接. 它会:
- 将JSX翻译成ECS实体和组成部分
- 管理组件生命周期和更新
- 处理活动 代表团和吹嘘
- 提供表演者更新机制
相关文档
关于UI系统架构和设计决定的更详细信息:
许可证
Apache 2.0 (英语)