ember-frost-navigation v10.0.2
ember-frost-navigation
Dependencies
Health
Security
Ember Observer score
Navigation made easy. Makes use of liquid fire and the RouterDSL
prototype to make a clean and concise way of
creating, and navigating routes.
Also supports ember-engines
Installation
ember install ember-frost-navigation
Usage
Add the {{frost-navigation}}
component to the template where you want the navigation to appear, then configure
your navigation in app/router.js
Template
{{frost-navigation
logo=(component ...)
menu=(component ...)
navActions=(hash
myAction=(action 'custom-action')
)
}}
Router (Full Example)
Router.map(function () {
this.nav('demo', {
path: '/'
}, function () {
this.category('Category 1', {
pack: 'dummy',
icon: 'sample'
}, function () {
this.column('Column 1', {
color: '#009eef'
}, function () {
this.action('Action Example', {
action: 'myAction',
pack: 'dummy',
icon: 'sample',
description: 'This is an action',
inline: true
})
this.app('Route Example', {
route: 'go',
description: 'This is a route',
pack: 'dummy',
icon: 'sample'
})
this.engine('Blog Engine', {
route: 'blog',
description: 'This is an engine example',
package: 'ember-blog-engine',
pack: 'dummy',
icon: 'sample'
})
this.section('More Content', {
color: '#a1e7ff'
}, function () {
this.link('Google', {
url: 'http://google.ca',
description: 'Go to Google',
pack: 'dummy',
icon: 'sample',
tabbed: true
})
this.link('http://google.ca')
this.action('Action 1', {
action: 'myAction',
pack: 'dummy',
icon: 'sample'
})
})
})
this.column('Empty Column')
})
})
})
Documentation
this.nav
/**
* Initializes the navigation bar
* @parent Ember.RouterDSL
* @param {string} config.dialogClass class to apply to liquid-modal
* @param {object} config.actions actions to pass up to liquid-modal
* @param {array} config.model predefined model to be rendered
*/
this.category
/**
* Category as a navigation bar entry
* @parent {type:nav}
* @param {string} config.icon icon
* @param {string} config.pack icon pack
* @param {array} config.model predefined category model
*/
this.column
/**
* Creates a column viewable within a category
* @parent {type:category}
* @param {string} config.color color
* @param {array} config.routes predefined routes array
* @param {array} config.actions predefined actions array
*/
this.section
/**
* Creates a section under within a category
* @parent {type:category}
* @param {string} config.color color
* @param {array} config.routes predefined routes array
* @param {array} config.actions predefined actions array
*/
this.app
/**
* Creates a routable route instance
* @parent {type:[column, section]}
* @param {string} config.description description
* @param {string} config.icon icon
* @param {string} config.pack icon pack
* @param {string} config.route route to navigate to
* @param {object} config.params query params
*/
this.engine
/**
* Creates a routable engine instance
* @parent {type:[column, section]}
* @param {string} config.package package name for engine
* @param {string} config.route route name for nav entry
* @param {object} config.params query params
* @param {string} config.description description
* @param {string} config.icon icon
* @param {string} config.pack icon pack
*/
this.action
/**
* Creates a menu item that serves as an action,
* without performing a transition
* @parent {type:[column, section]}
* @param {string} config.description description
* @param {string} config.icon icon
* @param {string} config.pack icon pack
* @param {string} config.action key for action on controller
* @param {boolean} config.dismiss flag to dismiss modal after click
*/
this.link
/**
* Creates a link accessible from frost-navigation
* @parent {type:[column, section]}
* @param {string} config.description description
* @param {string} config.icon icon
* @param {string} config.pack icon pack
* @param {string} config.route navigate to route without registering on DSL
* @param {string} config.url url to set href to
* @param {boolean} config.tabbed flag to open in new tab (default false)
*/
CSS
The following CSS classes are defined by this addon to make it easier to layout a page using frost-navigation
:
frost-application
: This class should be applied to, the parent of thefrost-navigation
element.frost-application-content
: This class should be applied to the element below thefrost-navigation
element. It will ensure that that element takes up all the space below the navigation.
<div class='frost-application'>
{{frost-navigation ...}}
<div class='frost-application-content'>
<!-- the rest of your page here -->
</div>
</div>
User menu
An example of a user-menu is defined in the dummy app at tests/dummy/app/pods/components/user-menu
There are also
a couple classes defined in this addon that will format your own user-menu properly:
frost-navigation-user
for the actual user menu buttonfrost-navigation-user-menu
for the popover menu that is expanded when clicking on the above buttonfrost-navigation-user-menu-list
for the<ul>
that holds the list items of the user menu
Testing with ember-hook
The navigation component is accessible using ember-hook with the top level hook names, or you can access the internal components as well -
Property | Hook |
---|---|
top level hook | $hook('frost-nav') |
modal hook | $hook('frost-nav-modal') |
category hook | $hook('frost-nav-category-<index>') |
section / column hook | $hook('frost-nav-modal-section-<index>') |
section actions hook| $hook('frost-nav-modal-section-actions')` | |
inline action from section context | $hook('frost-nav-modal-section-<sectionIndex>-action-<actionIndex>') |
route hook | $hook('frost-nav-modal-section-<sectionIndex>-route-<routeIndex>') |
frost-link within the route / action context | $hook('frost-nav-modal-section-<sectionIndex>-(route / action)-<index>-link') |
action from section actions context | $hook('frost-nav-modal-section-actions-<index>') |
Setup
git clone git@github.com:ciena-frost/ember-frost-navigation.git
cd ember-frost-navigation
npm install && bower install
Development Server
A dummy application for development is available under ember-frost-navigation/tests/dummy
.
To run the server run ember server
(or npm start
) from the root of the repository and
visit the app at http://localhost:4200.
Testing
Run npm test
from the root of the project to run linting checks as well as execute the test suite
and output code coverage.
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago