Awesome
此项目已经停止维护。仅供学习参考。
<p align="center"> <a style="text-align: center" href="https://at.aotu.io/"> <img style="max-width:100%; display: inline-block!important; vertical-align: middle;" width=150 height=140 src="http://storage.360buyimg.com/mtd/home/logo-at1502718221686.svg"> </a> </p> <h1 align="center"> AT-NG </h1> <div align="center">An enterprise-class UI components based on At UI Design and Angular. 🚀🚀🚀
Latest version
✨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
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