# @adam01230/expressive-angular 中文文档

规范地址：https://npmcn.com/package/%40adam01230/expressive-angular/

版本：0\.19\.1
npm 元数据更新时间：2026-11-02T21:06:13.926Z
中文译文更新时间：2026-11-06T14:04:47.802Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40adam01230/expressive-angular
原文对照：https://npmcn.com/package/%40adam01230/expressive-angular/?lang=original
项目主页：https://github.com/AdamKITZ/expressive-angular#readme
源码仓库：https://github.com/AdamKITZ/expressive-angular

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

- 包体积（解压后）：622 kB，27 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@angular/cdk ^22\.1\.0，@angular/core ^22\.1\.0，@angular/common ^22\.1\.0，@angular/material ^22\.1\.0
- 首次发布：2026-10-12T20:14:57.644Z
- 最新版本发布：2026-11-02T21:06:13.531Z
- 近 30 天下载量：3064（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：31（近 12 个月 31 个）

## 中文简介

材料3 为Angular的外观构件,以Angular材料为原料.

## 安装

```sh
npm install @adam01230/expressive-angular
```

也可以使用：`pnpm add @adam01230/expressive-angular`、`yarn add @adam01230/expressive-angular`、`bun add @adam01230/expressive-angular`

## README

# 表达式

材料3 为Angular所取的表达式组件,以Angular Material's M3代币和CDK相接而成. [编织材料3](https://developer.android.com/jetpack/androidx/releases/compose-material3) 这是 用于大小、形状、运动和行为.

