# @aphrody/m3-react 中文文档

规范地址：https://npmcn.com/package/%40aphrody/m3-react/

版本：1\.4\.7
npm 元数据更新时间：2026-10-23T03:52:09.741Z
中文译文更新时间：2026-11-07T02:13:02.332Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40aphrody/m3-react
原文对照：https://npmcn.com/package/%40aphrody/m3-react/?lang=original
项目主页：https://github.com/aphrody-labs/bun-distribution/tree/os/packages/m3-react#readme
源码仓库：https://github.com/aphrody-labs/bun-distribution

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

- 包体积（解压后）：499 kB，443 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：react \>=18\.0\.0，react-dom \>=18\.0\.0，@aphrody/material-web ^3\.3\.3
- 首次发布：2026-06-03T22:55:42.004Z
- 最新版本发布：2026-10-23T03:52:09.527Z
- 近 30 天下载量：2074（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：16（近 12 个月 16 个）

## 中文简介

对@aphrody/material-web分叉的每个<md-->元素进行回放包装(@lit/react CreateComponent).

## 安装

```sh
npm install @aphrody/m3-react
```

也可以使用：`pnpm add @aphrody/m3-react`、`yarn add @aphrody/m3-react`、`bun add @aphrody/m3-react`

## README

# @aphrody/ m3-反应

为每个输入的反射组件 `md-*` 要素 `@aphrody/material-web`生成 `@lit/react` `createComponent`。 。 。 .

```sh
bun add @aphrody/m3-react @aphrody/material-web react react-dom
```

```tsx
import {
  MdCheckbox,
  MdFilledButton,
  MdOutlinedTextField,
} from "@aphrody/m3-react";

export function SignIn() {
  return (
    <form>
      <MdOutlinedTextField
        label="Email"
        onInput={e => console.log((e.target as HTMLInputElement).value)}
      />
      <MdCheckbox
        onChange={e => console.log((e.target as HTMLInputElement).checked)}
      />
      <MdFilledButton type="submit">Sign in</MdFilledButton>
    </form>
  );
}
```

