跳到主要内容

commonUI - UI 组件库

@since v1.3.0

简介​

CommonUI API 是一个专为低代码引擎设计的组件 UI 库，使用它开发的插件，可以保证在不同项目和主题切换中能够保持一致性和兼容性。

组件列表​

Tip​

提示组件

参数说明类型默认值
classNameclassNamestring (optional)
childrentip 的内容IPublicTypeI18nData | ReactNode
directiontip 的方向'top' | 'bottom' | 'left' | 'right'

HelpTip​

带 help icon 的提示组件

参数说明类型默认值
help描述IPublicTypeHelpTipConfig
direction方向IPublicTypeTipConfig['direction']'top'
size方向IconProps['size']'small'

Title​

标题组件

参数说明类型默认值
title标题内容IPublicTypeTitleContent
classNameclassNamestring (optional)
onClick点击事件() => void (optional)

ContextMenu​

参数说明类型默认值
menus定义上下文菜单的动作数组IPublicTypeContextMenuAction[]
children组件的子元素React.ReactElement[]

IPublicTypeContextMenuAction Interface

参数说明类型默认值
name动作的唯一标识符
Unique identifier for the action		string
title显示的标题，可以是字符串或国际化数据
Display title, can be a string or internationalized data		string | IPublicTypeI18nData (optional)
type菜单项类型
Menu item type		IPublicEnumContextMenuType (optional)IPublicEnumContextMenuType.MENU_ITEM
action点击时执行的动作，可选
Action to execute on click, optional		(nodes: IPublicModelNode[]) => void (optional)
items子菜单项或生成子节点的函数，可选，仅支持两级
Sub-menu items or function to generate child node, optional		Omit<IPublicTypeContextMenuAction, 'items'>[] | ((nodes: IPublicModelNode[]) => Omit<IPublicTypeContextMenuAction, 'items'>[]) (optional)
condition显示条件函数
Function to determine display condition		(nodes: IPublicModelNode[]) => boolean (optional)
disabled禁用条件函数，可选
Function to determine disabled condition, optional		(nodes: IPublicModelNode[]) => boolean (optional)

ContextMenu 示例

const App = () => {
  const menuItems: IPublicTypeContextMenuAction[] = [
    {
      name: 'a',
      title: '选项 1',
      action: () => console.log('选项 1 被点击'),
    },
    {
      name: 'b',
      title: '选项 2',
      action: () => console.log('选项 2 被点击'),
    },
  ];

  const ContextMenu = ctx.commonUI.ContextMenu;

  return (
    <div>
      <ContextMenu menus={menuItems}>
        <div>右键点击这里</div>
      </ContextMenu>
    </div>
  );
};

export default App;

ContextMenu.create 示例

const App = () => {
  const menuItems: IPublicTypeContextMenuAction[] = [
    {
      name: 'a',
      title: '选项 1',
      action: () => console.log('选项 1 被点击'),
    },
    {
      name: 'b',
      title: '选项 2',
      action: () => console.log('选项 2 被点击'),
    },
  ];

  const ContextMenu = ctx.commonUI.ContextMenu;

  return (
    <div>
      <div onClick={(e) => {
        ContextMenu.create(menuItems, e);
      }}>点击这里</div>
    </div>
  );
};

export default App;

Balloon​

详细文档： Balloon Documentation

详细文档： Breadcrumb Documentation

Button​

详细文档： Button Documentation

Card​

详细文档：Card Documentation

Checkbox​

详细文档：Checkbox Documentation

DatePicker​

详细文档：DatePicker Documentation

Dialog​

详细文档：Dialog Documentation

详细文档：Dropdown Documentation

Form​

详细文档：Form Documentation

Icon​

详细文档：Icon Documentation

引擎默认主题支持的 icon 列表：https://fusion.design/64063/component/icon?themeid=20133

Input​

详细文档：Input Documentation

Loading​

详细文档：Loading Documentation

Message​

详细文档：Message Documentation

Overlay​

详细文档：Overlay Documentation

Pagination​

详细文档：Pagination Documentation

Radio​

详细文档：Radio Documentation

详细文档：Search Documentation

Select​

详细文档：Select Documentation

SplitButton​

详细文档：SplitButton Documentation

Step​

详细文档：Step Documentation

Switch​

详细文档：Switch Documentation

Tab​

详细文档：Tab Documentation

Table​

详细文档：Table Documentation

Tree​

详细文档：Tree Documentation

TreeSelect​

详细文档：TreeSelect Documentation

Upload​

详细文档：Upload Documentation

Divider​

详细文档：Divider Documentation

说明​

如果需要其他组件，可以提 issue 给我们。