1.0.3 • Published 8 years ago
angular-ui-flag v1.0.3
angular-ui-flag
Angular directive to draw SVG flags.
Installation
- Install via
npm
npm install angular-ui-flag- Include the
<script/>tag somewhere in your header:
<script src="/node_modules/angular-ui-flag/angular-ui-flag.js"></script>- Add the module to your Angular app module list:
var app = angular.module('app', [
'angular-ui-flag',
]);- Add the
<ui-flag/>directive somewhere in your views:
<ui-flag style="flagStyle"></ui-flag>See the demo app for more usage examples.
Configuration
The <ui-flag/> HTML element takes a single property: style which is a nested object of the properties in the below table.
| Property Path | Type | Description |
|---|---|---|
frame | Object | The main SVG element properties |
frame.height | Number | The height of the SVG element |
frame.width | Number | The width of the SVG element |
background | Object | Background layer properties |
background.svg | String | URL path to the SVG element to use for the background |
background.color1 | String | CSS color code (alpha is ok) to use for the first color |
background.color2 | String | CSS color code (alpha is ok) to use for the second color |
background.color3 | String | CSS color code (alpha is ok) to use for the third color |
foreground.svg | String | URL path to the SVG element to use for the foreground |
foreground.color1 | String | CSS color code (alpha is ok) to use for the first color |
foreground.color2 | String | CSS color code (alpha is ok) to use for the second color |
foreground.color3 | String | CSS color code (alpha is ok) to use for the third color |
feature.svg | String | URL path to the SVG element to use for the feature |
feature.color1 | String | CSS color code (alpha is ok) to use for the first color |
feature.color2 | String | CSS color code (alpha is ok) to use for the second color |
feature.color3 | String | CSS color code (alpha is ok) to use for the third color |
Flag concepts
This module splits a flag into three different layers, each of which can contain up to 3 colors:
- Background - The primary flag background. This should also contain an element with the
featureID to dictate where the feature will be placed - Foreground - An overlay over the background layer
- Feature - A sprite style image placed in the absolute foreground. The location of this is determined by the background layer
Making new flag components
If you have an idea for any of the above three aspects of a flag please submit a pull request.
NOTES:
- All component should have a corresponding entry in the
/svg/{bg,fg,ft}/index.jsonfile indicating its title and how many colors its supports - Any component can have 0 - 3 colors. These must be set to
#FF0000,#00FF00and#0000FFfor the first to third color respectively - Every background component (anything in
/svg/bg) needs to have at least one<rect/>or<path/>element which has the IDfeature - Transparency is ok for the foreground and feature components