Angular Module for Quick Styling
To include angular-style in your app, add it as a module.
angular.module('example', ['ngRoute', 'angularStyle']);
Angular-style uses attribute directives to add styling to elements. Angular-style uses predefined pixel units of 4px. The arguments of the directives are the multiplier to the 4px.
The general pattern for using margin is as-m-<direction>
. Angular-style supportst the following directions for margin:
- xy: Margin in all directions
- x: Margin left and right
- y: Margin top and bottom
- t: Margin top
- b: Margin bottom
- l: Margin left
- r: Margin right
The following would result in a div with margin of 16px in all directions.
<div as-m-xy="4">
Your Content
</div>
The general pattern for using padding is as-p-<direction>
. Angular-style supports the following directions for padding:
- xy: Padding in all directions
- x: Padding left and right
- y: Padding top and bottom
- t: Padding top
- b: Padding bottom
- l: Padding left
- r: Padding right
The following would result in a div with padding of 16px in all directions.
<div as-p-xy="4">
Your Content
</div>
Angular style includes a font pattern too. The patter is as follows as-f='<size> <weight>'
. The following are weight and size combos.
- xs
- s
- m
- l
- xl
- normal
- bold
- black
The following would result in large bold text:
<div as-f="l bold">Test</div>
These are for a text input and a button:
<input as-i-text>
<input as-i-button>
This is a card to view data.
<div as-card></div>