lowcode-engine/docs/docs/api/commonUI.md

title, sidebar_position

title	sidebar_position
commonUI - UI 组件库	11

简介

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

组件列表

Tip

提示组件

参数	说明	类型	默认值
className	className	string (optional)
children	tip 的内容	IPublicTypeI18nData | ReactNode
direction	tip 的方向	'top' | 'bottom' | 'left' | 'right'

HelpTip

带 help icon 的提示组件

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

Title

标题组件

参数	说明	类型	默认值
title	标题内容	IPublicTypeTitleContent
className	className	string (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

详细文档： Breadcrumb Documentation

Button

详细文档： Button Documentation

Card

详细文档：Card Documentation

Checkbox

详细文档：Checkbox Documentation

DatePicker

详细文档：DatePicker Documentation

Dialog

详细文档：Dialog Documentation

Dropdown

详细文档：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

详细文档：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 给我们。