# @chrisdesign95/nova-iris-ui 中文文档

规范地址：https://npmcn.com/package/%40chrisdesign95/nova-iris-ui/

版本：0\.13\.1
npm 元数据更新时间：2026-11-09T05:37:09.538Z
中文译文更新时间：2026-11-09T15:30:06.347Z
软件包许可：UNLICENSED

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

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

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

- 包体积（解压后）：1 MB，94 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：@angular/core ^21\.2\.0，@angular/forms ^21\.2\.0，@angular/common ^21\.2\.0，@fortawesome/angular-fontawesome ^4\.0\.0，@fortawesome/fontawesome-svg-core ^7\.3\.1
- 首次发布：2026-10-18T04:52:31.922Z
- 最新版本发布：2026-11-09T05:37:09.373Z
- 近 30 天下载量：2381（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：16（近 12 个月 16 个）

## 中文简介

Librería de immissions Angular 21 con Playground 交互,指代"光明"(Light/Dark y diseño basado en Figma).

## 安装

```sh
npm install @chrisdesign95/nova-iris-ui
```

也可以使用：`pnpm add @chrisdesign95/nova-iris-ui`、`yarn add @chrisdesign95/nova-iris-ui`、`bun add @chrisdesign95/nova-iris-ui`

## README

![Nova Iris](https://raw.githubusercontent.com/chrisdesing1995/nova-iris-component-ui/master/assets/icono-nova-iris.png)

# @chrisdesign95/nova-iris-ui (英语)

自由派 **角点 21** (独立,信号,OnPush y相容无带) CSS 相通 `--nv-*` 《光明与黑暗》。 法格马省 `component-ui`。 。 。 .

> 韦尔西翁 `0.x`: API puede combiar entri 版本为更年期.

韦尔西翁地方: **0.9.0 (中文(简体) )** (单位:千美元)`v0.9.0`) (中文(简体) ). 国家公共委员会 `dist` 实事求是.

## 起义组织

```sh
npm install @chrisdesign95/nova-iris-ui
```

同伴依赖性 : `@angular/core`, (中文(简体) ), `@angular/common` 尔 `@angular/forms` `^21.2.0`。 。 。 .

## 埃斯蒂洛斯·特马

卡加环球汽车公司`angular.json`:

```json
"styles": ["node_modules/@chrisdesign95/nova-iris-ui/styles/tokens.css"]
```

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我们是叛逃者 黑暗,小马 `data-theme="dark"` 内 `<html>`(原始内容存档于2018-10-21) (中文(中国大陆) ). ; también funcionan temas aniidaos en cualquier mento. 诺克卢耶·宁乌恩·桑蒂西奥·德马尼探测器 `prefers-color-scheme`。 。 。 .

-   **光线 :** 法格玛的颜色 `component-ui`骗取初等紫罗兰.
-   **暗号 :** propuesta popia de NOVA IRIS UI; 不存在"法格玛".

## 构成部分

Cada 组件 _二级进入点_{\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}这就像独唱一样.

数据表: `<nv-data-table>` 脱口而出 `@chrisdesign95/nova-iris-ui/data-table`数字 : `dataSource`, (中文(简体) ), `columns` 尔 `actions` (续) `onClick(row)`búsqueda, orden y paginación 当地。 民主与API en `/components/data-table` 德尔游乐场。 Desde 0.12.0、proyecta botones y conteos con `[nvDataTableToolActions]` (原始内容存档于2013-10-12). antes de refrescar; también funciona con `showSearch` 尔 `showRefresh` 内 `false`. 控制性活动与控制性活动.