尝试其中的组件 [游乐场](https://adamkitz.github.io/expressive-angular/)。 。 。 .

## 使用量

```bash
npm install @adam01230/expressive-angular
```

包含样式一次, 在您的角材料主题旁边 :

```scss
@use '@adam01230/expressive-angular' as exp;

html {
  @include exp.tokens; // --exp-motion-* springs as linear() easings with durations, --exp-corner-* sizes
  @include exp.material-buttons; // every Angular Material button and icon button gets Compose's shapes and padding
  @include exp.icon-button;
  @include exp.button;
  @include exp.button-group;
  @include exp.split-button;
  @include exp.floating-toolbar;
  @include exp.docked-toolbar;
  @include exp.segmented-list; // children of .exp-segmented-list become Compose's segmented list items
  @include exp.card; // .exp-card, .exp-card-elevated, .exp-card-outlined
  @include exp.menu; // every mat-menu gets Compose's Expressive menu shapes
  @include exp.navigation-bar; // a and button children of .exp-navigation-bar become Compose's navigation bar items
  @include exp.navigation-rail; // the same for .exp-navigation-rail, collapsed or .exp-navigation-rail-expanded
  @include exp.search; // exp-search
  @include exp.bottom-sheet; // exp-bottom-sheet
  @include exp.side-sheet; // .exp-side-sheet, exp-modal-side-sheet
}
```

按钮是角材料的指令, 所以聚焦,波纹和触摸目标停留材料的:

```html
<button mat-icon-button expIconButton aria-label="History" [selected]="open()"><mat-icon>history</mat-icon></button>
<button mat-icon-button expIconButton appearance="tonal" aria-label="Send"><mat-icon>send</mat-icon></button>
<button mat-icon-button expIconButton appearance="filled" size="l" width="wide" shape="square" aria-label="Play">
  <mat-icon>play_arrow</mat-icon>
</button>

<exp-button-group aria-label="Billing" connected [(value)]="interval">
  <button matButton="tonal" expButton value="month">Monthly</button>
  <button matButton="tonal" expButton value="year">Yearly</button>
</exp-button-group>

<exp-split-button size="m">
  <button matButton="filled"><mat-icon>edit</mat-icon> Edit</button>
  <button matButton="filled" aria-label="More" [matMenuTriggerFor]="menu">
    <mat-icon>keyboard_arrow_down</mat-icon>
  </button>
</exp-split-button>

<exp-floating-toolbar aria-label="Formatting" vibrant [expanded]="editing()">
  <button mat-icon-button expIconButton expToolbarLeading aria-label="Undo"><mat-icon>undo</mat-icon></button>
  <button mat-icon-button expIconButton [morph]="false" aria-label="Bold" [selected]="bold()" (click)="toggleBold()">
    <mat-icon>format_bold</mat-icon>
  </button>
  <button matFab expToolbarFab aria-label="Done"><mat-icon>check</mat-icon></button>
</exp-floating-toolbar>

<exp-docked-toolbar aria-label="Message">
  <button mat-icon-button expIconButton aria-label="Archive"><mat-icon>archive</mat-icon></button>
  <button mat-icon-button expIconButton aria-label="Delete"><mat-icon>delete</mat-icon></button>
</exp-docked-toolbar>

<mat-menu #view="matMenu">
  <exp-menu-group label="Sort by">
    <button mat-menu-item role="menuitemradio" aria-checked="true" class="exp-menu-item-selected">Date</button>
    <button mat-menu-item role="menuitemradio" aria-checked="false">Name</button>
  </exp-menu-group>
  <exp-menu-group>
    <button mat-menu-item>
      <mat-icon>refresh</mat-icon><span>Refresh</span><span class="exp-menu-item-trailing">⌘R</span>
    </button>
  </exp-menu-group>
</mat-menu>

<exp-loading-indicator aria-label="Loading" />
<exp-loading-indicator contained aria-label="Saving" />

<exp-linear-progress wavy [value]="uploaded" aria-label="Upload" />
<exp-circular-progress wavy aria-label="Loading" />

<exp-slider><input type="range" aria-label="Volume" min="0" max="1" formControlName="volume" /></exp-slider>
<exp-slider vertical reverse><input type="range" aria-label="Level" formControlName="level" /></exp-slider>
<exp-range-slider>
  <input type="range" aria-label="From" min="0" max="100" formControlName="from" />
  <input type="range" aria-label="To" min="0" max="100" formControlName="to" />
</exp-range-slider>

<nav class="exp-navigation-bar">
  <a routerLink="/" routerLinkActive ariaCurrentWhenActive="page"><mat-icon>home</mat-icon><span>Home</span></a>
  <a routerLink="/saved" routerLinkActive ariaCurrentWhenActive="page"
    ><mat-icon>favorite</mat-icon><span>Saved</span></a
  >
</nav>

<div class="exp-segmented-list">
  <div>Notifications</div>
  <a href="/language">Language</a>
  <div>
    <a class="exp-segmented-list-action" href="/orders/2">Order 2</a>
    <button matButton="outlined">Received</button>
  </div>
</div>
```

导入 `ExpIconButton`, (中文(简体) ), `ExpButton`, (中文(简体) ), `ExpButtonGroup`, (中文(简体) ), `ExpSplitButton`, (中文(简体) ), `ExpFloatingToolbar`, (中文(简体) ), `ExpToolbarFab`, (中文(简体) ), `ExpDockedToolbar`, (中文(简体) ), `ExpLoadingIndicator`, (中文(简体) ), `ExpMenuGroup`, (中文(简体) ), `ExpLinearProgress`, (中文(简体) ), `ExpCircularProgress`, (中文(简体) ), `ExpSlider` 财务报告和审定财务报表 `ExpRangeSlider` 从 `@adam01230/expressive-angular`。 。 。 . 图标按钮 `appearance` 实值 `standard`, (中文(简体) ), `filled`, (中文(简体) ), `tonal` 或者说 `outlined`· ; `size` 运行从 `xs` 改为 `xl`, (中文(简体) ), `width` 实值 `narrow`, (中文(简体) ), `uniform` 或者说 `wide`,以及 `shape` 实值 `round` 或者说 `square`。 。 。 . `[morph]="false"` 保持切换的形状 按下或选中 。 拆分按钮取两个相同外观的材料按钮(`filled`, (中文(简体) ), `tonal`, (中文(简体) ), `elevated` 或者说 `outlined`; 计 数 当菜单打开时, 尾随它变成一粒药丸并翻转它的图标。 浮动工具栏是 `horizontal` 或者说 `vertical`,标准或 `vibrant`; 时 `expanded` 是虚假的 `expToolbarLeading` 财务报告和审定财务报表 `expToolbarTrailing` 项去掉,或 `expToolbarFab`,整个栏折成 联邦调查局。 里面的图标按钮取出工具栏的内容颜色; Compose的工具栏使用切换来保持其形状, 这样 `[morph]="false"`。一个停靠的工具栏横跨屏幕底部,由安全区域内置器自行铺垫;其 `arrangement` 实值 `space-between` 或者说 `fixed` (以中心为中心,相隔32px),和 `--exp-docked-toolbar-container` 财务报告和审定财务报表 `--exp-docked-toolbar-content` 改变颜色。 线性进展指标需要 `value` 从0到100,或者在等待不明时没有; `wavy` 将指标转换为 表达的波浪. `contained` 将加载指示器放在圆形初级容器上, 如 作曲 `ContainedLoadingIndicator`。 。 。 . 循环进度指标与线性指标相同,为40px,当wavy时为48px;给它另一个 `width` 财务报告和审定财务报表 `height` 以调整大小。 滑动画作曲家 `Slider` 围绕本地人 `<input type="range">`,保留值,表单 绑定、标签和键盘; 无 `step` 属性是连续的,其中有一个会按下并显示每个步骤的点. A 类 `vertical` 滑块填充其高度,从上而下运行,或从下而上运行 `reverse`。 。 。 . 区域滑动器需要两个相同的输入 `min`, (中文(简体) ), `max` 财务报告和审定财务报表 `step`,第一个开始;一个媒体移动更接近 拇指, 和不通过另一个. 与 `exp.menu`,每个 `mat-menu` 外观类似"Confose"的"Expressive"菜单:一个有套件的四舍五入组. 拿着 输入 `exp-menu-group`s 将菜单分成不同的组,每个组都有可选 `label`分类 `exp-menu-item-selected` 标记选定的项目; 设置 `role` 财务报告和审定财务报表 `aria-checked` 你自己来 线索图标或快捷键 进入一个 `.exp-menu-item-trailing` 横跨标签之后. `--exp-menu-container` 更改菜单颜色. 按钮组也使用 `[formControl]` 或者说 `formControlName` 替换 `[(value)]`与 `deselectable`,单击选定的按钮,将数值清除为无效. 每个孩子 `.exp-segmented-list` 成为被分割的列表项: 2px 相隔, 小角, 大外角 首先,最后一点。 自行列出项目内容;列表设定其形状,粘贴,高度和颜色. `--exp-segmented-list-container` 更改项目“ Surface” 颜色,用于设置在 Surface 页上的列表. 一个是 `a[href]` 或一个 `button` 整个可以点击,并使用 作曲的徘徊,聚焦和按下状态. 当一个物品按住自己的按钮时,保持它 `div` 并给出其主链接或按钮类 `exp-segmented-list-action`:它的点击区域然后覆盖整个项目,其他按钮在上方仍可点击. 与 `exp.card`, (中文(简体) ), `.exp-card`, (中文(简体) ), `.exp-card-elevated` 财务报告和审定财务报表 `.exp-card-outlined` 编曲已经填满,提升和 概述的卡片:容器、其角和颜色;自行铺设并铺设内容。 是一张牌 `a[href]` 或一个 `button` 可点击,并取出"作曲"的徘徊,聚焦和被压的状态和高地. 一张纸牌 按钮 `div` 并给出它的主要链接 阶级 `exp-card-action`,如分块列表. `--exp-card-container` 更改容器颜色. 与 `exp.navigation-bar`,每个 `a` 或者说 `button` 在一个 `.exp-navigation-bar` 成为导航条项目( 成像器) `ShortNavigationBar`:第一个孩子是图标,剩下的是标签. 项目与 `aria-current` 被选中, 因此 `routerLinkActive` 与 `ariaCurrentWhenActive="page"` 驱动它。 由底部安全区域内设的栏杆本身; `--exp-navigation-bar-container` 更改颜色. `exp.navigation-rail` 对一个 `.exp-navigation-rail` (编剧) `WideNavigationRail`: 96px 宽与 标签在图标下,或,与 `.exp-navigation-rail-expanded`,其最宽项(220px至360px) 图标旁边的标签。 A 类 `.exp-navigation-rail-header` 孩子,比如切换课的按钮,坐到上面 以图标为中心。 铁路是父母的高度; `--exp-navigation-rail-container` 更改颜色. `exp-modal-navigation-rail` 取而代之的是导航抽屉 `ModalWideNavigationRail` 与 `hideOnCollapse`: 绑定 `[(open)]` 它从起跑线上滑入一条被扩大的铁路 作为车道 锁定焦点并关闭 Escape 或单击 scrim 的对话框 。 将相同的标题和物品放入其中 `.exp-navigation-rail`,在导航后自己关闭它. `--exp-modal-navigation-rail-container` 更改其 颜色. `exp-search` 是 Confose 的搜索栏: 显示 `[(query)]` 或 `placeholder` 当点击时,打开 以输入字段和您放入的内容搜索为模式对话框 `exp-search`,例如结果链接。 以 默认字段保持不变,结果会下降至下; `[fullScreen]="true"` 填充屏幕并添加一个 后面的按钮,像手机. `[(expanded)]` 显示是否打开, 输入发送 `(searched)` 与询问,和逃跑, 剪接和后扣关上. `--exp-search-container` 更改颜色. `exp-bottom-sheet` 是 Compose 的模式底页:绑定 `[(open)]` 它从下边滑出, 最多640px宽,在内容上方有一个拖动柄。 一个比窗户打开的一半高的床单 半路并完全打开拖放或向上滚动; 拖放、 逃出、 斜线或完全打开工作表的拖放控柄 关闭它。 柄条总是可以被拖走的,其余的被子则会同时被半开. 完全打开,内容 以本地方式滚动,在滚动到顶端时将其拉下. `handleLabel` 命名屏幕阅读器的控点,以及 `--exp-bottom-sheet-container` 更改其 颜色. `exp-standard-bottom-sheet` 是 作曲的平面图 `BottomSheetScaffold`:它坐落在其位置的下方 父目录, 显示其顶端 `peekHeight` 像素( 默认为56) , 并在拖放或单击时完全打开 处理; `[(expanded)]` 告诉和设置。 与一个 `middleHeight` 它也取决于许多像素 显示,告诉和设置 `[(middle)]`,把柄从一看到一看再打开 打开, 将其内容向下拉, 而滚动到顶部折叠 。 在父母自己的内容下留下偷窥高度的空间. 作曲没有副片,所以 `exp.side-sheet` 从Android的材料组件中取取其值. `.exp-side-sheet` 是标准工作表:256px面板(`--exp-side-sheet-width` 将它修改为两者)在地表上供您放在内容旁. `exp-modal-side-sheet` 从端边滑入到一圈:绑定 `[(open)]`,列出标题、内容和 里面的动作, 和一丝向边缘, 逃出或斜线关闭它. `--exp-side-sheet-container` 财务报告和审定财务报表 `--exp-modal-side-sheet-container` 改变它们的颜色. `.exp-side-sheet-detached` 财务报告和审定财务报表 `[detached]="true"` 将工作表设置为 16px 有大角 整个圆。 进去, `.exp-side-sheet-header` (后面的按钮,然后是) `.exp-side-sheet-headline`,然后最后一个关闭按钮),内容和 `.exp-side-sheet-actions` 给出光谱 垫子. 运动标志也靠自己工作:

```css
.thing {
  transition: transform var(--exp-motion-fast-spatial-duration) var(--exp-motion-fast-spatial);
}
```

## 发展

```bash
npm install
npm start            # showcase on http://localhost:4200
npm run build        # library to dist/expressive-angular, then the showcase
npm run test:ci      # unit tests, single run
npm run lint
npm run format:check
```

## 释放

弹出 `projects/expressive-angular/package.json`合并,然后运行 `Release` 工作流程 `main` (行动)——发布—— 运行工作流程)。 它建立图书馆,出版到npm `@adam01230/expressive-angular` 并创建 GitHub 释放 `v<version>`。发布不需要令牌: npm 信任此寄存器 `release.yml` (npm 软件包设置) – 信任出版商).

## 许可证

麻省理工学院. 从Jetpack Compose(Apache 2. 0)中提取的值记入 `NOTICE`。 。 。 .

## 常见问题

### @adam01230/expressive-angular 是什么？

材料3 为Angular的外观构件,以Angular材料为原料\.

### 如何安装 @adam01230/expressive-angular？

在项目目录运行 npm install @adam01230/expressive-angular，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/cdk（^22\.1\.0）、@angular/core（^22\.1\.0）、@angular/common（^22\.1\.0）、@angular/material（^22\.1\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @adam01230/expressive-angular 支持 TypeScript 吗？

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

### @adam01230/expressive-angular 支持 ESM 还是 CommonJS？

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

### @adam01230/expressive-angular 可以商用吗？

@adam01230/expressive-angular 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @adam01230/expressive-angular 的下载量有多少？

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

### @adam01230/expressive-angular 还在维护吗？

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