zen-ui-angularjs v0.1.1
Zen UI ▸ AngularJS implementation
This package contains UI components build with AngularJS.
Documentation
Basic information about components is in the package zen-ui.
Running tests
To start unit tests, use:
npm test
Setup
In your project install core package and AngularJS implementation package with npm:
npm install zen-ui-core zen-ui-angularjs
Use stylesheet and images from core package.
Every component use rem
units, with initial size 13px.
It may be changed:
html {
font-size: 16px;
}
No more configuration of stylesheet is required.
Then use JavaScript from the package zen-ui-angularjs
.
Add module ZenUI
to your app module and configure it.
angular
.module("app", ["ZenUI"])
.run(function (ZEN_UI, ZenLogger, ZEN_LOG_LEVEL) {
ZEN_UI.SYSTEM.LOADING_MASK_LOCATION = "assets/img/loading.gif";
ZenLogger.setLevel(ZEN_LOG_LEVEL.OFF);
});
In the above example there is everything you will need to configure:
- default path to loading animation, and
- log level.
By default logger will show all messages. You may make it silent as in the above example.
Then use components in you template:
<zen-vertical-layout>
<zen-vertical-layout-row/>
<zen-vertical-layout-row zen-height="::'100%'"/>
</zen-vertical-layout>
As you can see, all components and attributes have prefix zen
.
And almost all properties have two way binding.
That is why better to use ::
notation when possible to remove watchers.
Examples
There are examples at angularjs-examples.zen-ui.org with sources in the package zen-ui-angularjs-examples
7 years ago