此项目已经停止维护。仅供学习参考。

AT-NG

An enterprise-class UI components based on At UI Design and Angular. 🚀🚀🚀

at-ng is a modular front-end UI framework for developing fast and powerful web interfaces based on Angular 7+.

Latest version

8.0.2

✨Features

Based on Angular 8 +
A npm + webpack + babel front-end development workflow
Support ES2015
CSS Style independent, make consistent user interfaces (See: AT-UI-Style)
Friendly API

🖥 Environment Support

Modern browsers and Internet Explorer 9+
Electron
NW.js

IE / Edge	Firefox	Chrome	Safari	Opera	Electron
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions

NOTICE: At-ng dependent on @angular/cdk

🔗Links

Home Page
Angular
Webpack
AT-UI for Vue (official library)

📦Install

Recommended use npm

npm install at-ng

🔨Usage

Because of the style of AT-UI is independent. It's a separate project. So we should add AT-UI-Style to cli config file

++  "../node_modules/at-ng/assets/index.css",

We could also have theme system now. 🎨

Create a standalone less file named theme.less in src folder, and add the path of it to the list of styles in angular.json file.


...
  "styles": [
    ...
    "src/theme.scss"
    ...
  ]
...

Copy the scss variable file from ~node_modules/at-ng/styles/sass/variables/default to theme.scss

Here is an example of theme.scss


@import "~node_modules/at-ng/styles/sass/mixins/index";
$css-prefix: at;

/* change the brand color */
$brand-color: #c41d7f;
....

/*  config the icon font path  */
$font-path: '~node_modules/at-ng/styles/sass/fonts';

/*  import the entry file that conatins all scss files  */
@import "~node_modules/at-ng/styles/sass/entry";

Add the AtModule to your root module

@NgModule({
  imports: [
   AtModule.forRoot(),
  ]
  })

💉Other dependencies

License

MIT