website·Indexed 42 days ago
https://ng-alain-doc.surge.sh/A production-ready solution for admin interfaces built on Ant Design principles. This documentation covers the NG-ALAIN framework and the @delon component suite, including architecture, theme customization, build and deployment, and a library of 92 components.
NG-ALAIN is built on the design principles of Ant Design and is based on the ng-zorro-antd library. Key architectural features include:
@faker-js/faker library for generating realistic mock data.xlsx component provides Excel file operation capabilities based on the sheetjs library. For advanced options such as images and styles, the js-xlsx fork is recommended. The component allows for rendering Excel data via a callback option.import { XlsxModule } from '@delon/abc/xlsx';NG-ALAIN is built upon a suite of modular libraries under the @delon scope, providing a comprehensive scaffold for enterprise-level console services. The core modules include:
@delon/theme: The base theme library containing essential styles (e.g., Bootstrap), common data rendering pipes, and service tools like page title and scroll bar management.@delon/abc: A set of high-level business components that abstract common blocks and areas used in console services, providing more advanced abstractions than standard Ant Design components.@delon/chart: A chart library based on G2, offering a suite of commonly used business charts that can be used independently or composed for complex displays.@delon/form: A dynamic form builder that follows the JSON Schema standard.@delon/auth: A module for managing the lifecycle of user authentication (obtaining, saving, and using tokens).@delon/acl: A role-based Access Control List for permission management, capable of controlling visibility down to the button level.@delon/cache: A caching mechanism to reduce HTTP requests by storing data (like dictionaries or city data) in memory or persistent storage.@delon/mock: An HTTP interceptor that returns testing data for development purposes.@delon/util: A collection of daily utility functions.@delon/testing: A suite of commonly used testing tools.CLI Tool: Provided via CLI Schematics for project scaffolding and management.ALAIN_I18N_TOKEN interface to implement internationalized services.ResponsiveService simplifies responsive rules by reducing the standard xs, sm, etc., breakpoints into a single col property. This is used by default in sg, sv, and se components to determine how many columns are displayed based on the screen width.col | <576px | ≥576px | ≥768px | ≥992px | ≥1200px | ≥1600px |
|---|---|---|---|---|---|---|
1 | 1 | 1 | 1 | 1 | 1 | 1 |
2 | 1 | 2 | 2 | 2 | 2 | 2 |
3 | 1 | 2 | 3 | 3 | 3 | 3 |
4 | 1 | 2 | 3 | 4 | 4 | 4 |
5 | 1 | 2 | 3 | 4 | 6 | 6 |
6 | 1 | 2 | 3 | 4 | 6 | 12 |
ACLService is a service class in ng-alain used to handle role permissions. It is integrated into multiple components and modules, such as the st (Standard Table) and MenuService. In the context of ng-alain configuration, when an acl attribute is encountered, it refers to the parameter value passed to the can method of the ACLService to determine if a user has the required permission.st component provides a configurable way to render tables based on nz-table, specifically optimized for administrative interfaces to reduce the boilerplate required for standard table rendering.import { STModule } from '@delon/abc/st';transfer widget provides a double column choice box interface, allowing users to move items between two lists.jszip library.