许可证: Apache-2.0(`LICENSE`) (中文(简体) ). 安装指南 : [文件/材料/立方米/INSTALL.md](https://github.com/aphrody-labs/bun-distribution/blob/os/docs/material/m3/INSTALL.md)。 。 。 .

每个标记一个包裹(标签名的PascalCase),其中元素真实的原生事件被映射到React道具上. 正在导入 a 包装器将其自定义元素登记为副作用(包装器导入 `@aphrody/material-web` 调用模块 `customElements.define`;不需要其他导入。 这些元素是Lit网络组件,因此它们在客户端上渲染; 见 [框架.md](https://npmcn.com/package/%40aphrody/m3-react/FRAMEWORKS.md) 用于SSSR和RSC设置.

| 导入 | 目录 |
| --- | --- |
| `@aphrody/m3-react` | 全部包装( E)`MdFilledButton`, (中文(简体) ), `MdDialog`, (...) (中文(简体) ) |
| `@aphrody/m3-react/<group>` | 一个包装组,例如:. `@aphrody/m3-react/button` |
| `@aphrody/m3-react/transitions` | `Collapse`, (中文(简体) ), `Fade`, (中文(简体) ), `Grow`, (中文(简体) ), `Slide`, (中文(简体) ), `Zoom` |
| `@aphrody/m3-react/adaptive` | 窗口大小类钩子( SSR- safe) |
| `@aphrody/m3-react/state` | `useTextFieldState`, (中文(简体) ), `bindTextFieldState` |
| `@aphrody/m3-react/data` | `DataTable`, (中文(简体) ), `VirtualList` |
| `@aphrody/m3-react/adapters/tanstack` | TanStack 表格适配器 |

控制的投入已读取 `e.target.value` 编号 : `e.target.checked`; 处理器接收 DOM 事件, 而不是 `(event, value)`。 。 。 .

## 槽和图标

子部分为时间档内容:

```tsx
import {
  MdDialog,
  MdFilledButton,
  MdIcon,
  MdTextButton,
} from "@aphrody/m3-react";

<MdDialog
  open
  onClosed={e => console.log((e.target as HTMLDialogElement).returnValue)}
>
  <div slot="headline">Delete?</div>
  <form slot="content" method="dialog">
    This cannot be undone.
  </form>
  <div slot="actions">
    <MdTextButton value="cancel">Cancel</MdTextButton>
    <MdFilledButton value="delete">
      <MdIcon slot="icon">delete</MdIcon>
      Delete
    </MdFilledButton>
  </div>
</MdDialog>;
```

`MdIcon` 需要文库未加载的材料符号字体。 启动时装入一次 :

```ts
import { ensureMaterialSymbols } from "@aphrody/material-web/icon/material-symbols.js";
ensureMaterialSymbols(); // or { iconNames: ["delete", "search"] } to subset
```

子文本为glyph名 (Matrial symbox case). 可变轴为符: `--md-icon-fill` (0.1项), `--md-icon-wght` (100.700), (中文(简体) ), `--md-icon-grad`, (中文(简体) ), `--md-icon-opsz`。 。 。 .

## 版式

-   `src/index.ts`:再出口每个包装(一个) `export *` 每组).
    
-   `src/wrappers/<group>.ts`: 每份文件一个 `material-web` 源文件夹( e)`button.ts`, (中文(简体) ), `select.ts`, (中文(简体) ), `labs.ts`(中文(简体) ). 每个 导出 :
    
    ```ts
    export const MdFilledButton = createComponent({
      react: React,
      tagName: "md-filled-button",
      elementClass: MdFilledButtonElement, // from @aphrody/material-web/button/filled-button.js
      events: {}, // real native events (see the table below)
    });
    ```
    
-   `generate.ts`: 读取 `md-elements.txt`扫描 a `material-web` 源检出( r)`--source <dir>`)将每个标记解为 其条目文件和导出类别(`@customElement('md-x') export class Foo`),应用已核实的事件表 写入 `src/wrappers/`, (中文(简体) ), `src/index.ts`, (中文(简体) ), `.manifest.json` 以及本研究的最后一节。 更喜欢吃油炸 路径(由 `all.ts`, (中文(简体) ), `aphrody-components.ts` 或者说 `aphrody-labs.ts`),则不`labs/gb`,则 `labs/gb` (唯一一个) 户籍 `md-button`, (中文(简体) ), `md-card`, (中文(简体) ), `md-menu-group` 财务报告和审定财务报表 `md-split-button`,其课程被重新命名为 `Md*`) (中文(简体) ).
    
-   `src/material-web-shims.d.ts`: 环境 `*.cssresult.js` 财务报告和审定财务报表 `*.css` 模块,见下文.
    

## (在Lit资料中核实)

