X Tutup
--- title: commonUI - UI 组件库 sidebar_position: 10 --- ## 简介 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[] \| ((nodes: IPublicModelNode[]) => Omit[]) (optional) | | | condition | 显示条件函数
Function to determine display condition | (nodes: IPublicModelNode[]) => boolean (optional) | | | disabled | 禁用条件函数,可选
Function to determine disabled condition, optional | (nodes: IPublicModelNode[]) => boolean (optional) | | **ContextMenu 示例** ```typescript 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 (
右键点击这里
); }; export default App; ``` **ContextMenu.create 示例** ```typescript 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 (
{ ContextMenu.create(menuItems, e); }}>点击这里
); }; export default App; ``` ### Balloon 详细文档: [Balloon Documentation](https://fusion.design/pc/component/balloon) ### Breadcrumb 详细文档: [Breadcrumb Documentation](https://fusion.design/pc/component/breadcrumb) ### Button 详细文档: [Button Documentation](https://fusion.design/pc/component/button) ### Card 详细文档:[Card Documentation](https://fusion.design/pc/component/card) ### Checkbox 详细文档:[Checkbox Documentation](https://fusion.design/pc/component/checkbox) ### DatePicker 详细文档:[DatePicker Documentation](https://fusion.design/pc/component/datepicker) ### Dialog 详细文档:[Dialog Documentation](https://fusion.design/pc/component/dialog) ### Dropdown 详细文档:[Dropdown Documentation](https://fusion.design/pc/component/dropdown) ### Form 详细文档:[Form Documentation](https://fusion.design/pc/component/form) ### Icon 详细文档:[Icon Documentation](https://fusion.design/pc/component/icon) 引擎默认主题支持的 icon 列表:https://fusion.design/64063/component/icon?themeid=20133 ### Input 详细文档:[Input Documentation](https://fusion.design/pc/component/input) ### Loading 详细文档:[Loading Documentation](https://fusion.design/pc/component/loading) ### Message 详细文档:[Message Documentation](https://fusion.design/pc/component/message) ### Overlay 详细文档:[Overlay Documentation](https://fusion.design/pc/component/overlay) ### Pagination 详细文档:[Pagination Documentation](https://fusion.design/pc/component/pagination) ### Radio 详细文档:[Radio Documentation](https://fusion.design/pc/component/radio) ### Search 详细文档:[Search Documentation](https://fusion.design/pc/component/search) ### Select 详细文档:[Select Documentation](https://fusion.design/pc/component/select) ### SplitButton 详细文档:[SplitButton Documentation](https://fusion.design/pc/component/splitbutton) ### Step 详细文档:[Step Documentation](https://fusion.design/pc/component/step) ### Switch 详细文档:[Switch Documentation](https://fusion.design/pc/component/switch) ### Tab 详细文档:[Tab Documentation](https://fusion.design/pc/component/tab) ### Table 详细文档:[Table Documentation](https://fusion.design/pc/component/table) ### Tree 详细文档:[Tree Documentation](https://fusion.design/pc/component/tree) ### TreeSelect 详细文档:[TreeSelect Documentation](https://fusion.design/pc/component/treeselect) ### Upload 详细文档:[Upload Documentation](https://fusion.design/pc/component/upload) ### Divider 详细文档:[Divider Documentation](https://fusion.design/pc/component/divider) ## 说明 如果需要其他组件,可以提 issue 给我们。
X Tutup