@aglyn/plugins-mui (英语)
Aglyn地点的组件调色板,以材料UI为基础。 它是一个基础元素库,每个Aglyn站点都绘制有:布局,文本,导航,媒体,内容收藏等,每个库在核心组件登记册上注册,并配有其图案和预设. 如果您要提供 Aglyn 文档或运行 Besigner , 请安装它; 它是一端插件, 通过 Aglyn 的插件管理器装入 .
从Aglyn monorepo出版到npm. 随后的版本 语义版本。 。 。 .
安装
npm install @aglyn/plugins-mui
同伴依赖性 : react, (中文(简体) ), @mui/material, (中文(简体) ), @mui/utils。 。 。 .
里面有什么东西
插件有一个登记员, registerMuiPlugin (单位:千美元) site 书记官长 plugins.config.json)),并被标记为始终:它没有控制台页面,没有导航项目和API路线. 来自其他插件的特性捆绑会声明对它的依赖,并等待到它出现在插件管理器中.
要件. 插件登记册的组件 ID 列在下面 contributes.site.components 内 plugins.config.json 和作为 MUI_COMPONENT_SOURCES按组:
- 布局 :
section, (中文(简体) ),muiContainer, (中文(简体) ),muiStack, (中文(简体) ),muiBox, (中文(简体) ),muiGrid, (中文(简体) ),muiPaper, (中文(简体) ),layoutSlot。 。 。 . - 案文和行动:
muiTypography, (中文(简体) ),muiInlineText, (中文(简体) ),muiButton, (中文(简体) ),markdown, (中文(简体) ),tableOfContents, (中文(简体) ),icon。 。 。 . - 导航 :
muiAppBar, (中文(简体) ),muiToolbar, (中文(简体) ),muiNavMenu, (中文(简体) ),muiMegaMenu, (中文(简体) ),muiDrawer, (中文(简体) ),muiDrawerToggle, (中文(简体) ),muiScreenLink, (中文(简体) ),muiLinkBox, (中文(简体) ),muiBreadcrumbs, (中文(简体) ),muiPagination, (中文(简体) ),searchBox, (中文(简体) ),languageSwitcher, (中文(简体) ),themeModeSwitcher。 。 。 . - 表面 :
muiCard及其标题、内容和行动,muiAccordion及其摘要和细节,muiTabs, (中文(简体) ),muiTabPanel, (中文(简体) ),muiList, (中文(简体) ),muiListItem, (中文(简体) ),muiListItemText。 。 。 . - 媒体:
image, (中文(简体) ),video, (中文(简体) ),videoEmbed, (中文(简体) ),muiImageList, (中文(简体) ),muiImageListItem, (中文(简体) ),socialLinks。 。 。 . - 数据和内容:
dataTable, (中文(简体) ),collectionEntries, (中文(简体) ),collectionEntryBody, (中文(简体) ),collectionEntryMeta, (中文(简体) ),collectionEntryAuthor, (中文(简体) ),collectionRelated, (中文(简体) ),collectionShare, (中文(简体) ),collectionCategories, (中文(简体) ),collectionSearch, (中文(简体) ),contentAuthorProfile, (中文(简体) ),product。 。 。 . - 其他情况:
reusableInstance, (中文(简体) ),custom-html, (中文(简体) ),marketplacePlugin,以及div,文档的根.
将一个站点功能放入页面的计算器元素不在这里:它们是计算器市场插件(libs/plugins/calculator编号 aglyn.calculator.*) (中文(简体) ).
构成部分标识持续存在. 保存的屏幕文档中的每个节点都会存储其 componentId 旁边 pluginId: 'mui',所以上面的标识,包括遗产 mui- 前置的,不移入文档,不得更改.
每个组件加载. 每个元素都生活在自己的模块中,以动态导入为后盾. registerMuiPlugin(use) 接受一个 PluginUse 从 @aglyn/aglyn; 当 use.componentIds 将元素命名为页面位置,只获取这些模块。 它毫无争议地登记了整个库, 这是控制台和设计师需要的调色板。 以进一步的身份再次拨打,增加了已经登记的内容.
从 .
registerMuiPlugin, (中文(简体) ),loadMuiBundle, (中文(简体) ),MUI_COMPONENT_SOURCES,则MuiBundleEntry财务报告和审定财务报表MuiComponentSource类型,以及BUNDLE_ID(单位:千美元)'mui') (中文(简体) ).PluginFrame财务报告和审定财务报表PluginFrameProps: 沙盒的主机一侧一个已安装的市场插件运行在其中. 它使插件在跨发源地的沙盒 Iframe 中,只通过能力范围与之交谈postMessage当插件无法安全运行时, 显示占位符 .muiPluginInstallToPreset, (中文(简体) ),PluginInstallLike, (中文(简体) ),PLUGIN_DRAWER_CATEGORY: 已安装的市场插件如何成为放入调色板条目marketplacePlugin节点.sanitizeCustomHtml: 消毒剂custom-html元素适用于作者标记.
使用量
import { registerMuiPlugin } from '@aglyn/plugins-mui'
// An editor or console: the whole palette.
await registerMuiPlugin()
// A published page: only the elements this page places.
await registerMuiPlugin({ componentIds: ['section', 'muiTypography', 'muiButton'] })
在Aglyn的应用程序中,您自己不叫这个:生成的加载器清单给登记员打电话,并通过从页面文档读取的组件ID。 元件从未被注册的元素不会产生任何效果,所以无法说出其位置的表层应该登记整个库.
怎样才合适
一个插件软件包( E)scope:plugin) (中文(简体) ). 取决于核心@aglyn/aglyn)和通用共享软件包(@aglyn/shared-ui-jsx, (中文(简体) ), @aglyn/shared-ui-theme, (中文(简体) ), @aglyn/shared-data-enums, (中文(简体) ), @aglyn/shared-data-mdi, (中文(简体) ), @aglyn/shared-util-vendor)和使用 mobx 进行分批登记。 它没有进口其他插件,也没有进口设计师UI. 没有其它插件导入它: 特性捆绑名称 mui 作为插件管理器中的依赖性 id 而不是导入软件包, 曾经住在这里的窗体元素在其中 @aglyn/plugins-forms。 。 。 .
许可证
阿帕奇2.0 (英语). 资料来源: https://github.com/aglyn/aglyn/tree/main/libs/plugins/mui 页面存档备份,存于互联网档案馆