uCode 插件 UI 组件

由于沙盒系统的限制, 插件是无法直接操作 DOM , 如果插件需要 UI 的话, 我们提供了一套可以很方便的调用 uCode 插件 UI 组件 我们称之为: uCodeExtensionUI

可用组件以及参数

目前我们提供以下可用的函数组件, 会陆续增加:

组件名字	函数名字	UI 示例
Toast	Toast
提示对话框	TipDialog
输入对话框	InputDialog

使用指南

这套 UI 组件已经被集成到了 Common SDK 内部,你也可以很方便的直接调用

例如:

import { ExtensionUI } from "@ubtech/ucode-extension-common-sdk";

const { Toast, showTipDialog, showInputDialog } = ExtensionUI;

Toast(`Toast 测试, 默认时间`);

Toast(`Toast 测试, 时间是 5秒`, { duration: 5000 });

showTipDialog("提示对话框文字") // 提示对话框
  .then((data) => {
    let tips = "";
    if (data.onConfirm) {
      tips = "你点了确定";
    } else if (data.onCancel) {
      tips = "你点了取消";
    } else if (data.onClose) {
      tips = "你点了关闭";
    }
    Toast(tips);
  })
  .catch((e) => {
    Toast("出错了");
  });

showInputDialog({
  // 输入文字对话框
  title: "标题",
  placeholder: "请输入文字",
  autofocus: true,
}).then((result) => {
  if (result.onConfirm) {
    Toast(`你输入了: ${result.data}`);
  } else {
    console.log(`取消了: ${JSON.stringify(result)}`);
  }
});

API 文档

详细的参数, 你可以查阅 UI API 文档

UI Playground 可交互式文档

由于 UI 组件都是通过 函数式调用的, 因此调试起来会稍微麻烦点, 我们提供了一套 UI Playground 你可以直接修改里面的参数, 直接查看效果, 减少你的调试困难

uCode Extension UI Playground