事件名称来自 `@fires` 财务报告和审定财务报表 `new (Custom)?Event('...')` 内 `material-web/<dir>/internal/*.ts`. 上游组件 使用普通名称( e)`input`, (中文(简体) ), `change`, (中文(简体) ), `opening`,...);分叉组件命名空间它们的(`paginator:page`, (中文(简体) ), `table:sort`, (中文(简体) ), `side-sheet:opening`, (中文(简体) ), `tree:select`(中文(简体) ).

| 元素 | 对本地事件的反应道具 |
| --- | --- |
| `MdCheckbox`, (中文(简体) ), `MdRadio`, (中文(简体) ), `MdSwitch`, (中文(简体) ), `MdSlider`, (中文(简体) ), `Md*TextField` | `onChange:change`, (中文(简体) ), `onInput:input` |
| `MdFilledSelect`, (中文(简体) ), `MdOutlinedSelect` | `+onOpening/onOpened/onClosing/onClosed` |
| `MdDialog` | `onOpen:open`, (中文(简体) ), `onOpened`, (中文(简体) ), `onClose:close`, (中文(简体) ), `onClosed`, (中文(简体) ), `onCancel:cancel` |
| `MdMenu`, (中文(简体) ), `MdSubMenu` | `onOpening/onOpened/onClosing/onClosed` |
| `MdMenuItem` | `onCloseMenu:close-menu` |
| `MdSnackbar` | `onOpening/onOpened/onClosing/onClosed` (空地) |
| `MdBottomSheet` 编号 : `MdSideSheet` | `onOpening:bottom-sheet:opening` ... (叉子,命名空间) |
| `MdSearchBar` | `onInput`, (中文(简体) ), `onSearch:search`, (中文(简体) ), `onSearchOpen/onSearchClose` |
| `MdAutocomplete` | `onInput`, (中文(简体) ), `onSelect:autocomplete:select` |
| `MdNavigationBar` | `onActivated:navigation-bar-activated` |
| `MdNavigationRail` | `onChange:navigation-rail:change`, (中文(简体) ), `onItemActivate` |
| `MdNavigationDrawer(Modal)` | `onNavigationDrawerChanged:navigation-drawer-changed` |
| `MdInputChip` | `onRemove:remove`, (中文(简体) ), `onUpdateFocus:update-focus` |
| `MdButtonGroup` | `onChange:button-group:change` |
| `MdFabMenu` 编号 : `MdFabMenuItem` | `onOpen/onClose:fab-menu:*`, (中文(简体) ), `onClick:fab-menu-item:click` |
| `MdExpansionPanel` | `onToggle:expansion:toggle` |
| `MdStepper` | `onChange:stepper:change` |
| `MdDatePicker` 编号 : `MdTimePicker` | `onChange:date-picker:change` 编号 : `time-picker:change` |
| `MdTable` | `onSort:table:sort`, (中文(简体) ), `onSelectionChange:table:selection-change` |
| `MdPaginator` | `onPage:paginator:page` |
| `MdTree` 编号 : `MdTreeItem` | `onSelect:tree:select` 编号 : `onToggle:tree-item:toggle`, (中文(简体) ), `onActivate` |
| `MdVirtualScroller` | `onRange:virtual-scroll:range` |
| `MdTooltip` | `onShow:tooltip-show`, (中文(简体) ), `onHide:tooltip-hide` |
| `MdTabs` | `onChange:change` |

列报要素`md-icon`, (中文(简体) ), `md-divider`, (中文(简体) ), `md-elevation`, (中文(简体) ), `md-ripple`, (中文(简体) ), `md-focus-ring`,辅助/过滤/建议 芯片,卡片,法布,按钮, `md-item`, (中文(简体) ), `md-toolbar`, (中文(简体) ), `md-carousel`, (中文(简体) ), `md-accordion`, (中文(简体) ), `md-loading-indicator`边框和 脚手架)没有出现记录的事件: `events: {}`。 。 。 .

## 类型检查

`bun check --noEmit` 检查包装和 `material-web` 他们导入源 。 包裹 `tsconfig.json` 设定 :

1.  `experimentalDecorators: true` 财务报告和审定财务报表 `useDefineForClassFields: false`:分叉的Lit元素使用遗留的装饰.
2.  `src/material-web-shims.d.ts`: 声明 `*.cssresult.js` 财务报告和审定财务报表 `*.css` 作为环境模块。 它们是萨斯建筑的文物 缺少源检出; 包装从不触碰, 所以输入 `any` (这也避免了名义上的) 冲突 `material-web`筑起巢来 `lit@2` 这个包裹 `lit@3`) (中文(简体) ).
3.  `moduleResolution: bundler`: 解析为空 `@aphrody/material-web/x/y.js` 进口.

