All Projects → 100cm → At Ui Angular

100cm / At Ui Angular

at-ui for angular version

Programming Languages

typescript
32286 projects

Labels

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 / EdgeIE / Edge FirefoxFirefox ChromeChrome SafariSafari OperaOpera ElectronElectron
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

📦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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].