@aphrody/m3 - 小学

材质设计 3 反应原始人(按钮,字段,菜单,对话框,卡片,土司) 在 Base UI上,从 SpaceUI 重建 @spacedrive/primitives。 。 。 .

bun add @aphrody/m3-primitives @aphrody/m3-theme @aphrody/m3-tokens react react-dom tailwindcss

import {
  Button,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Input,
} from "@aphrody/m3-primitives";

export function Welcome() {
  return (
    <Card variant="elevated">
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent>
        <Input placeholder="Your name" icon="person" />
        <Button variant="filled">Get started</Button>
      </CardContent>
    </Card>
  );
}

许可证:Apache-2.0和麻省理工学院LICENSE, (中文(简体) ), LICENSE.spaceui) (中文(简体) ). 安装指南 : 文件/材料/立方米/INSTALL.md。 。 。 .

SpaceUI设定(MIT, (c) Spacedrive)在M3系统上被重建:颜色角色和状态层,10步形状尺度, 排版尺、焦点环、高地、材料符号和 @aphrody/m3-motion。 。 。 . 基础UI (单位:千美元)@base-ui/react)是无头层:它拥有行为,键盘交互,焦点 管理和无障碍,并驱动 M3 通过其 data-starting-style 编号 : data-ending-style 属性。 每个上游出口和道具仍然起作用;Radix时代道具(asChild, (中文(简体) ), checked="indeterminate", (中文(简体) ), delayDuration, (中文(简体) ), forceMount, (中文(简体) ), onSelect, 数组滑动器值)被映射到 Base UI,以及 基础UI道具也被接受.

每个组件的组合规则、符号映射和材料Web当量: 空间-M3-未来.md。 。 。 . 端点 : react 财务报告和审定财务报表 react-dom 18或19岁, tailwindcss 4.1+ (英语).

样式

这些部件采用M3 Tailwind公用事业(bg-surface-container, (中文(简体) ), text-on-surface-variant, (中文(简体) ), rounded-full, (中文(简体) ), text-label-large, (中文(简体) ), hover:bg-on-surface/8),所以应用程序 用 Tailwind v4 编译它们 :

@import "tailwindcss";
@import "@aphrody/m3-tokens/m3-tokens.css"; /* shape, typescale, elevation, motion, state */
@import "@aphrody/m3-theme/spaceui.css"; /* SpaceUI themes as M3 schemes — or tokens.css */
@import "@aphrody/m3-theme/tailwind.css"; /* M3 utilities */
@source "../node_modules/@aphrody/m3-primitives/dist";

图标使用材料符号字体:导入 @aphrody/m3-fonts/fonts-symbols.css,或,与 @aphrody/material-web 已安装, 注册一次 :

import { ensureMaterialSymbols } from "@aphrody/material-web/icon/material-symbols.js";
ensureMaterialSymbols();

使用量

import {
  Button,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Icon,
  Input,
} from "@aphrody/m3-primitives";

export function Welcome() {
  return (
    <Card variant="elevated">
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <Input placeholder="Your name" icon="person" />
        <Button variant="filled">
          <Icon name="arrow_forward" size={18} /> Get started
        </Button>
      </CardContent>
    </Card>
  );
}

构成部分

大小:默认值( E)md/unset)为M3基线高;尺寸较小为M3密度阶.

来自 @spacedrive/primitives

重命名导入 。 Phosphor 图标道具仍在编译(它们接受 IconSource: a 材料 符号名称、元素或组件。 明显差异: M3高地(输入默认为56高地, 图标按钮到40),丸形按钮, secondary-container 选择, 材料符号glyphs, Select 在它的下方打开, Collapsible 绘制一个 expand_more 指标(indicator={false} 页:1.

发展

bun run typecheck
bun test          # happy-dom preloaded by bunfig.toml
bun run build     # Bun.build + declarations