| 选择器 | 导入 | 德克赖普西翁 |
| --- | --- | --- |
| `<nv-button>` | `@chrisdesign95/nova-iris-ui/button` | Botón nativo:主要、次要、轮廓、幽灵和破坏性;tamaños sm、md y lg;contenido标签,图标标签 e 图标 - 仅; estados 已禁用 y 装载. |
| `<nv-input>` | `@chrisdesign95/nova-iris-ui/input` | Campo de texto con legiqueta, ayuda y accessibles. 中国植物物种信息数据库. 相容相容的反活性形式, `ngModel` 尔 `[(value)]`。 。 。 . |
| `<nv-tag>` | `@chrisdesign95/nova-iris-ui/tag` | 埃蒂克塔语Name `outline` 欧 `soft`5号线中断 信息通报; con `interactive` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}我们一起来. |
| `<nv-badge>` | `@chrisdesign95/nova-iris-ui/badge` | 索引 `solid`: 主持人(`count`) o punto (英语:`dot`) (中文(简体) ). |
| `<nv-chip>` | `@chrisdesign95/nova-iris-ui/chip` | 经济、社会、文化权利委员会 `aria-pressed` 尔 `[(selected)]`。 。 。 . |
| `<nv-avatar>` | `@chrisdesign95/nova-iris-ui/avatar` | (原始内容存档于2018-09-21) (英语). Inficiales o imposto, con estado de presencia. |
| `<nv-textarea>` | `@chrisdesign95/nova-iris-ui/textarea` | Area de texto con legiqueta, ayuda, 错误和调制器 `n/max`. 兼容的相容反应表, `ngModel` 尔 `[(value)]`。 。 。 . |
| `<nv-checkbox>` | `@chrisdesign95/nova-iris-ui/checkbox` | 请检查date=中的日期值 (帮助) Checkbox nativo con estado indeterminado, liqueta, descripción y Forms/ CVA. |
| `<nv-radio>` | `@chrisdesign95/nova-iris-ui/radio` | (原始内容存档于2018-09-26). Radio nativo con selección por grupo, navegación por tellado y Forms/CVA. |
| `<nv-switch>` | `@chrisdesign95/nova-iris-ui/switch` | (原始内容存档于2018-09-26) (英语). Alternancia broleana con semántica switch, ethiqueta, descripción y Forms/CVA. |
| `<nv-select>` | `@chrisdesign95/nova-iris-ui/select` | 索克多、克克瓦多、克瓦多、克瓦多 `[(value)]`。 。 。 . |
| `<nv-multi-select>` | `@chrisdesign95/nova-iris-ui/multi-select` | (一) 与búsqueda、Forms/CVA y Tags 等有关联; `maxVisibleTags` de 1 a 5(预先决定2), con `+N` 第2段. 先例. |
| `<nv-date-picker>` | `@chrisdesign95/nova-iris-ui/date-picker` | 选取者 `single`, (中文(简体) ), `multiple` 欧 `range`, Con Formes/CVA, límites, localización, terclado y calicios de mes/año. 中国植物物种信息数据库. |

```ts
import { Component } from '@angular/core';
import { NvButton } from '@chrisdesign95/nova-iris-ui/button';

@Component({
  selector: 'app-demo',
  imports: [NvButton],
  template: `<nv-button variant="primary" size="md" (click)="save()">Guardar</nv-button>`,
})
export class Demo {
  save() {}
}
```

Todos 组件 publicos usan el prefijo `nv-` y 输了代号 el prefijo `--nv-`。 。 。 .

## 图标

洛斯圣像之子SVG integrados(Font Assouth Free 7.3.1中位数) `@fortawesome/angular-fontawesome`),没有干草克登记员(nie cargar CSS). Npm 7+ 输对等器 `@fortawesome/angular-fontawesome` 尔 `@fortawesome/fontawesome-svg-core` 和instalan独奏(没有,instalalos):

```html
<nv-button icon="plus" iconPosition="left">Crear</nv-button>
<nv-button content="icon-only" icon="view" ariaLabel="Ver detalle" />
```

