跳到主要内容
版本：2.0

UI组件与样式配置指南

本文档提供了关于特定API的详细信息，用于描述UI组件的不同部分及其作用。

目录​

顶部工具栏 (topToolbarVisible)​

是否显示顶部工具栏，默认隐藏。

{
  topToolbarVisible: true,
}

顶部工具栏

左侧工具栏 (leftToolbarVisible)​

左侧工具栏包含多个功能按钮，用于不同的操作。

  • circuitBtn: 电学转电路图按钮，用于将电学元素转换为电路图表示。
{
  leftToolbarVisible: true,
  css: {
    leftToolbar: {
      circuitBtn: {
        left: '10px',
        top: '10px',
      },
    },
  },
}

电学转电路图按钮

  • mechDiyTool: 力学工具栏，提供力学相关的工具和功能。
{
  leftToolbarVisible: true,
  css: {
    leftToolbar: {
      mechDiyTool: {
        left: '10px',
        top: '10px',
      },
    },
  },
}

力学工具栏

  • forceSettingBtns: 力与运动工具栏，用于设置和调整力相关的参数和属性。
{
  leftToolbarVisible: true,
  css: {
    leftToolbar: {
      forceSettingBtns: {
        left: '10px',
        top: '10px',
      },
    },
  },
}

力与运动工具栏

右侧工具栏 (rightToolbarVisible)​

是否显示右侧工具栏（如 器材库），默认隐藏。

{
  rightToolbarVisible: true,
}

右侧工具栏

底部工具栏 (bottomToolbarVisible)​

底部工具栏主要用于操作和模块切换。

  • operationBar: 操作栏，提供一系列操作按钮。
{
  bottomToolbarVisible: true,
  css: {
    bottomToolbar: {
      operationBar: {
        left: '0px'
      },
    },
  },
}

力与运动工具栏

  • moduleSwitch: 模块切换按钮，位于左下角，用于在不同模块间切换。
{
  bottomToolbarVisible: true,
  css: {
    bottomToolbar: {
      moduleSwitch: {
        'margin-right':'50px'
      },
    },
  },
}

模块切换按钮

设置菜单 (settingsMenuVisible)​

是否显示器材属性设置菜单，默认隐藏。

{
  settingsMenuVisible: true,
}

设置菜单

保存按钮 (saveButtonVisible)​

是否显示保存按钮，默认隐藏。

{
  topToolbarVisible: true,
  saveButtonVisible: true,
}

保存按钮

播放器工具栏 (playerToolBarVisible)​

根据不同的设备（PC端和移动端），播放器工具栏有不同的布局和功能。

  • pc: PC端播放器工具栏。
{
  playerToolBarVisible: true,
  css: {
    playerToolbar: {
      pc: {
        right: '0px'
      },
    },
  },
}

模块切换按钮

  • mobileLeft: 移动端播放器工具栏左下角。
{
  playerToolBarVisible: true,
  css: {
    playerToolbar: {
      mobileLeft: {
        bottom: '0px'
      },
    },
  },
}

模块切换按钮

  • mobileRight: 移动端播放器工具栏右下角。
{
  playerToolBarVisible: true,
  css: {
    playerToolbar: {
      mobileRight: {
        right: '0px'
      },
    },
  },
}

模块切换按钮

信息区 (infoVisible)​

右侧器材信息区，根据是否有器材库的情况分为两种显示模式。

  • noEquipmentDrawer: 无器材库的情况，一般用于播放器。
{
  infoVisible: true,
  css: {
    info: {
      noEquipmentDrawer: {
        top: '20px',
      },
    },
  },
}

模块切换按钮

  • hasEquipmentDrawer: 有器材库的情况，一般用于编辑器。
{
  topToolbarVisible: true,
  rightToolbarVisible: true,
  infoVisible: true,
  css: {
    info: {
      hasEquipmentDrawer: {
        color: '#FF0000'
      },
    },
  },
}

模块切换按钮

功能栏位置 (functionBarLocationVisible)​

是否显示功能栏位置，默认隐藏。

{
  topToolbarVisible: true,
  functionBarLocationVisible: true,
}

功能栏位置

加载提示 (loadingVisible)​

是否显示loading,默认显示。

{
  loadingVisible: true,
}

加载提示

下载限制 (preventDownload)​

是否禁止下载, 默认不禁止(影响截图、电路图、表格、dis、富文本等下载功能，仅对PC端有效, 移动端默认此值为true)。

{
  topToolbarVisible: true,
  preventDownload: false,
}

下载限制 下载限制 下载限制

视频播放器 (video)​

视频播放器和相关的浮窗视频功能。

  • floatVideo: 浮窗视频（用于PC端编辑器），提供一个浮动的视频播放窗口。
    • closeBtn: 关闭按钮，用于关闭浮窗视频。
{
  topToolbarVisible: true,
  rightToolbarVisible: true,
  bottomToolbarVisible: true,
  css: {
    video: {
      floatVideo: {
        closeBtn: {
          left: '20px', 
          right: 'auto',
        }
      }  
    }
  },
}

模块切换按钮

代码示例​

以下是一个示例代码，展示了如何使用nbChild.get方法来配置UI界面的可见性和样式。该示例涵盖了顶部、左侧、右侧、底部工具栏的可见性，设置菜单、保存按钮、播放器工具栏的可见性，以及一些其他的UI配置。

nbChild.get("config", {
  topToolbarVisible: true, // 顶部工具栏可见
  leftToolbarVisible: true, // 左侧工具栏可见
  rightToolbarVisible: true, // 右侧工具栏可见
  bottomToolbarVisible: true, // 底部工具栏可见
  settingsMenuVisible: true, // 设置菜单可见
  saveButtonVisible: false, // 保存按钮不可见
  playerToolBarVisible: false, // 播放器工具栏不可见
  equipmentLineColumn: false, // 器材列不显示
  showEquipmentLock: false, // 器材锁定不显示
  preventDownload: true, // 阻止下载
  infoVisible: true, // 信息区可见
  css: {
    info: {
      hasEquipmentDrawer: {
        top: "200px", // 有器材库的情况下，顶部距离为200px
      },
    },
    leftToolbar: {
      circuitBtn: {
        left: "0px", // 电学转电路图按钮位置
        top: "70px",
      },
      mechDiyTool: {
        left: "0px", // 力学按钮位置
        top: "70px",
      },
      forceSettingBtns: {
        left: 'auto', // 力与运动按钮组位置
        top: "200px",
      },
    },
    bottomToolbar: {
      operationBar: {
        left: 0, // 操作栏位置
        // display:"none" // 可以通过注释来隐藏
      },
      moduleSwitch: {
        display: 'none', // 模块切换按钮隐藏
      },
    },
    playerToolbar: {
      pc: {}, // PC端播放器工具栏样式
      mobile: {}, // 移动端播放器工具栏样式
    },
  },
});

模块切换按钮