界面扩展
大约 2 分钟
界面扩展
UI 组件的定制与扩展，包括 Ribbon 菜单、右键菜单、对话框、主题等。
在线示例
| 示例 | 描述 | 链接 |
|---|---|---|
| Ribbon 菜单 | addRibbonButton 用法 | 在线演示{target="_blank"} |
| 消息输出 | writeMessage 用法 | 在线演示{target="_blank"} |
| 预览视图组件 | PreviewView 在对话框中预览实体 | 在线演示{target="_blank"} |
| 确认对话框 | showConfirm、showInfo、showWarningConfirm 用法 | 在线演示{target="_blank"} |
| 输入对话框 | showInputDialog、showSelectDialog、showPrompt 用法 | 在线演示{target="_blank"} |
| 右键菜单（添加自定义项） | 在默认菜单中添加自定义项 | 在线演示{target="_blank"} |
| 右键菜单（命令状态定制） | 根据命令状态定制菜单 | 在线演示{target="_blank"} |
| 右键菜单（完全自定义） | 完全自定义菜单（不显示默认项） | 在线演示{target="_blank"} |
| 右键菜单（禁止系统菜单） | 禁止系统右键菜单 | 在线演示{target="_blank"} |
| 主题切换 | THEME_MODE 用法 | 在线演示{target="_blank"} |
| 状态栏 | FuncButtons 和 CoordsBar 用法 | 在线演示{target="_blank"} |
| 主视图配置 | MainViewConfig 用法 | 在线演示{target="_blank"} |
| Viewer 查看模式 | 只显示绘图区域，隐藏菜单工具栏命令行 | 在线演示{target="_blank"} |
| 对话框暂停/恢复 | 在对话框中选择实体、拾取点的用法 | 在线演示{target="_blank"} |
| 对话框暂停/恢复（Vue3） | Vue3 版本的对话框交互 | 在线演示{target="_blank"} |
| 模态对话框基类 | ModalDialogBase 快速创建对话框 | 在线演示{target="_blank"} |
| 非模态面板基类 | ModelessPanelBase 快速创建工具面板 | 在线演示{target="_blank"} |
核心 API
Ribbon 菜单
// 添加 Ribbon 按钮
Engine.addRibbonButton({
tab: "绘图", // 选项卡名称
panel: "自定义", // 面板名称
text: "我的命令", // 按钮文字
icon: "icon-custom", // 图标类名
command: "MYCMD" // 关联的命令
});消息输出
// 在命令行输出消息
writeMessage("操作成功");
writeMessage("<br/>换行消息");
// 消息提示框
message.info("提示信息");
message.success("操作成功");
message.warning("警告信息");
message.error("错误信息");对话框
// 确认对话框
const confirmed = await showConfirm("确定要删除吗？");
// 输入对话框
const value = await showInputDialog("请输入名称:", "默认值");
// 选择对话框
const selected = await showSelectDialog("请选择类型:", [
{ label: "类型A", value: "a" },
{ label: "类型B", value: "b" }
]);右键菜单
// 添加自定义菜单项
Engine.contextMenu.addItem({
text: "自定义功能",
icon: "icon-custom",
onClick: () => {
// 处理点击
}
});
// 完全自定义菜单
Engine.contextMenu.setCustomMenu((context) => {
return [
{ text: "菜单项1", onClick: () => {} },
{ text: "菜单项2", onClick: () => {} }
];
});主题切换
// 切换主题
Engine.setTheme('dark'); // 深色主题
Engine.setTheme('light'); // 浅色主题
// 获取当前主题
const theme = Engine.getTheme();