密码 `icon`(一) 与《公约》有关的内容; `iconPosition` 对 `left` (por叛变) o `right`。 。 。 . `content="icon-only"` ưμ㼯a `ariaLabel` 欧 `ariaLabelledby`. 诺布雷斯因克鲁多斯: `plus`, (中文(简体) ), `save`, (中文(简体) ), `search`, (中文(简体) ), `filter`, (中文(简体) ), `refresh`, (中文(简体) ), `empty`, (中文(简体) ), `view`, (中文(简体) ), `edit`, (中文(简体) ), `trash`, (中文(简体) ), `email`, (中文(简体) ), `user`, (中文(简体) ), `calendar`, (中文(简体) ), `error`, (中文(简体) ), `info`, (中文(简体) ), `success`, (中文(简体) ), `warning` 尔 `arrow-right`总统阁下

```ts
import { inject } from '@angular/core';
import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faMugHot } from '@fortawesome/free-solid-svg-icons';

// En el constructor de tu componente raíz:
inject(FaIconLibrary).addIcons(faMugHot);
```

`provideNvIcons` (resolver de Class CSS) sigue disposibility solo por compatibilidad. (原始内容存档于2016-09-29). (原始内容存档于2018-07-29) (英语). Los impositos Free tynen licencia CC BY 4.0 y el código MIT; conferencea los LICENSE de los paquetes instalados.

## 不代表或非官方团体

-   中间部分`nv-button`, (中文(简体) ), `nv-input`, (中文(简体) ), `nv-chip`(原始内容存档于2013-10-12). reenvían al Nativo los atributos de 公式和ARIA 中位数投入; el host `<nv-*>` **没有** 等同一个不 `<button>` 欧 `<input>` HTML (英语).
-   无 `[attr.aria-label]` escrito en el host no lega al numento nativo: usa el 输入 `ariaLabel`。 。 。 .
-   拉富恩特语Name **间** 没有异口同声; 罪我们 `system-ui, sans-serif`。 。 。 .
-   El anillo de foco (2px, 彩色初等) no procede de Figma: es una decisión de diseño de NOVA IRIS UI.
-   Avatar, Icon y Remove del Chip quedan pendientes. (原始内容存档于2018-09-29).
-   日期选择控制中心(Los días y controles de Cabecera del Date Picker usan)广播通告 por una desviación a probada de Figma; la actualización del diseño está pendente.

## 诉讼

`UNLICENSED`: uso personal del autor, todos los derechos reservados. 中国植物物种信息数据库. 无法承认, 维尔 [自由主义](https://npmcn.com/package/%40chrisdesign95/nova-iris-ui/LICENSE)。 。 。 .

## 元件为 0.1.0

-   `/tabs`: NvTabs, NvTab 项目. 项,变体(下行/分出),大小,内容,ariaLabel y \[活Id\];已更改的emite el id. 配置 id para identificadores sistables 。 El Consumidor conecta tapanel con 面板Id(项目.id) y tableId(项目.id). Flechas/Home/End selecciionan Salando deshabilitados. 中国植物物种信息数据库.
-   `/message`: NvMessage (英语). 重度中性/信息/成功/警告/危险;变体软/外线;标题、描述、动作Label、可驳回、ariaLive、\[(open)\]、行动y.
-   `/toast`: NvToastService y NvToastViewport. show({标题,描述?,严重性?,行动?:{label, on Click},持续时间?,不可撤销?,showIcon?}) id; district(id), clear (). 不取景的por aplicación:位置为上端/上起/下起/下起/下起,最大可视=4. FIFO, 5000 ms desde visibilidad, 0 手动; 在 y foco 上徘徊的 pausa independente. 托肯斯: --nv-toast-width (360px), --nv-toast-stack-gap (8px), --nv-toast-z-index (1000).
-   `/stat-card`: NvStatCard. 标签为 libre y (texto o número), 细节, 比较, 显示对比, 状态标签 libre, 严重性中性/info/成功/警告/危险, 状态逻辑, 显示状态和标题 (1- 6) (原始内容存档于2018-03-21). Reutiliza nv-tag y sus colores 存在. Migración:sustituir nature por statusLabel y specrime explícitos. 中国植物物种信息数据库.

演示词: `npm run playground`页:1 Las demos ofrecen Light/Dark(全球敬酒会).

## 侧边栏( 0.13. 0)

输入点 : `@chrisdesign95/nova-iris-ui/sidebar` (单位:千美元)`NvSidebar`, (中文(简体) ), `NvSidebarItem`, (中文(简体) ), `NvSidebarUser`, (中文(简体) ), `NvSidebarUserAction` 尔 `NV_SIDEBAR_DEFAULT_USER_ACTIONS`) (中文(简体) ). 发音: `/components/sidebar`、控制器、灯光/暗光相接器、可移动相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相相相相相接相接相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相 y registro de eventos. (英语).

