At the end of April, DevUI Admin, with widely expectation, comes to the first open source version(1.0.0) of Angular.

DevUI Admin is an enterprise-level middle and back-end frontend/design solution. Based on DevUI Design, we build a back-end management template based on our own design specifications and basic components.

After several months of incubation, DevUI Admin provides you a solution for building a front-end system that can be used in middle and back end:

• Responsive: adapts to different screen sizes to provide users a more comfortable interface and user experience.
• Personalized Theme: supports dynamic switching between multiple theme styles and personalized settings.
• Layout Switching: the page layout is configurable and flexible.
• Internationalization: implements the internationalization to meet the requirements of multi-language.
• Mock data: local data debugging and a separation between front-end and back-end;
• Page templates: Based on DevUI practice and experience, typical business scenarios are extracted and various page templates are provided.

You can learn more at devui.design or follow DevUI Admin on GitHub.

• Preview page: https://devui.design/admin/
• Homepage: https://devui.design/admin-page/home
• GitHub: https://github.com/DevCloudFE/ng-devui-admin
• DevUI Design: https://devui.design/home

Responsive

DevUI Admin provides a grid-based responsive solution. After initializing an Admin project, you will obtain the page responsive capability. More importantly, we also provide da-grid as a common component that you can use for responsive page building.

Personalized Theme

Based on basic ng-devui capabilities, the DevUI Admin provides multiple themes for users to select. In addition to global color matching, font size and fillet size can be configured too. Users can select a theme based on their personal preferences.

Switch the layout.

DevUI Admin supports multiple layouts. You can customize layout settings by simply modifying your layout config. More importantly, we provide da-layout as a component that you can also use to extend more layout configurations.

Internationalization

DevUI Admin uses @ngx-translate/core to implement the internationalization. Internationalization-related words support modular management. You can select the corresponding internationalization configuration after initializing your Admin project.

Mock data

Mock data is very important to separate front-end and back-end, so that front-end projects are not affected by back-end interfaces. In DevUI Admin, we have provided you with the method of Mock data. You can select the data Mock support by default when initializing your Admin project.

Page Template

In the DevUI Admin GitHub code repository, we provide you with multiple page templates by default.

- Dashboard
  - Analysis Page
  - Monitoring page
  - Workbench
- Form page
  - Base Form
  - Form Layout
  - Advanced Forms
- List Page
  - Base List
  - Card list
  - Edit List
  - Advanced List
  - Tree List
- Exception page
  - 403
  - 404
  - 500
- Personal page
  - Personal Center
  - Personal settings

You can take a look to it after pulling the code from github.

Cli Support

Currently, the DevUI Admin can use the Angular CLI to initialize an admin project. You can use the Angular CLI to quickly create and configure your admin project.

# Initialize the project.
$ ng new your-project && cd your-project
$ ng add ng-devui-admin

Follow-up

In the future, we will keep envolving, focusing on performance and usability, optimizing the experience of DevUI Admin, and reducing developer costs. We look forward to receiving your comments and suggestions (Issue List). We also look forward to your participation and cooperation.