# @ferrlabs/ui-ng 中文文档

规范地址：https://npmcn.com/package/%40ferrlabs/ui-ng/

版本：1\.51\.0
npm 元数据更新时间：2026-11-14T15:44:23.049Z
中文译文更新时间：2026-11-14T14:52:58.626Z
软件包许可：MIT OR Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40ferrlabs/ui-ng
原文对照：https://npmcn.com/package/%40ferrlabs/ui-ng/?lang=original
项目主页：https://github.com/FerrLabs/UI#readme
源码仓库：https://github.com/FerrLabs/UI

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

- 包体积（解压后）：1.5 MB，18 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：marked ^18\.0\.0，prismjs ^1\.29\.0，@angular/cdk ^22\.0\.0，@angular/core ^22\.0\.0，@angular/forms ^22\.0\.0，@angular/common ^22\.0\.0，marked-highlight ^2\.2\.0，@ferrlabs/ui-foundation ^5\.8\.0，@angular/platform-browser ^22\.0\.0
- 首次发布：2026-09-27T09:58:29.335Z
- 最新版本发布：2026-11-14T15:44:22.670Z
- 近 30 天下载量：9827（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：29（近 12 个月 29 个）

## 中文简介

FerrLabs设计系统:Angular 22组件(独立,信号,无区),由@ferrlabs/ui-foundation等符号来标注.

## 安装

```sh
npm install @ferrlabs/ui-ng
```

也可以使用：`pnpm add @ferrlabs/ui-ng`、`yarn add @ferrlabs/ui-ng`、`bun add @ferrlabs/ui-ng`

## README

# @ ferrlabs/ ui-ng (英语)

FerrLabs设计系统—— **角点 22** 组件(独立、信号、无区域).

