# @aglyn/shared-ui-jsx 中文文档

规范地址：https://npmcn.com/package/%40aglyn/shared-ui-jsx/

版本：1\.19\.0
npm 元数据更新时间：2026-11-07T13:59:27.265Z
中文译文更新时间：2026-11-05T21:46:59.714Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40aglyn/shared-ui-jsx
原文对照：https://npmcn.com/package/%40aglyn/shared-ui-jsx/?lang=original
项目主页：https://aglyn.com/
源码仓库：https://github.com/aglyn/aglyn

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：2.1 MB，402 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：22 个
- peer 依赖：next ^16\.3\.3，react ^19\.2\.8，react-dom ^19\.2\.8，@mui/utils ^9\.2\.0，@mui/styles ^6\.4\.8，@mui/system ^9\.2\.0，@mui/material ^9\.3\.1，@mui/x-data-grid ^9\.12\.0
- 首次发布：2026-09-20T23:54:22.428Z
- 最新版本发布：2026-11-07T13:59:26.946Z
- 近 30 天下载量：16208（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：161（近 12 个月 161 个）

## 中文简介

Aglyn的通用反应和材料UI组件库:布局和卡片原始,链接,菜单,材料设计图标路径的图标组件,影子-DOM主机,错误边界,加载和确认上下文,以及一组钩子. 那个

## 安装

```sh
npm install @aglyn/shared-ui-jsx
```

也可以使用：`pnpm add @aglyn/shared-ui-jsx`、`yarn add @aglyn/shared-ui-jsx`、`bun add @aglyn/shared-ui-jsx`

## README

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

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

> 从Aglyn monorepo出版到npm. 随后的版本 [语义版本](https://semver.org/)。 。 。 .

## 安装

```
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`

## 使用量

```tsx
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>
  )
}
```

不在根管中的组件 :

```tsx
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](https://github.com/aglyn/aglyn/tree/main/libs/shared/ui/jsx)

## 常见问题

### @aglyn/shared-ui-jsx 是什么？

Aglyn的通用反应和材料UI组件库:布局和卡片原始,链接,菜单,材料设计图标路径的图标组件,影子-DOM主机,错误边界,加载和确认上下文,以及一组钩子\. 那个

### 如何安装 @aglyn/shared-ui-jsx？

在项目目录运行 npm install @aglyn/shared-ui-jsx，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：next（^16\.3\.3）、react（^19\.2\.8）、react-dom（^19\.2\.8）、@mui/utils（^9\.2\.0）、@mui/styles（^6\.4\.8）、@mui/system（^9\.2\.0）、@mui/material（^9\.3\.1）、@mui/x-data-grid（^9\.12\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @aglyn/shared-ui-jsx 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @aglyn/shared-ui-jsx 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @aglyn/shared-ui-jsx 可以商用吗？

@aglyn/shared-ui-jsx 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @aglyn/shared-ui-jsx 的下载量有多少？

根据 npm 官方下载统计，@aglyn/shared-ui-jsx 在 2026/10/05 – 2026/11/03 这 30 天内被下载 16,208 次，日均约 540 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @aglyn/shared-ui-jsx 还在维护吗？

最新版本 1\.19\.0 发布于 2026/11/07（今天）；至今共发布 161 个版本，其中过去 12 个月发布了 161 个；首次发布于 2026/09/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。