User Interface elements
User interface elements served as components.
Documentation
Code
The code is documented thanks to jsDoc. Check the source code for more detail.
Demos
Please refer to our live documentation.
This is the way to see are live demos:
- Execute the serve command
$ gulp serve
- Open the demos page in a browser:
http://localhost:3000/doc/demos/
Splash screen service
You can use syn-ui app loaded. It animates the logo and loads all files asynchronously.
Just paste this snippet in your html page and modify whatever you need.
#splash-screen-content.splash-screen
.app-svg-logo.app-svg-logo--no-name.app-svg-logo--white
include ../path/to/svg-logo.svg
include ../../node_modules/syn-ui/splash-screen/template.jade
script(type='text/javascript').
syn.ui.splashScreen({
files: { css: ['styles.css'], js: ['cordova.js', 'js/app.js'] }
})
.then(function(){
angular.bootstrap( document.body, [ 'MyApp' ] );
})Components
syn-nav-stack
Multi level menu.
Options
| Name | Type | Description |
|---|---|---|
| nav | {Object} | List of buttons to add |
| nav.foo | {Object} | Definition of a button |
| head.foo.label | {String} | Name of the button |
| head.foo.nav | {String} | List of children buttons |
| head.foo.id | {String} | Unique id (optional) (default: foo) |
| head.foo.classes | {Array} | List of css classes to add to DOM Element |
| head.foo.on | {Object} | List of event handlers |
| head.foo.on.foo | {Function} | Event handler |
| [ active ] | {string} | Default active button |
{
nav:
televisions:
label: 'Televisions'
classes: [ 'tv-icon' ]
on:
click: ( item ) -> alert( item.label )
keypress: ( item, event ) -> alert( event.keyCode )
nav:
smart: 'Smart TV'
led: 'LED'
plasma: 'Plasma'
cameras:
label: 'Cameras'
}