aquila

Aquila – Angular 品牌套件组件库

Aquila（开源）/ Angular 品牌套件（前身为 NDBX）是 Allianz Design System 的 Angular 组件库。使用现代 Angular（v19+）模式： 独立组件、信号、新控制流（@if、@for）、inject() 等。

导入规则

Aquila 组件均为独立组件。直接导入组件：

import { NxButtonComponent } from '@allianz/ng-aquila/button';
import { NxFormfieldComponent } from '@allianz/ng-aquila/formfield';
import { NxInputDirective } from '@allianz/ng-aquila/input';

@Component({
  imports: [NxButtonComponent, NxFormfieldComponent, NxInputDirective],
})

导入路径模式：@allianz/ng-aquila/{component-name}

Aquila 特定规则

• 使用 NxInputDirective 时，必须将 <input nxInput> 包裹在 <nx-formfield> 中
• 在 formfield 内使用 <nx-error nxFormfieldError> 显示验证消息
• 始终为 <button nxButton> 设置 type="button"，以避免意外提交表单
• 使用 Aquila 表单组件时，优先采用响应式表单
• 不要使用内联 CSS 样式；请依赖 Aquila 内置样式

带验证的 Formfield（响应式表单）

<form [formGroup]="form">
  <nx-formfield label="Email">
    <input nxInput formControlName="email" type="email" />
    @if (form.controls.email.errors) {
      <nx-error nxFormfieldError>Please enter a valid email</nx-error>
    }
  </nx-formfield>
</form>

下拉菜单

<nx-formfield label="Country">
  <nx-dropdown formControlName="country">
    <nx-dropdown-item value="DE">Germany</nx-dropdown-item>
    <nx-dropdown-item value="CH">Switzerland</nx-dropdown-item>
    <nx-dropdown-item value="AT">Austria</nx-dropdown-item>
  </nx-dropdown>
</nx-formfield>

模态对话框

import { NxDialogService } from '@allianz/ng-aquila/modal';

const modalRef = inject(NxDialogService).open(MyDialogComponent);
modalRef.afterClosed().subscribe(result => { /* handle result */ });

网格系统

12 列响应式网格。nxCol 最多接受 7 个以逗号分隔的断点值，
顺序为：tiny、small、medium、large、xlarge、2xlarge、3xlarge。
如果提供的值少于 7 个，最后一个值会重复应用于其余断点
（例如，nxCol="12,8" → 12,8,8,8,8,8,8）。

<div nxLayout="grid">
  <div nxRow>
    <div nxCol="12,12,6">Left</div>
    <div nxCol="12,12,6">Right</div>
  </div>
</div>

最常用组件

组件	选择器
formfield	nx-formfield
input	input[nxInput]
button	button[nxButton]
icon	nx-icon
dropdown	nx-dropdown
checkbox	nx-checkbox
grid	[nxLayout]
headline	[nxHeadline]
copytext	[nxCopytext]
link	nx-link
accordion	nx-accordion
popover	[nxPopoverTriggerFor]
badge	nx-badge
datefield	input[nxDatefield]
modal	nx-modal
message	nx-message
data-display	nx-data-display
table	[nxHeaderCell]
tabs	nx-tab
list	ul[nxList]
radio-toggle	nx-radio-toggle
tooltip	[nxTooltip]
switcher	nx-switcher
spinner	nx-spinner
pagination	nx-pagination

按使用场景查找组件

• 表单：autocomplete、checkbox、circle-toggle、code-input、datefield、dropdown、file-uploader、formfield、input、natural-language-form、phone-input、radio-toggle、rating、slider、switcher、timefield
• 导航：breadcrumb、header、menu、tabs、pagination
• 表格：comparison-table、dynamic-table、table
• 反馈：badge、indicator、message、modal、notification-panel、progress-stepper、progressbar、spinner、tooltip
• 布局：accordion、card、footer、grid、sidepanel、small-stage、toolbar
• 覆盖层：modal、overlay、popover
• 媒体：avatar、icon、image、video
• 交互：action、button、link、page-search、signal-button
• 选择：checkbox、circle-toggle、dropdown、radio-toggle、taglist

详细 API

如需了解完整组件 API（输入、输出、方法），请阅读项目已安装软件包中的组件文档： 通常位于 node_modules/@allianz/ng-aquila/mcp/generated/components/{component-name}.md，也可能因项目配置而位于类似路径。 备用方式：使用 glob 搜索 **/mcp/generated/**/。