AT-NG

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

npm package GitHub license

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

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

NOTICE: At-ng dependent on @angular/cdk

🔗Links

📦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