@aglyn/shared-ui-jsx (英语)

Aglyn的通用反应和材料UI组件库:布局和卡片原始,链接,菜单,材料设计图标路径的图标组件,影子-DOM主机,错误边界,加载和确认上下文,以及一组钩子. 渲染器, Besigner, 租户运行时间和每个功能插件都在上面构建他们的UI. 里面什么都不知道Aglyn的数据模型,所以可以用于任何React和MUI应用.

从Aglyn monorepo出版到npm. 随后的版本 语义版本。 。 。 .

安装

npm install @aglyn/shared-ui-jsx

同伴依赖性 : react, (中文(简体) ), react-dom, (中文(简体) ), next, (中文(简体) ), @mui/material, (中文(简体) ), @mui/system, (中文(简体) ), @mui/utils, (中文(简体) ), @mui/styles 财务报告和审定财务报表 @mui/x-data-grid。 。 。 . next 需要链接和路由器-活动模块,以及 @mui/x-data-grid 按数据表排列.

里面有什么东西

根入意为小. 一个出版的Aglyn网站进口了这个桶,所以它只再出口一个提供页面或设计者需要的名字. 其他的都是由子道导入的,它使重的部件远离不使用它们的捆绑. 软件包声明 "sideEffects": false。 。 。 .

从 @aglyn/shared-ui-jsx数字 :

• 组件 : AppLink (a) Next.js 链接作为 MUI 链接、按钮、图标按钮或 fab 提供,由 variant, (中文(简体) ), CardDisplay, (中文(简体) ), CardListItem, (中文(简体) ), Container, (中文(简体) ), GridItems, (中文(简体) ), Menu, (中文(简体) ), HelpTip, (中文(简体) ), AglynText, (中文(简体) ), SrOnly。 。 。 .
• 图标 : MdiIcon 使 MUI 中的 SVG 路径 SvgIcon。 。 。 . MdiIconFromId 需要一个 iconId 这是一个 @mdi/js 导出名称并按需加载路径, 如 useMdiIcon 财务报告和审定财务报表 useMdiIcons 来 根也全部再出口 @aglyn/shared-data-mdi,以及Aglyn和Besigner标识组件.
• 隔离和错误: ShadowDom 财务报告和审定财务报表 MuiShadowDom (将孩子放入阴影根中,后者带有MUI的风格被放入它), ErrorBoundaryComponent 财务报告和审定财务报表 withErrorBoundary。 。 。 .
• 背景情况 : LoadingProviderComponent 编号 : useLoading,以及 ConfirmationContext 编号 : useConfirmationContext。 。 。 .
• 钩子: useAsyncEffect, (中文(简体) ), useSubscribable (订阅 RxJS 风格的可观察), useMergeRefs 编号 : mergeRefs, (中文(简体) ), useCallbackParamRef, (中文(简体) ), useId, (中文(简体) ), useIsomorphicLayoutEffect,则 useOnRouteChangeStart 路由器 - 事件钩的家族.
• 帮助者 : createHocWithContextConsumer, (中文(简体) ), withHocFactoryBuilder, (中文(简体) ), makeLinkElements, (中文(简体) ), makeMetaElements。 。 。 .

藉由潜行, @aglyn/shared-ui-jsx/components/<file>,例如:

• data-table.component —— 说 DataTableComponent,超过 MUI X 数据网格
• grid-list —— 说 GridList,虚拟化网格
• empty-state.component —— 说 EmptyStateComponent
• list-pagination.component —— 说 ListPagination
• dialog-confirm —— 说 DialogConfirm· ; confirmation-provider.component —— 说 ConfirmationProviderComponent
• navigation-drawer.component, (中文(简体) ), splash-screen, (中文(简体) ), loading-modal, (中文(简体) ), sandbox-frame, (中文(简体) ), usage-meter.component

使用量

import { CardDisplay, MdiIcon, mdiAbacus } from '@aglyn/shared-ui-jsx'

export function Example() {
  return (
    <CardDisplay header="Totals" subheader="This month">
      <MdiIcon path={mdiAbacus.path} fontSize="large" />
    </CardDisplay>
  )
}

不在根管中的组件 :

import EmptyStateComponent from '@aglyn/shared-ui-jsx/components/empty-state.component'

组件期望上面有一个 MUI 主题 . @aglyn/shared-ui-theme 提供Aglyn使用的主题,包括调色板添加部分这些组件参考.

怎样才合适

A 类 shared UI软件包. 这取决于 @aglyn/shared-ui-theme, (中文(简体) ), @aglyn/shared-data-mdi, (中文(简体) ), @aglyn/shared-util-tools 财务报告和审定财务报表 @aglyn/shared-util-vendor。 。 。 . @aglyn/shared-ui-jsx-forms, (中文(简体) ), @aglyn/shared-ui-next, (中文(简体) ), @aglyn/shared-ui-json-editor,节点渲染器,Besigner,租户运行时间和功能插件都依赖于它. 共享软件包是通用的:它们只导入其他共享软件包并持有没有插件的域名.

许可证

阿帕奇2.0 (英语). 资料来源: https://github.com/aglyn/aglyn/tree/main/libs/shared/ui/jsx 互联网档案馆的存檔,存档日期2014-12-02