A mobile-friendly layout built using ember-paper
.
- Ember.js v3.12 or above
- Ember CLI v2.13 or above
- Node.js v10 or above
$ ember install ember-paper
$ ember install ember-paper-layout
This addon provides a single top-level LayoutCountainer
component for the layout of the app. It yields a number of child components you can use to provide the sidenav, toolbar, and body of your page.
For example, if you put the following in application.hbs
:
You will see the following:
Note that if you narrow the window to mobile size, the sidenav is hidden, and a menu icon appears in its place:
Clicking the menu icon shows the sidenav:
Change the theme color of the app by setting the $primary
variable in app.scss
:
$primary: 'green';
@import 'ember-paper';
The PaperList
component from ember-paper
is a good choice for adding sidenav contents:
This results in:
In the toolbar, it's typical to have one or more buttons, potentially showing menus when clicked:
This results in:
And when clicked:
See the Contributing guide for details.
This project is licensed under the MIT License.