对抗一个建筑 `material-web` (与 `*.cssresult.js` 财务报告和审定财务报表 `*.css` 现在,shims是不必要的。 所有119个标记 `md-elements.txt` 解析为带有导出类的真正条目文件.

## 所有包装 (119)

> 由 `generate.ts` (单位:千美元)`.manifest.json`0 未解决.

| 包装 | 标记 | 元素导入 | \# 事件 # |
| --- | --- | --- | --- |
| `Md3dCanvas` | `md-3d-canvas` | `@aphrody/material-web/canvas3d/canvas-3d.js` | —— 说 |
| `Md3dCard` | `md-3d-card` | `@aphrody/material-web/card3d/card-3d.js` | —— 说 |
| `Md3dGlobe` | `md-3d-globe` | `@aphrody/material-web/globe3d/globe-3d.js` | —— 说 |
| `MdAccordion` | `md-accordion` | `@aphrody/material-web/expansion/accordion.js` | —— 说 |
| `MdAlert` | `md-alert` | `@aphrody/material-web/alert/alert.js` | 1个 |
| `MdAreaChart` | `md-area-chart` | `@aphrody/material-web/charts/area-chart.js` | —— 说 |
| `MdAssistChip` | `md-assist-chip` | `@aphrody/material-web/chips/assist-chip.js` | —— 说 |
| `MdAutocomplete` | `md-autocomplete` | `@aphrody/material-web/autocomplete/autocomplete.js` | 2个 |
| `MdAvatar` | `md-avatar` | `@aphrody/material-web/avatar/avatar.js` | 1个 |
| `MdAvatarGroup` | `md-avatar-group` | `@aphrody/material-web/avatar/avatar-group.js` | —— 说 |
| `MdBackdrop` | `md-backdrop` | `@aphrody/material-web/backdrop/backdrop.js` | —— 说 |
| `MdBadge` | `md-badge` | `@aphrody/material-web/badge/badge.js` | —— 说 |
| `MdBarChart` | `md-bar-chart` | `@aphrody/material-web/charts/bar-chart.js` | —— 说 |
| `MdBottomAppBar` | `md-bottom-app-bar` | `@aphrody/material-web/appbar/bottom-app-bar.js` | —— 说 |
| `MdBottomSheet` | `md-bottom-sheet` | `@aphrody/material-web/sheet/bottom-sheet.js` | 页:1 |
| `MdBrandedFab` | `md-branded-fab` | `@aphrody/material-web/fab/branded-fab.js` | —— 说 |
| `MdBreadcrumbs` | `md-breadcrumbs` | `@aphrody/material-web/breadcrumbs/breadcrumbs.js` | —— 说 |
| `MdButton` | `md-button` | `@aphrody/material-web/labs/gb/components/button/md-button.js` | —— 说 |
| `MdButtonGroup` | `md-button-group` | `@aphrody/material-web/buttongroup/button-group.js` | 1个 |
| `MdCard` | `md-card` | `@aphrody/material-web/card/card.js` | —— 说 |
| `MdCarousel` | `md-carousel` | `@aphrody/material-web/carousel/carousel.js` | 1个 |
| `MdCarouselItem` | `md-carousel-item` | `@aphrody/material-web/carousel/carousel-item.js` | —— 说 |
| `MdCheckbox` | `md-checkbox` | `@aphrody/material-web/checkbox/checkbox.js` | 2个 |
| `MdChipSet` | `md-chip-set` | `@aphrody/material-web/chips/chip-set.js` | —— 说 |
| `MdCircularProgress` | `md-circular-progress` | `@aphrody/material-web/progress/circular-progress.js` | —— 说 |
| `MdDatePicker` | `md-date-picker` | `@aphrody/material-web/datepicker/date-picker.js` | 1个 |
| `MdDateRangePicker` | `md-date-range-picker` | `@aphrody/material-web/datepicker/date-range-picker.js` | 3个 |
| `MdDateTimePicker` | `md-date-time-picker` | `@aphrody/material-web/datepicker/date-time-picker.js` | 3个 |
| `MdDialog` | `md-dialog` | `@aphrody/material-web/dialog/dialog.js` | 页:1 |
| `MdDivider` | `md-divider` | `@aphrody/material-web/divider/divider.js` | —— 说 |
| `MdElevatedButton` | `md-elevated-button` | `@aphrody/material-web/button/elevated-button.js` | —— 说 |
| `MdElevatedCard` | `md-elevated-card` | `@aphrody/material-web/labs/card/elevated-card.js` | —— 说 |
| `MdElevation` | `md-elevation` | `@aphrody/material-web/elevation/elevation.js` | —— 说 |
| `MdExpansionPanel` | `md-expansion-panel` | `@aphrody/material-web/expansion/expansion-panel.js` | 1个 |
| `MdFab` | `md-fab` | `@aphrody/material-web/fab/fab.js` | —— 说 |
| `MdFabMenu` | `md-fab-menu` | `@aphrody/material-web/fabmenu/fab-menu.js` | 2个 |
| `MdFabMenuItem` | `md-fab-menu-item` | `@aphrody/material-web/fabmenu/fab-menu-item.js` | 1个 |
| `MdFilledButton` | `md-filled-button` | `@aphrody/material-web/button/filled-button.js` | —— 说 |
| `MdFilledCard` | `md-filled-card` | `@aphrody/material-web/labs/card/filled-card.js` | —— 说 |
| `MdFilledField` | `md-filled-field` | `@aphrody/material-web/field/filled-field.js` | —— 说 |
| `MdFilledIconButton` | `md-filled-icon-button` | `@aphrody/material-web/iconbutton/filled-icon-button.js` | —— 说 |
| `MdFilledSelect` | `md-filled-select` | `@aphrody/material-web/select/filled-select.js` | 6个 |
| `MdFilledTextField` | `md-filled-text-field` | `@aphrody/material-web/textfield/filled-text-field.js` | 2个 |
| `MdFilledTonalButton` | `md-filled-tonal-button` | `@aphrody/material-web/button/filled-tonal-button.js` | —— 说 |
| `MdFilledTonalIconButton` | `md-filled-tonal-icon-button` | `@aphrody/material-web/iconbutton/filled-tonal-icon-button.js` | —— 说 |
| `MdFilterChip` | `md-filter-chip` | `@aphrody/material-web/chips/filter-chip.js` | —— 说 |
| `MdFocusRing` | `md-focus-ring` | `@aphrody/material-web/focus/md-focus-ring.js` | —— 说 |
| `MdGauge` | `md-gauge` | `@aphrody/material-web/charts/gauge.js` | —— 说 |
| `MdGridList` | `md-grid-list` | `@aphrody/material-web/gridlist/grid-list.js` | —— 说 |
| `MdGridTile` | `md-grid-tile` | `@aphrody/material-web/gridlist/grid-tile.js` | —— 说 |
| `MdIcon` | `md-icon` | `@aphrody/material-web/icon/icon.js` | —— 说 |
| `MdIconButton` | `md-icon-button` | `@aphrody/material-web/iconbutton/icon-button.js` | —— 说 |
| `MdInputChip` | `md-input-chip` | `@aphrody/material-web/chips/input-chip.js` | 2个 |
| `MdItem` | `md-item` | `@aphrody/material-web/labs/item/item.js` | —— 说 |
| `MdLinearProgress` | `md-linear-progress` | `@aphrody/material-web/progress/linear-progress.js` | —— 说 |
| `MdLineChart` | `md-line-chart` | `@aphrody/material-web/charts/line-chart.js` | —— 说 |
| `MdLink` | `md-link` | `@aphrody/material-web/link/link.js` | —— 说 |
| `MdList` | `md-list` | `@aphrody/material-web/list/list.js` | —— 说 |
| `MdListDetail` | `md-list-detail` | `@aphrody/material-web/layout/md-list-detail.js` | —— 说 |
| `MdListItem` | `md-list-item` | `@aphrody/material-web/list/list-item.js` | —— 说 |
| `MdLoadingIndicator` | `md-loading-indicator` | `@aphrody/material-web/loadingindicator/loading-indicator.js` | —— 说 |
| `MdMenu` | `md-menu` | `@aphrody/material-web/menu/menu.js` | 页:1 |
| `MdMenuGroup` | `md-menu-group` | `@aphrody/material-web/labs/gb/components/menu/md-menu-group.js` | —— 说 |
| `MdMenuItem` | `md-menu-item` | `@aphrody/material-web/menu/menu-item.js` | 1个 |
| `MdMobileStepper` | `md-mobile-stepper` | `@aphrody/material-web/mobilestepper/mobile-stepper.js` | —— 说 |
| `MdNavigationBar` | `md-navigation-bar` | `@aphrody/material-web/labs/navigationbar/navigation-bar.js` | 1个 |
| `MdNavigationDrawer` | `md-navigation-drawer` | `@aphrody/material-web/labs/navigationdrawer/navigation-drawer.js` | 1个 |
| `MdNavigationDrawerModal` | `md-navigation-drawer-modal` | `@aphrody/material-web/labs/navigationdrawer/navigation-drawer-modal.js` | 1个 |
| `MdNavigationRail` | `md-navigation-rail` | `@aphrody/material-web/navigationrail/navigation-rail.js` | 2个 |
| `MdNavigationRailItem` | `md-navigation-rail-item` | `@aphrody/material-web/navigationrail/navigation-rail-item.js` | —— 说 |
| `MdNavigationTab` | `md-navigation-tab` | `@aphrody/material-web/labs/navigationtab/navigation-tab.js` | —— 说 |
| `MdOutlinedButton` | `md-outlined-button` | `@aphrody/material-web/button/outlined-button.js` | —— 说 |
| `MdOutlinedCard` | `md-outlined-card` | `@aphrody/material-web/labs/card/outlined-card.js` | —— 说 |
| `MdOutlinedField` | `md-outlined-field` | `@aphrody/material-web/field/outlined-field.js` | —— 说 |
| `MdOutlinedIconButton` | `md-outlined-icon-button` | `@aphrody/material-web/iconbutton/outlined-icon-button.js` | —— 说 |
| `MdOutlinedSegmentedButton` | `md-outlined-segmented-button` | `@aphrody/material-web/labs/segmentedbutton/outlined-segmented-button.js` | —— 说 |
| `MdOutlinedSegmentedButtonSet` | `md-outlined-segmented-button-set` | `@aphrody/material-web/labs/segmentedbuttonset/outlined-segmented-button-set.js` | —— 说 |
| `MdOutlinedSelect` | `md-outlined-select` | `@aphrody/material-web/select/outlined-select.js` | 6个 |
| `MdOutlinedTextField` | `md-outlined-text-field` | `@aphrody/material-web/textfield/outlined-text-field.js` | 2个 |
| `MdPaginator` | `md-paginator` | `@aphrody/material-web/paginator/paginator.js` | 1个 |
| `MdPane` | `md-pane` | `@aphrody/material-web/layout/md-pane.js` | —— 说 |
| `MdPieChart` | `md-pie-chart` | `@aphrody/material-web/charts/pie-chart.js` | —— 说 |
| `MdPopover` | `md-popover` | `@aphrody/material-web/popover/popover.js` | 2个 |
| `MdPrimaryTab` | `md-primary-tab` | `@aphrody/material-web/tabs/primary-tab.js` | —— 说 |
| `MdRadarChart` | `md-radar-chart` | `@aphrody/material-web/charts/radar-chart.js` | —— 说 |
| `MdRadio` | `md-radio` | `@aphrody/material-web/radio/radio.js` | 2个 |
| `MdRating` | `md-rating` | `@aphrody/material-web/rating/rating.js` | 2个 |
| `MdRipple` | `md-ripple` | `@aphrody/material-web/ripple/ripple.js` | —— 说 |
| `MdScaffold` | `md-scaffold` | `@aphrody/material-web/layout/md-scaffold.js` | —— 说 |
| `MdScatterChart` | `md-scatter-chart` | `@aphrody/material-web/charts/scatter-chart.js` | —— 说 |
| `MdScheduler` | `md-scheduler` | `@aphrody/material-web/scheduler/scheduler.js` | 3个 |
| `MdSearchBar` | `md-search-bar` | `@aphrody/material-web/search/search-bar.js` | 页:1 |
| `MdSecondaryTab` | `md-secondary-tab` | `@aphrody/material-web/tabs/secondary-tab.js` | —— 说 |
| `MdSelectOption` | `md-select-option` | `@aphrody/material-web/select/select-option.js` | —— 说 |
| `MdSideSheet` | `md-side-sheet` | `@aphrody/material-web/sheet/side-sheet.js` | 页:1 |
| `MdSkeleton` | `md-skeleton` | `@aphrody/material-web/skeleton/skeleton.js` | —— 说 |
| `MdSlider` | `md-slider` | `@aphrody/material-web/slider/slider.js` | 2个 |
| `MdSnackbar` | `md-snackbar` | `@aphrody/material-web/snackbar/snackbar.js` | 页:1 |
| `MdSparkline` | `md-sparkline` | `@aphrody/material-web/charts/sparkline.js` | —— 说 |
| `MdSplitButton` | `md-split-button` | `@aphrody/material-web/labs/gb/components/splitbutton/md-split-button.js` | —— 说 |
| `MdStep` | `md-step` | `@aphrody/material-web/stepper/step.js` | —— 说 |
| `MdStepper` | `md-stepper` | `@aphrody/material-web/stepper/stepper.js` | 1个 |
| `MdSubMenu` | `md-sub-menu` | `@aphrody/material-web/menu/sub-menu.js` | 页:1 |
| `MdSuggestionChip` | `md-suggestion-chip` | `@aphrody/material-web/chips/suggestion-chip.js` | —— 说 |
| `MdSupportingPane` | `md-supporting-pane` | `@aphrody/material-web/layout/md-supporting-pane.js` | —— 说 |
| `MdSurface` | `md-surface` | `@aphrody/material-web/surface/surface.js` | —— 说 |
| `MdSwitch` | `md-switch` | `@aphrody/material-web/switch/switch.js` | 2个 |
| `MdTable` | `md-table` | `@aphrody/material-web/table/table.js` | 2个 |
| `MdTabs` | `md-tabs` | `@aphrody/material-web/tabs/tabs.js` | 1个 |
| `MdTextButton` | `md-text-button` | `@aphrody/material-web/button/text-button.js` | —— 说 |
| `MdTimePicker` | `md-time-picker` | `@aphrody/material-web/timepicker/time-picker.js` | 1个 |
| `MdToolbar` | `md-toolbar` | `@aphrody/material-web/toolbar/md-toolbar.js` | —— 说 |
| `MdTooltip` | `md-tooltip` | `@aphrody/material-web/tooltip/tooltip.js` | 2个 |
| `MdTopAppBar` | `md-top-app-bar` | `@aphrody/material-web/appbar/top-app-bar.js` | —— 说 |
| `MdTree` | `md-tree` | `@aphrody/material-web/tree/tree.js` | 1个 |
| `MdTreeItem` | `md-tree-item` | `@aphrody/material-web/tree/tree-item.js` | 2个 |
| `MdType` | `md-type` | `@aphrody/material-web/typography/md-type.js` | —— 说 |
| `MdVirtualScroller` | `md-virtual-scroller` | `@aphrody/material-web/virtualscroll/virtual-scroller.js` | 1个 |
| `MdWebgpuCanvas` | `md-webgpu-canvas` | `@aphrody/material-web/effects/webgpu-canvas.js` | —— 说 |

## 常见问题

### @aphrody/m3-react 是什么？

对@aphrody/material-web分叉的每个\<md--\>元素进行回放包装\(@lit/react CreateComponent\)\.

### 如何安装 @aphrody/m3-react？

在项目目录运行 npm install @aphrody/m3-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18\.0\.0）、react-dom（\>=18\.0\.0）、@aphrody/material-web（^3\.3\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @aphrody/m3-react 支持 TypeScript 吗？

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

### @aphrody/m3-react 支持 ESM 还是 CommonJS？

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

### @aphrody/m3-react 可以商用吗？

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

### @aphrody/m3-react 的下载量有多少？

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

### @aphrody/m3-react 还在维护吗？

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