```ts
import { NvSidebar, type NvSidebarItem } from '@chrisdesign95/nova-iris-ui/sidebar';

const items: readonly NvSidebarItem[] = [
  { code: 'home', name: 'Inicio', route: '/', icon: 'home' },
  {
    code: 'security',
    name: 'Seguridad',
    icon: 'key-round',
    children: [{ code: 'users', name: 'Usuarios', route: '/users' }],
  },
];
```

```html
<nv-sidebar
  title="Nova Iris"
  subtitle="Administración"
  [items]="items"
  [(collapsed)]="collapsed"
  [(activeCode)]="activeCode"
  [searchable]="true"
  [user]="user"
  (itemSelect)="navigate($event)"
  (userMenuAction)="handleUserAction($event)"
/>
```

`collapsed` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}ferna entre 260 px y un rail de 64 px. {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢. `activeCode` (一) 证明行为; `itemSelect` 原创性。 纳韦加: el particule 没有我们一个路由器和 ruta de los grupos se ignora. `logo` 承认 una URL de implann . 埃尔博尔·德 `GET /account/menu` 相容的罪孽变迁 失败的图标 `fa-` 自动总线 犯法者 预科生 `FaIconLibrary`(a) 国家登记簿; 洛斯的无忧无虑的 解密者,没有 companizan的标志性。 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}这里的解析器 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}这里的解析器 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}这里的解析器. El Catálogo integrado añade 家,布局-网格,铃声,按键回合,设置,登录, 上上下下下下上下 罪孽深重.

`searchable` 韦尔假皮尔叛变。 (一) 针叶林; 萨瓦西亚·坎比亚尔 `collapsed`。 。 。 . `groupsCollapsed` 控制 a 待办事宜 los grupos; 无效 转写a `item.collapsed` y, si falta, abre los ancestros del activo 和 cierra los demás. (原始内容存档于2019-09-29) (中文(中国大陆) ). `ariaLabel` 尔 `searchPlaceholder` 允许适配器 los textos causebles. `[(query)]` 互联网档案馆的存檔,存档日期2013-12-02. 洛斯警徽 单发: 活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活 (原始内容存档于2018-10-22) (英语). usan la presentación de nivel 1, sin imposos. 连Abrir grupos都没有.

`user` 英文名称、电子邮件、缩写和状态. `userMenu` 悬念 (a) 预先确定“Mi perfil”和“Cerrar sesión”; `userMenuAction` (原始内容存档于2018-03-26). enterga la elegida. (原始内容存档于2012-10-12). El rail abre flyouts a la derecha y el menú de usuario se alinea por abajo con el avatar. (原始内容存档于2019-09-25) (英语). Los menús admiten freechas, Home/End, Enter/Espacio, Escape y Tab, con foco restaurado. Los estados Light/ Dark usan los mismos 代号 `--nv-*`; 基金会 aporta las divisiones del sidebar, los indicadores, la tipografía xs y el z-index. 中国植物物种信息数据库.

法格玛: `nv-avatar` 敬酒节 (原始内容存档于2018-03-21) (英语). el menú y las inficiales usan foreground en lugar de 二等前卫. 夜总会 中间 48 px, 平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平 (原始内容存档于2018-09-26). vertigma no Cabe con las dos líneas. 迷幻药没有丝带子. La revisión 视觉最终 en el navegador 对应al Tech Lead. (原始内容存档于2018-09-25).

