Reactive components for Angular with customizable UX themes
eang is fast, fully reactive, and really flexible angular development framework with a set of themeable visual components. Through its native support for reactive programming, eang enables your angular apps to automatically update the user experience in response to event stream data from event sources. Eang plays well with your existing Angular architecture.
- Create a new project use Angular CLI:
ng new [project name]
- Add
eangto your Angular project by running:
npm install -S @eamode/eang
- Import selected
eangmodules in your project module file. e.g.app.module.ts:
import { PanelModule, AutoCompleteModule, LayoutModule, ... } from '@eamode/eang'
@NgModule({
...
imports: [..., PanelModule, AutoCompleteModule, LayoutModule, ...],
...
})
-
To use eang themes add
@import '~@eamode/eang/css/all.css';to yourstyles.cssfile. -
In
index.htmladd a class to the body tag to apply the selected theme.
...
<body class="mode">
<app-root></app-root>
</body>
...
| Theme Name | Description |
|---|---|
| mode | default theme of MODE |
| material | Components designed following Google's Material design |
| your-theme-here | It is easy to add your own completely customized theme as well. |
- To use the eang
LayoutModule, paste the following into the root component of the app:
<ea-layout>
<ea-toolbar>
<h1>Logo here</h1>
</ea-toolbar>
<ea-drawer>
<a href="">Link in Drawer</a>
</ea-drawer>
<ea-main>
<ea-body>
<p lg>Body</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget mollis nisi. Vivamus vel enim turpis.</p>
</ea-body>
<ea-footer>
<p sm>your company here TM</p>
</ea-footer>
</ea-main>
</ea-layout>
- If you want to change the theme color or another component attributes, just override them using CSS Properties. Use
.<class name>to change the value of the variable for all components in yourstyle.cssfile:
.mode {
--ea-color-background-2: navy;
}
Use <tag name> to change the value of variables for a component:
ea-drawer {
--ea-drawer-width: 12em;
}
- Launch your app by running
npm start. Enjoy.
git clone https://github.com/EAmode/eang.git
cd eang
npm install
npm startGo to http://localhost:4204/ to bring up the website eang-io using @eamode/eang itself.
In order for eang-io to reflect changes made in @eamode/eang, eang-io needs to be linked to @eamode/eang.
npm run build
cd dist/eamode/eang
npm link
cd ../../../
npm link @eamode/eangStart npm run watch and then npm run start in a different terminal. At that point everything should be hot-reloading during development.
You can do that with every angular project using eang. The project's npm start might break, when npm run watch is run in eang, because watch deletes files in the dist folder that the project is linked to. Just restart watch and then npm start in your project again.
NPM scripts:
npm start: Starts eang-io in watch mode.npm run watch: Compiles@eamode/eangin watch mode.npm run commit: CLI toolgit-czto commit to git withconventionalstyle.npm run format: Automatic code formatting the whole project.npm run lint: Linting Angular and CSS.
Recommended VS Code extensions:
- Angular Language Service
- agular2-inline
- Debugger for Chrome
- PostCSS syntax
- Prettier
- TSLint
- stylelint
By default, eang components are styled using the theme called 'mode'. However, you can create your own custom theme by following the steps below.
- Create a file:
themes/<nameofyourtheme>.css - Create a directory:
themes/<nameofyourtheme> - Inside the
themes/<nameofyourtheme>directory...
- create a file called
variables.css(you can copy a variables.css file from one of the other existing theme directories) - create a file
<nameofeangcomponen>.css
- to modify fonts and colors, you can play with the values inside the file
themes/<nameofyourtheme>/variables.css - set up a post-css pipeline
- add a line into the file
'package.json'inside of the'"scripts": {'section as follows:"css:<nameofyourtheme>": "postcss themes/all.css themes/<nameofyourtheme>.css themes/<nameofyourtheme>.css themes/<nameofyourtheme>/**/*.css -o playground/dist/<nameofyourtheme>.css",
eang's build scripts enforce linting to prevent errors.
to commit your changes to eang, just run npm run commit and follow the prompts