# @akcelik/strct 中文文档

规范地址：https://npmcn.com/package/%40akcelik/strct/

版本：7\.9\.1
npm 元数据更新时间：2026-11-05T11:30:04.510Z
中文译文更新时间：2026-11-06T05:56:04.932Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：4.8 MB，18 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@angular/core ^22\.0\.0，@angular/forms ^22\.0\.0，@angular/common ^22\.0\.0，@angular/router ^22\.0\.0，@angular/platform-browser ^22\.0\.0
- 首次发布：2026-06-04T12:27:49.917Z
- 最新版本发布：2026-11-05T11:30:04.149Z
- 近 30 天下载量：4638（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：169（近 12 个月 169 个）

## 中文简介

UIStruct – 一个独立的Angular组件库,带有一个有象征意义的多palette主题系统,为数据中心/基础设施管理UI所建.

## 安装

```sh
npm install @akcelik/strct
```

也可以使用：`pnpm add @akcelik/strct`、`yarn add @akcelik/strct`、`bun add @akcelik/strct`

## README

# @akcelik/ strct

**[实时文档演示( D)](https://akcelik.github.io/uistruct/)**

一个独立的角构件库,围绕一个 **标记的多盘 主题系统**。每件事物都由 CSS 定制属性驱动,所以一个 属性互换重新显示整个库的外观.

-   **3个调色板** - 北极、安伯、塞奇
-   **2个模式** - 黑暗,光线
-   独立的组件,信号输入, `OnPush` 到处都是
-   `ControlValueAccessor` 每个窗体控件上的支持
-   没有运行时间 CSS 框架依赖性
-   WCAG-AA文本对比 · OS- 了解它们 · `prefers-contrast` 编号 : `prefers-reduced-motion` 荣誉

## 安装

```bash
npm install @akcelik/strct
```

`@angular/core`, (中文(简体) ), `@angular/common`, (中文(简体) ), `@angular/forms`, (中文(简体) ), `@angular/platform-browser` 财务报告和审定财务报表 `@angular/router` 是同伴的依赖关系 (Angular 22+) (英语). 保持自己的副本补丁—— `npm audit` 在你的应用程序是什么 看他们.

> **搞一个本地建筑?** 安装已包装的柏油球 (单位:千美元)`ng build strct && npm pack dist/strct`,则 `npm i ../akcelik-strct-x.y.z.tgz`(中文(简体) ) 而不是一个 `file:` symlink — 一个 symlined 依赖解决自己的副本 `@angular/core`,可以绊倒 `InputSignal` 品牌不匹配(TS2551) 角补丁版本.

## 主题设置

在您的全局样式表中导入主题( 船名 + 基准重设 +) 窗体控制样式 :

```scss
// styles.scss
@use '@akcelik/strct/styles/theme';
```

主题 **自控其字体** (DM Sans + JetBrains Mono, OFL)——他们作为 `woff2` 下级 `styles/fonts/` 并参考 `@font-face`,所以没有 外部请求和没有其他要加载的内容.

在文档根上设置方案( 或让) `StrctThemeService` 管理它:

```html
<html data-palette="arctic" data-theme="dark"></html>
```

```ts
import { StrctThemeService } from '@akcelik/strct';

const theme = inject(StrctThemeService);
theme.setPalette('ember'); // 'arctic' | 'ember' | 'sage'
theme.setMode('light'); // 'dark' | 'light'  (persisted to localStorage)
theme.toggleMode();
```

默认 `StrctThemeService` 遵循操作系统的光/暗 偏好 (`prefers-color-scheme`)——并追踪其活性——直到用户作出 明确的选择,然后坚持下去,获胜.

把现成的切换器扔到任何地方:

```html
<strct-theme-switcher />
```

## 构成部分

仅导入您使用的东西—— 每个组件都是独立的 .

| 区域 | 构成部分 |
| --- | --- |
| 版式 | `strct-shell`, (中文(简体) ), `strct-header`, (中文(简体) ), `strct-footer`, (中文(简体) ), `strct-vertical-nav`, (中文(简体) ), `strct-nav` 编号 : `strct-nav-item`, (中文(简体) ), `strct-rail` (可拼接图标导航), `strct-login` |
| 控件 | `button[strct-button]`, (中文(简体) ), `strct-button-group`, (中文(简体) ), `strct-speed-dial`, (中文(简体) ), `strct-badge`, (中文(简体) ), `strct-tag`, (中文(简体) ), `strct-avatar`, (中文(简体) ), `strct-progress`, (中文(简体) ), `strct-spinner`, (中文(简体) ), `strct-skeleton` |
| 表面 | `strct-card` (+标题/块/脚), `strct-accordion`, (中文(简体) ), `strct-tabs`, (中文(简体) ), `strct-tree`, (中文(简体) ), `strct-modal`, (中文(简体) ), `strct-drawer` (对接板), `strct-dropdown` (+ 数) `strct-submenu`, (中文(简体) ), `[strctContextMenu]` (数据驱动), `strct-wizard`, (中文(简体) ), `strct-divider` |
| 导航 | `strct-breadcrumb` 编号 : `strct-breadcrumb-item`, (中文(简体) ), `strct-pagination` |
| 表单 | `strctInput`, (中文(简体) ), `strct-checkbox`, (中文(简体) ), `strct-toggle`, (中文(简体) ), `strct-radio-group` 编号 : `strct-radio`, (中文(简体) ), `strct-range`, (中文(简体) ), `strct-combobox`, (中文(简体) ), `strct-cascade-select`, (中文(简体) ), `strct-datepicker`, (中文(简体) ), `strct-password`, (中文(简体) ), `strct-file`, (中文(简体) ), `strct-color-picker`, (中文(简体) ), `strct-rating`, (中文(简体) ), `strct-chips`, (中文(简体) ), `strct-input-otp`, (中文(简体) ), `strct-knob`, (中文(简体) ), `strct-input-mask` |
| 数据 | `strct-table`, (中文(简体) ), `strct-datagrid` (类型 / 选择可扩展行 / 细节 / 批次 栏 / 每行 kebab 菜单 / 可调整 / 列选择 ), `strct-timeline` 编号 : `strct-timeline-item`, (中文(简体) ), `strct-stack` 编号 : `strct-stack-item` |
| 图表 | `strct-sparkline`, (中文(简体) ), `strct-chart` (行/区/栏), `strct-donut`, (中文(简体) ), `strct-gauge` |
| 反馈 | `strct-alert`, (中文(简体) ), `strctTooltip`, (中文(简体) ), `strct-signpost`, (中文(简体) ), `strct-toast-outlet` + 键 `StrctToastService` |
| 基金会 | `strct-icon` (数据中心图标设置 + 状态) `badge`, (中文(简体) ), `strct-theme-switcher` |

### 实例

```html
<button strct-button variant="primary">Save</button>
<button strct-button variant="outline" size="sm">Cancel</button>

<strct-badge status="success">Active</strct-badge>

<strct-modal [(open)]="show" title="Confirm">
  Body…
  <ng-container strctModalFooter>
    <button strct-button (click)="show = false">Cancel</button>
    <button strct-button variant="primary" (click)="show = false">OK</button>
  </ng-container>
</strct-modal>

<input strctInput placeholder="Name" [(ngModel)]="name" />
<strct-checkbox [(ngModel)]="agree">I agree</strct-checkbox>
```

## 设计符号

组件只参考这些 CSS 变量—— 从未硬编码的颜色 :

`--bg-0..--bg-a` 表面 − `--hdr` 标题 · `--b1/--b2/--b3` 边框 `--t1..--t4` 文本 ・ `--inv` 反向 `--acc` (+ 数) `--acc-m/-s/50/30/18`(口音 ) `--success / --warning / --critical` 语义( +) `*-bg`· `--sh / --shh` 阴影 `--sb` 卷轴条.

## 无障碍和眼睛舒适

对照WCAG和显示-工程学/视觉科学进行审查,以限制眼压 在长的全天控制台会话中:

-   **WCAG AA 文本对比** —— 说 `--t1/--t2/--t3` 均在每组中达到AA(≥ 4.5:1) 调色板和模式,保留 `t1 > t2 > t3` 等级.
-   **了解操作系统** 接下来 `prefers-color-scheme` 直到一个明确的选择.
-   **`prefers-contrast: more`** ——加强边界,文字和重点环接请求.
-   **`prefers-reduced-motion`** ——动画崩溃为即时状态变化.
-   **12px 类型大小层**, 1.5 车体行高,被软化(非纯-白)的光表面.

## 许可证

[麻省理工学院](https://npmcn.com/package/%40akcelik/strct/LICENSE) 塞尔坎·阿克塞利克

## 常见问题

### @akcelik/strct 是什么？

UIStruct – 一个独立的Angular组件库,带有一个有象征意义的多palette主题系统,为数据中心/基础设施管理UI所建\.

### 如何安装 @akcelik/strct？

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

### @akcelik/strct 支持 TypeScript 吗？

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

### @akcelik/strct 支持 ESM 还是 CommonJS？

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

### @akcelik/strct 可以商用吗？

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

### @akcelik/strct 的下载量有多少？

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

### @akcelik/strct 还在维护吗？

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