Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rajasegar/ember-off-canvas-sidebar
Ember addon for off-canvas sidebar menu with transitions.
https://github.com/rajasegar/ember-off-canvas-sidebar
ember ember-addon menu navigation sidebar
Last synced: 2 months ago
JSON representation
Ember addon for off-canvas sidebar menu with transitions.
- Host: GitHub
- URL: https://github.com/rajasegar/ember-off-canvas-sidebar
- Owner: rajasegar
- License: mit
- Created: 2020-08-28T23:28:09.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-09-04T06:40:34.000Z (over 4 years ago)
- Last Synced: 2024-09-13T02:36:22.591Z (3 months ago)
- Topics: ember, ember-addon, menu, navigation, sidebar
- Language: JavaScript
- Homepage: https://rajasegar.github.io/ember-off-canvas-sidebar
- Size: 646 KB
- Stars: 6
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
ember-off-canvas-sidebar
==============================================================================
[](https://coveralls.io/github/rajasegar/ember-off-canvas-sidebar?branch=master)
[](https://github.com/semantic-release/semantic-release)
[](https://npmjs.org/package/ember-off-canvas-sidebar "View this project on npm")
[](http://emberobserver.com/addons/ember-off-canvas-sidebar)
Ember addon for off-canvas sidebar menu with transitions.
This addon is inspired by [Transitions for Off canvas navigations](https://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations) article in [Codrops](https://tympanus.net/codrops).
Installation
------------------------------------------------------------------------------
```
ember install ember-off-canvas-sidebar
```
Usage
------------------------------------------------------------------------------
### Menu
```hbs
```
### Trigger
```hbs
Slide in on top
```
For the following transitions , you need to add an additional wrapping `div class="st-pusher"` to make the transitions work properly.
- st-effect-push
- st-effect-rotate-pusher
- st-effect-3d-rotate-in
- st-effect-3d-rotate-out
- st-effect-delayed-3d-rotate
```hbs
```
See the `dummy` app for more detailed code on how to use this component.
## Styles
Ember off-canvas sidebar come with about 14 different transitions for the sidebar.
Just give any one of the following values for the *eoc-sidebar-trigger* modifier of the trigger element.
- st-effect-slide-in-on-top (default)
- st-effect-reveal
- st-effect-3d-rotate-in
- st-effect-3d-rotate-out
- st-effect-delayed-3d-rotate
- st-effect-fall-down
- st-effect-open-door
- st-effect-push
- st-effect-reverse-slide-out
- st-effect-rotate-pusher
- st-effect-scale-down-pusher
- st-effect-scale-rotate-pusher
- st-effect-scale-up
- st-effect-slide-along
## Configuring
Add a configuration for `ember-off-canvas-sidebar` to include only the transitions that you will use.
```js
ENV['ember-off-canvas-sidebar'] = {
includedTransitions: ['st-effect-open-door', 'st-effect-fall-down'],
excludedTransitions: ['st-effect-scale-up'],
excludeBaseStyles: false, // defaults to false
defaultTransition: 'st-effect-slide-in-on-top', // defaults to 'st-effect-slide-in-on-top'
};
```
To exclude or not include a transition, means that it's css styles will not be bundled with your application, thus not polluting your app.
> **Note:** including a blank array e.g. `includeTransitions: []` will not include any transitions, leaving
you to define your own transition styles. See the `vendor/ember-off-canvas-sidebar/transitions` directory
for reference.
> **Note:** you may also want to set `excludeBaseStyles: true` so that this addon doesn't include the styles
used by all the transitions.
A big Thanks to [Ilya Radchenko](https://github.com/knownasilya) for making this configuration possible to have
a small memory footprint of css in your app when you are using the addon.
Compatibility
------------------------------------------------------------------------------
* Ember.js v3.12 or above
* Ember CLI v2.13 or above
* Node.js v10 or above
Contributing
------------------------------------------------------------------------------
See the [Contributing](CONTRIBUTING.md) guide for details.
License
------------------------------------------------------------------------------
This project is licensed under the [MIT License](LICENSE.md).
## Credits
* [Mary Lou](https://github.com/crnacura)
* [Ilya Radchenko](https://github.com/knownasilya)