DevUI

Angular UI Component Library based on DevUI Design

AngularComponent Toolkit
DevCloudFE/ng-devuidevui.designng-devui

README

DevUI Logo

Github Star License
Document Document Npm Chat

DevUI for Angular

The DevUI Design Design system contains a combination of DevUI rules, Design languages, and best practices. DevUI Design allows developers to focus more on application logic, while designers focus on user experience, interactions, and processes.

Features


Enterprise components, supporting design specifications, font icon library
Out of the box

To see more in devui.design.

Angular Support


Now supports Angular `^14.0.0`

Getting Started


1. Create a new project

  1. ``` bash
  2. ng new New-Project
  3. ```

2. Installation:

  1. ``` sh
  2. $ cd New-Project
  3. $ npm i ng-devui
  4. # font icon library
  5. # $ npm i @devui-design/icons
  6. ```

3. Usage:

  1. ```typescript
  2. import { BrowserModule } from '@angular/platform-browser';
  3. // need for animations
  4. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  5. import { NgModule } from '@angular/core';
  6. import { DevUIModule } from 'ng-devui';
  7. import { AppComponent } from './app.component';

  9. @NgModule({
  10.   declarations: [
  11.     AppComponent
  12.   ],
  13.   imports: [
  14.     BrowserModule,
  15.     BrowserAnimationsModule,
  16.     DevUIModule
  17.   ],
  18.   bootstrap: [ AppComponent ],
  19. })
  20. export class AppModule { }
  21. ```

4. Import devui style into `angular.json` file:

  1. ``` json
  2. {
  3.   "styles": [
  4.     ...
  5.     "node_modules/ng-devui/devui.min.css"
  6.   ]
  7. }
  8. ```

5. Debugging

  1. ``` sh
  2. ng serve --open
  3. ```

Contribution


Please feel free to contribute code or discuss your idea!

Please make sure you read the contributing guide before making a pull request.

We appreciate all contributors who helped us build DevUI.

Support


Modern browsers and Internet Explorer 11+.

[[[[[
---------------------------------------------
Edge|lastlastlast

Partner project


- H5-Dooring - 让H5制作，更简单

Who use it


DevCloud Logo


LICENSE


[MIT](https://opensource.org/licenses/MIT)