@aphrody/ m3-反应

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

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

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。 。 。 .

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

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

槽和图标

子部分为时间档内容:

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 需要文库未加载的材料符号字体。 启动时装入一次 :

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(中文(简体) ). 每个 导出 :

  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(中文(简体) ).

列报要素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.json0 未解决.