亲兄弟 `@ferrlabs/ui-react`:相同的设计语言,同符. 视觉 平等来自共享、框架不可知 [`@ferrlabs/ui-foundation`](https://npmcn.com/package/%40ferrlabs/foundation) (移动 CSS 变量 + 尾风) )—— `ui-ng` 上面没有自己的设计价值 `--color-accent`, (中文(简体) ), `--color-fg`, (中文(简体) ), `--font-mono`等 (中文(简体) ).

> **现况:妇女方案.** 脚手架 + 第一种原始(`Button`) (中文(简体) ). 其余部分 ~40个原始人 + app 铬在水面上被移植 反应 – 角移. 在移民的尽头 这成了唯一的 组件库并更名为 `@ferrlabs/ui`。 。 。 .

## 安装

```bash
pnpm add @ferrlabs/ui-ng @ferrlabs/ui-foundation
```

一次拉出符号( 如在您的全局样式表或 Tailwind 条目中):

```css
@import '@ferrlabs/ui-foundation/styles/tokens.css';
```

## 使用量

```ts
import { ButtonComponent } from '@ferrlabs/ui-ng';

@Component({
  imports: [ButtonComponent],
  template: `
    <flr-button variant="primary" size="md" (pressed)="save()">Save</flr-button>
    <flr-button variant="ghost" [loading]="saving()">Saving…</flr-button>
    <flr-button variant="danger" href="/delete">Delete</flr-button>
  `,
})
export class Demo {}
```

## 已版本文件( A)`@ferrlabs/ui-ng/docs`(中文(简体) )

品牌-不可知的版本-文档布局,由产品站点共享. `DocsLayoutComponent` 仅使 docs 网格(边栏+版本切换器, 可滚动主机,带有预览/下页传呼机,在这张TOC上)和提供的项目 标记为 a `.ferr-prose` 通过文章 `<ng-content>`。它是无外壳的——包接 在你自己的产品外壳里 导航、版本、语言和 URL 部分 输入,所以内容留在消费者身上;这里只有结构船.

```ts
import { DocsLayoutComponent, DocSection, DocVersion } from '@ferrlabs/ui-ng/docs';

const NAV: readonly DocSection[] = [
  { label: 'Getting started', items: [{ label: 'Introduction', slug: 'introduction' }] },
];
const VERSIONS: readonly DocVersion[] = [{ slug: 'current', label: 'v5' }];

@Component({
  imports: [DocsLayoutComponent],
  template: `
    <flr-docs-layout [nav]="nav" [versions]="versions" slug="introduction" lang="en">
      <!-- rendered markdown -->
    </flr-docs-layout>
  `,
})
export class DocsPage {
  protected readonly nav = NAV;
  protected readonly versions = VERSIONS;
}
```

一次导入下标内容样式表( 它的样式) `.ferr-prose`, (中文(简体) ), `.ferr-aside`, (中文(简体) ), `.ferr-card`, (中文(简体) ), `.ferr-tabs` 所有CSS -var驱动:

```css
@import '@ferrlabs/ui-ng/docs/styles.css';
```

## 标记下和代码( E)`@ferrlabs/ui-ng/markdown`(中文(简体) )

语法高亮的代码和静态的 GFM 渲染, 在一个次要的切入点 主要条目不受这些依赖关系的影响。 仅在以下情况下安装可选对等点: 您导入它 :

```sh
pnpm add marked marked-highlight prismjs
```

```ts
import { CodeComponent, MarkdownComponent } from '@ferrlabs/ui-ng/markdown';
```

```html
<flr-code [code]="snippet" language="rust" /> <flr-markdown [source]="report" />
```

-   `flr-code`: 投入 `code` (所需)和 `language`。未知或缺失的语言 转换为隐藏的纯文本。 标题显示语言和副本按钮.
-   `flr-markdown`: 输入 `source`GFM(表格、任务清单、罢工), 突出显示有栅栏的代码,并将结果通过Angular的 `[innerHTML]` 消毒剂,所以剧本和源头上的事件处理器被剥去. 链接获得 `rel="noopener noreferrer"`。 。 。 .
-   语言:javascript,打字,json, bash, rust, python, yaml, toml, sql, diff, markdown, css, markup (html/xml), go, docker (中文(简体) ). 常用别名( E)`ts`, (中文(简体) ), `sh`, (中文(简体) ), `yml`, (中文(简体) ), `rs`, (中文(简体) ), `html`,.)决心.
-   他们: `--color-code-*` 来自 `@ferrlabs/ui-foundation` (bg、fg,评论, 关键字、字符串、数字、函数、操作符、点、属性、插入、, 删除),带有光和暗等值. 不需要样式表导入;样式船 包括各组成部分`ViewEncapsulation.None`范围 `.flr-code` 财务报告和审定财务报表 `.flr-markdown` 主机类,使所渲染的HTML可以被样式化.

## 公约

-   **独立** 组件,无 NgModules.
-   **信号输入** (单位:千美元)`input()`和 **信号输出** (单位:千美元)`output()`) (中文(简体) ).
-   `ChangeDetectionStrategy.OnPush` 到处都是(应用程序运行) **无区**) (中文(简体) ).
-   选择器为前缀 `flr-`。 。 。 .
-   构建 : `pnpm --filter @ferrlabs/ui-ng build` (ng-packagr → Angular 包格式).

## 许可证

根据其中任何一项颁发的许可证 [阿帕奇 - 2.0](https://npmcn.com/package/%40ferrlabs/ui-ng/LICENSE-APACHE) 或者说 [麻省理工学院](https://npmcn.com/package/%40ferrlabs/ui-ng/LICENSE-MIT)随便你.

## 常见问题

### @ferrlabs/ui-ng 是什么？

FerrLabs设计系统:Angular 22组件\(独立,信号,无区\),由@ferrlabs/ui-foundation等符号来标注\.

### 如何安装 @ferrlabs/ui-ng？

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

### @ferrlabs/ui-ng 支持 TypeScript 吗？

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

### @ferrlabs/ui-ng 支持 ESM 还是 CommonJS？

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

### @ferrlabs/ui-ng 可以商用吗？

@ferrlabs/ui-ng 使用 MIT OR Apache-2\.0 许可。可在 MIT、Apache-2\.0 中任选其一遵守。选择 MIT 时，宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @ferrlabs/ui-ng 的下载量有多少？

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

### @ferrlabs/ui-ng 还在维护吗？

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