https://github.com/codingitwrong/ember-paper-layout

A mobile-friendly layout built using ember-paper.
https://github.com/codingitwrong/ember-paper-layout

Last synced: about 1 month ago
JSON representation

A mobile-friendly layout built using ember-paper.

• Host: GitHub
• URL: https://github.com/codingitwrong/ember-paper-layout
• Owner: CodingItWrong
• License: mit
• Created: 2020-07-20T10:55:56.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-02-14T12:13:47.000Z (almost 3 years ago)
• Last Synced: 2024-12-25T09:14:37.209Z (about 1 month ago)
• Language: JavaScript
• Homepage:
• Size: 2.97 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# ember-paper-layout

A mobile-friendly layout built using `ember-paper`.

## Compatibility

* Ember.js v3.12 or above

* Ember CLI v2.13 or above

* Node.js v10 or above

## Installation

```

$ ember install ember-paper

$ ember install ember-paper-layout

```

## Usage

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`:

```hbs

  

    This is the sidebar!

  

  

    

      This is the toolbar!

    

    

      {{outlet}}

    

  

```

You will see the following:

![App layout with toolbar and sidebar](./docs/images/01-basic-layout.png)

Note that if you narrow the window to mobile size, the sidenav is hidden, and a menu icon appears in its place:

![App layout with sidenav hidden](./docs/images/02-sidenav-hidden.png)

Clicking the menu icon shows the sidenav:

![App layout with sidenav shown](./docs/images/03-sidenav-shown.png)

## Customization

Change the theme color of the app by setting the `$primary` variable in `app.scss`:

```scss

$primary: 'green';

@import 'ember-paper';

```

The `PaperList` component from `ember-paper` is a good choice for adding sidenav contents:

```hbs

  

    

      {{paper-icon "access_time"}}

      
Available

    

    

      {{paper-icon "check_circle"}}

      
Completed

    

  


```

This results in:

![Sidenav with list items](./docs/images/04-sidenav-contents.png)

In the toolbar, it's typical to have one or more buttons, potentially showing menus when clicked:

```hbs

  

    

      

        {{paper-icon "account_circle"}}

      

    

    

      

        Log Out

      

    

  

```

This results in:

![Toolbar icon](./docs/images/05-toolbar-icon.png)

And when clicked:

![Toolbar menu](./docs/images/05-toolbar-menu.png)

## Contributing

See the [Contributing](CONTRIBUTING.md) guide for details.

## License

This project is licensed under the [MIT License](LICENSE.md).