|
| 1 | +--- |
| 2 | +title: commonUI - UI 组件库 |
| 3 | +sidebar_position: 11 |
| 4 | +--- |
| 5 | + |
| 6 | +## 简介 |
| 7 | +CommonUI API 是一个专为低代码引擎设计的组件 UI 库,使用它开发的插件,可以保证在不同项目和主题切换中能够保持一致性和兼容性。 |
| 8 | + |
| 9 | +## 组件列表 |
| 10 | + |
| 11 | +### Tip |
| 12 | + |
| 13 | +提示组件 |
| 14 | + |
| 15 | +| 参数 | 说明 | 类型 | 默认值 | |
| 16 | +|-----------|--------------|---------------------------------------|--------| |
| 17 | +| className | className | string (optional) | | |
| 18 | +| children | tip 的内容 | IPublicTypeI18nData \| ReactNode | | |
| 19 | +| direction | tip 的方向 | 'top' \| 'bottom' \| 'left' \| 'right' | | |
| 20 | + |
| 21 | + |
| 22 | +### HelpTip |
| 23 | + |
| 24 | +带 help icon 的提示组件 |
| 25 | + |
| 26 | +| 参数 | 说明 | 类型 | 默认值 | |
| 27 | +|-----------|--------|-----------------------------------|--------| |
| 28 | +| help | 描述 | IPublicTypeHelpTipConfig | | |
| 29 | +| direction | 方向 | IPublicTypeTipConfig['direction'] | 'top' | |
| 30 | +| size | 方向 | IconProps['size'] | 'small'| |
| 31 | + |
| 32 | +### Title |
| 33 | + |
| 34 | +标题组件 |
| 35 | + |
| 36 | +| 参数 | 说明 | 类型 | 默认值 | |
| 37 | +|-----------|------------|-----------------------------|--------| |
| 38 | +| title | 标题内容 | IPublicTypeTitleContent | | |
| 39 | +| className | className | string (optional) | | |
| 40 | +| onClick | 点击事件 | () => void (optional) | | |
| 41 | + |
| 42 | +### ContextMenu |
| 43 | + |
| 44 | +| 参数 | 说明 | 类型 | 默认值 | |
| 45 | +|--------|----------------------------------------------------|------------------------------------|--------| |
| 46 | +| menus | 定义上下文菜单的动作数组 | IPublicTypeContextMenuAction[] | | |
| 47 | +| children | 组件的子元素 | React.ReactElement[] | | |
| 48 | + |
| 49 | +**IPublicTypeContextMenuAction Interface** |
| 50 | + |
| 51 | +| 参数 | 说明 | 类型 | 默认值 | |
| 52 | +|------------|--------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|----------------------------------------| |
| 53 | +| name | 动作的唯一标识符<br/>Unique identifier for the action | string | | |
| 54 | +| title | 显示的标题,可以是字符串或国际化数据<br/>Display title, can be a string or internationalized data | string \| IPublicTypeI18nData (optional) | | |
| 55 | +| type | 菜单项类型<br/>Menu item type | IPublicEnumContextMenuType (optional) | IPublicEnumContextMenuType.MENU_ITEM | |
| 56 | +| action | 点击时执行的动作,可选<br/>Action to execute on click, optional | (nodes: IPublicModelNode[]) => void (optional) | | |
| 57 | +| items | 子菜单项或生成子节点的函数,可选,仅支持两级<br/>Sub-menu items or function to generate child node, optional | Omit<IPublicTypeContextMenuAction, 'items'>[] \| ((nodes: IPublicModelNode[]) => Omit<IPublicTypeContextMenuAction, 'items'>[]) (optional) | | |
| 58 | +| condition | 显示条件函数<br/>Function to determine display condition | (nodes: IPublicModelNode[]) => boolean (optional) | | |
| 59 | +| disabled | 禁用条件函数,可选<br/>Function to determine disabled condition, optional | (nodes: IPublicModelNode[]) => boolean (optional) | | |
| 60 | + |
| 61 | +**ContextMenu 示例** |
| 62 | + |
| 63 | +```typescript |
| 64 | +const App = () => { |
| 65 | + const menuItems: IPublicTypeContextMenuAction[] = [ |
| 66 | + { |
| 67 | + name: 'a', |
| 68 | + title: '选项 1', |
| 69 | + action: () => console.log('选项 1 被点击'), |
| 70 | + }, |
| 71 | + { |
| 72 | + name: 'b', |
| 73 | + title: '选项 2', |
| 74 | + action: () => console.log('选项 2 被点击'), |
| 75 | + }, |
| 76 | + ]; |
| 77 | + |
| 78 | + const ContextMenu = ctx.commonUI.ContextMenu; |
| 79 | + |
| 80 | + return ( |
| 81 | + <div> |
| 82 | + <ContextMenu menus={menuItems}> |
| 83 | + <div>右键点击这里</div> |
| 84 | + </ContextMenu> |
| 85 | + </div> |
| 86 | + ); |
| 87 | +}; |
| 88 | + |
| 89 | +export default App; |
| 90 | +``` |
| 91 | + |
| 92 | +**ContextMenu.create 示例** |
| 93 | + |
| 94 | +```typescript |
| 95 | +const App = () => { |
| 96 | + const menuItems: IPublicTypeContextMenuAction[] = [ |
| 97 | + { |
| 98 | + name: 'a', |
| 99 | + title: '选项 1', |
| 100 | + action: () => console.log('选项 1 被点击'), |
| 101 | + }, |
| 102 | + { |
| 103 | + name: 'b', |
| 104 | + title: '选项 2', |
| 105 | + action: () => console.log('选项 2 被点击'), |
| 106 | + }, |
| 107 | + ]; |
| 108 | + |
| 109 | + const ContextMenu = ctx.commonUI.ContextMenu; |
| 110 | + |
| 111 | + return ( |
| 112 | + <div> |
| 113 | + <div onClick={(e) => { |
| 114 | + ContextMenu.create(menuItems, e); |
| 115 | + }}>点击这里</div> |
| 116 | + </div> |
| 117 | + ); |
| 118 | +}; |
| 119 | + |
| 120 | +export default App; |
| 121 | +``` |
| 122 | + |
| 123 | +### Balloon |
| 124 | + |
| 125 | +详细文档: [Balloon Documentation](https://fusion.design/pc/component/balloon) |
| 126 | + |
| 127 | +### Breadcrumb |
| 128 | +详细文档: [Breadcrumb Documentation](https://fusion.design/pc/component/breadcrumb) |
| 129 | + |
| 130 | +### Button |
| 131 | +详细文档: [Button Documentation](https://fusion.design/pc/component/button) |
| 132 | + |
| 133 | +### Card |
| 134 | +详细文档:[Card Documentation](https://fusion.design/pc/component/card) |
| 135 | + |
| 136 | +### Checkbox |
| 137 | +详细文档:[Checkbox Documentation](https://fusion.design/pc/component/checkbox) |
| 138 | + |
| 139 | +### DatePicker |
| 140 | +详细文档:[DatePicker Documentation](https://fusion.design/pc/component/datepicker) |
| 141 | + |
| 142 | +### Dialog |
| 143 | +详细文档:[Dialog Documentation](https://fusion.design/pc/component/dialog) |
| 144 | + |
| 145 | +### Dropdown |
| 146 | +详细文档:[Dropdown Documentation](https://fusion.design/pc/component/dropdown) |
| 147 | + |
| 148 | +### Form |
| 149 | +详细文档:[Form Documentation](https://fusion.design/pc/component/form) |
| 150 | + |
| 151 | +### Icon |
| 152 | +详细文档:[Icon Documentation](https://fusion.design/pc/component/icon) |
| 153 | + |
| 154 | +引擎默认主题支持的 icon 列表:https://fusion.design/64063/component/icon?themeid=20133 |
| 155 | + |
| 156 | + |
| 157 | +### Input |
| 158 | +详细文档:[Input Documentation](https://fusion.design/pc/component/input) |
| 159 | + |
| 160 | +### Loading |
| 161 | +详细文档:[Loading Documentation](https://fusion.design/pc/component/loading) |
| 162 | + |
| 163 | +### Message |
| 164 | +详细文档:[Message Documentation](https://fusion.design/pc/component/message) |
| 165 | + |
| 166 | +### Overlay |
| 167 | +详细文档:[Overlay Documentation](https://fusion.design/pc/component/overlay) |
| 168 | + |
| 169 | +### Pagination |
| 170 | +详细文档:[Pagination Documentation](https://fusion.design/pc/component/pagination) |
| 171 | + |
| 172 | +### Radio |
| 173 | +详细文档:[Radio Documentation](https://fusion.design/pc/component/radio) |
| 174 | + |
| 175 | +### Search |
| 176 | +详细文档:[Search Documentation](https://fusion.design/pc/component/search) |
| 177 | + |
| 178 | +### Select |
| 179 | +详细文档:[Select Documentation](https://fusion.design/pc/component/select) |
| 180 | + |
| 181 | +### SplitButton |
| 182 | +详细文档:[SplitButton Documentation](https://fusion.design/pc/component/splitbutton) |
| 183 | + |
| 184 | +### Step |
| 185 | +详细文档:[Step Documentation](https://fusion.design/pc/component/step) |
| 186 | + |
| 187 | +### Switch |
| 188 | +详细文档:[Switch Documentation](https://fusion.design/pc/component/switch) |
| 189 | + |
| 190 | +### Tab |
| 191 | +详细文档:[Tab Documentation](https://fusion.design/pc/component/tab) |
| 192 | + |
| 193 | +### Table |
| 194 | +详细文档:[Table Documentation](https://fusion.design/pc/component/table) |
| 195 | + |
| 196 | +### Tree |
| 197 | +详细文档:[Tree Documentation](https://fusion.design/pc/component/tree) |
| 198 | + |
| 199 | +### TreeSelect |
| 200 | +详细文档:[TreeSelect Documentation](https://fusion.design/pc/component/treeselect) |
| 201 | + |
| 202 | +### Upload |
| 203 | +详细文档:[Upload Documentation](https://fusion.design/pc/component/upload) |
| 204 | + |
| 205 | +### Divider |
| 206 | +详细文档:[Divider Documentation](https://fusion.design/pc/component/divider) |
| 207 | + |
| 208 | +## 说明 |
| 209 | + |
| 210 | +如果需要其他组件,可以提 issue 给我们。 |
0 commit comments