技术领导者:

-   无线电正义组织: `.nv-sidebar` (扩建和铁路)y 收缩器 `.menu` (飞出用法) usan el sidentente(生命) `--nv-radius-lg` (18 px, Figma 半径/2xl), frente a los 12/10 px 原生于 Figma. 没有催产物. (原始内容存档于2018-03-29) (英语). Se restauran los radios de los ítems del Anexo A: nivil 0 y grupos r8 (单位:千美元)`--nv-radius-compact`),子tems r10 (中文(简体) )`--nv-radius-md`),铁路r18 (单位:千美元)`--nv-radius-button`(原始内容存档于2018-03-26). Flyout y Accones de usuario r8. 乌塞瓦里奥音乐厅 r10 (铁路环形铁路). 没有阿普利卡满地都是Los ítems. (原始内容存档于2013-10-12). El Popover Conserva padding 4 y borde 1; sus ítems r 8 caben de la curva r18 (原始内容存档于2018-10-21) (英语). sin aumentar el padding ni cambiar el alto calculado.
-   乌兰花花 `--nv-sidebar-item-height: var(--nv-button-height-lg)` (40 px),塔姆比昂语 (原始内容存档于2018-06-21). en el cálculo de posicion y alto del popover. Cabecera, búsqueda, 标志和外观没有crecen.
-   父子关系 `padding: 0 var(--nv-space-3)` (第12页) (原始内容存档于2012-10-12). su propia píldora;; `.tree-item--nested .row { padding: 0; }` (原始内容存档于2017-10-12). evita sumar padding. `.children` 我们a `padding: var(--nv-space-1) 0 0 var(--nv-space-2)` (4个德里巴,8个德) (原始内容存档于2018-10-21). Sangría external. (原始内容存档于2018-03-29) (英语). Niveles secondiores mantienen el estilo de nivel 1 sin acular sangría. (原始内容存档于2018-10-21) (英语). Rail y filas de popover también usan padding 横向为12 px.
-   (原始内容存档于2013-10-12). Se mantienen 4 px Enter grupo y birmer hijo, Enter hijos y Enter título/filas del flyout. La barra sigue reta, 3 × 20 px: 冲抵侧边和飞出参考文献 `--nv-space-1` (x=4),y `top: calc((var(--nv-sidebar-item-height) - var(--nv-sidebar-indicator-height)) / 2)` (y=10) (中文(简体) ). (原始内容存档于2018-10-21). El badge conserva cerrado percental.
-   艾尔·贝壳我们a `[searchable]="true"` 尔 `searchPlaceholder="Buscar componentes..."` 凹槽 页:1 `nv-sidebar`犯罪输入法 内部饮食a 保护正常的罪孽, (原始内容存档于2018-10-21) (英语). Official site des grupos. 铁路上没有干草和干草. 贝壳外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外接外.

## 常见问题

### @chrisdesign95/nova-iris-ui 是什么？

Librería de immissions Angular 21 con Playground 交互,指代"光明"\(Light/Dark y diseño basado en Figma\)\.

### 如何安装 @chrisdesign95/nova-iris-ui？

在项目目录运行 npm install @chrisdesign95/nova-iris-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/core（^21\.2\.0）、@angular/forms（^21\.2\.0）、@angular/common（^21\.2\.0）、@fortawesome/angular-fontawesome（^4\.0\.0）、@fortawesome/fontawesome-svg-core（^7\.3\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @chrisdesign95/nova-iris-ui 支持 TypeScript 吗？

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

### @chrisdesign95/nova-iris-ui 支持 ESM 还是 CommonJS？

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

### @chrisdesign95/nova-iris-ui 可以商用吗？

@chrisdesign95/nova-iris-ui 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。

### @chrisdesign95/nova-iris-ui 的下载量有多少？

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

### @chrisdesign95/nova-iris-ui 还在维护吗？

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