Miss any of our Open RFC calls?Watch the recordings here! »


0.2.1 • Public • Published

Ember Off Canvas Components

A micro library packaged as and Ember CLI Addon - a group of Ember.js Components that interact to create an Off-Canvas user interface.

Build Status


As an Ember CLI addon

Use this addon in you ember-cli application...

npm install --save-dev pixelhandler/ember-off-canvas-components

As a Standalone Library

Download a release.

Copy to your vendor directory and link up the .js and .css files

View a demo

  • An off-canvas area is positioned outside of the viewport and slides into view when activated.
  • (Off-canvas is a UI pattern, and not associated with the html canvas element.)



git clone git@github.com:pixelhandler/ember-off-canvas-components.git
cd ember-off-canvas-components
npm install


  1. ember server
  2. Visit your app at http://localhost:4200.

Running Tests

  • ember test
  • ember test --server


  • ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

Also see the packaging readme file for a non Ember CLI release.

Test the addon as a dependency

The dummy app is used for the demo on the gh-pages branch. Test out the addon in an ember-cli by copying some of the source code of the dummy app.

Test with local clone of this repo using npm link

cd ember-off-canvas-components
npm link
cd ../
ember new test-app
cd test-app
npm link ember-off-canvas-components

Or, test with a github repo

ember new test-app
cd test-app
npm install pixelhandler/ember-off-canvas-components --save-dev

Copy the dummy app files and run the test-app

cp node_modules/ember-off-canvas-components/tests/dummy/app/templates/application.hbs app/templates/application.hbs
cp node_modules/ember-off-canvas-components/tests/dummy/app/templates/index.hbs app/templates/index.hbs
cp node_modules/ember-off-canvas-components/tests/dummy/app/templates/off-canvas.hbs app/templates/off-canvas.hbs
cp node_modules/ember-off-canvas-components/tests/dummy/app/controllers/index.js app/controllers/index.js
cp node_modules/ember-off-canvas-components/tests/dummy/app/routes/index.js app/routes/index.js
cp node_modules/ember-off-canvas-components/tests/dummy/app/styles/app.css app/styles/app.css
ember server


npm i ember-off-canvas-components

DownloadsWeekly Downloads






Last publish


  • avatar