https://github.com/shipshapecode/ember-3d-folding-panel
An Ember addon for 3d folding panels
https://github.com/shipshapecode/ember-3d-folding-panel
3d-folding-panels ember-addon
Last synced: 9 months ago
JSON representation
An Ember addon for 3d folding panels
- Host: GitHub
- URL: https://github.com/shipshapecode/ember-3d-folding-panel
- Owner: shipshapecode
- License: mit
- Created: 2016-09-09T01:24:54.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-03-06T14:37:12.000Z (almost 7 years ago)
- Last Synced: 2025-04-02T23:04:35.984Z (9 months ago)
- Topics: 3d-folding-panels, ember-addon
- Language: JavaScript
- Homepage: https://shipshapecode.github.io/ember-3d-folding-panel/
- Size: 4.86 MB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
ember-3d-folding-panel
==============================================================================
**[ember-3d-folding-panel is built and maintained by Ship Shape. Contact us for Ember.js consulting, development, and training for your project](https://shipshape.io/ember-consulting/)**.
[](http://badge.fury.io/js/ember-3d-folding-panel)
[]()
[](http://emberobserver.com/addons/ember-3d-folding-panel)
[](https://travis-ci.org/shipshapecode/ember-3d-folding-panel)
[](https://codeclimate.com/github/shipshapecode/ember-3d-folding-panel)
[](https://codeclimate.com/github/shipshapecode/ember-3d-folding-panel/coverage)
Ember-3d-folding-panel is based on [3D Folding Panel](https://codyhouse.co/gem/3d-folding-panel/) by CodyHouse. It aims to make it easily configurable for use with your Ember apps.
Compatibility
------------------------------------------------------------------------------
* Ember.js v2.18 or above
* Ember CLI v2.13 or above
Installation
------------------------------------------------------------------------------
`ember install ember-3d-folding-panel`
Usage
------------------------------------------------------------------------------
```hbs
{{folding-panel}}
{{#ember-3d-folding-panel}}
{{#each model as |item|}}
{{#item-square item=item}}
{{/item-square}}
{{/each}}
{{/ember-3d-folding-panel}}
```
`items` are defined as an array of objects, these should contain `heading` and `subheading`.
You can also display extra info inside of the `item-square`.
The route from the dummy app, which contains an array of items, looks like this:
```js
export default Route.extend({
model() {
return [
{
heading: 'Client 1',
subheading: 'Lorem ipsum dolor sit amet, consectetur.',
panelHeading: 'Client 1',
panelSubheading: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, laboriosam?',
imageURL: 'img/logo1.png',
panelInfo
},
{
heading: 'Client 2',
subheading: 'Lorem ipsum dolor sit amet, consectetur.',
panelHeading: 'Client 2',
panelSubheading: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, laboriosam?',
imageURL: 'img/logo2.png',
panelInfo
},
...
];
}
});
```
## Styles
Ember-3d-folding-panel uses Sass for styles. The default styles for the panels are stored in an overridable Sass map. This is accomplished by supplying a `$ember-3d-folding-panel` map with any or all of the keys found in the defaults map below.
```scss
// This is the default map, not what you should use.
// i.e. you want to define $ember-3d-folding-panel, not $ember-3d-folding-panel-defaults
$ember-3d-folding-panel-defaults: (
'accent-color': #544173, // Mulled Wine
'color-1': #363558, // Martinique
'color-2': #544173, // Mulled Wine
'color-3': #dadcdc, // Iron
'color-4': #65d29b, // Emerald
'color-6': #ffffff, // White
'dark-color': #363558, // Martinique
'fold-animation': .5s,
'fold-color': #dadcdc,
'fold-content-animation': .2s*(3+1)/2, // replace 3 with number of elements that you want to animate
'light-color': #ffffff, // White
'overlay-color': #1c1726, // Bastille
);
```
Under the hood, the addon will merge the default settings and any settings supplied in an `$ember-3d-folding-panel` map and use those to style the panels. Very little, other than this map, should be required to get the panels looking the way you want them to.
### Example styles usages
If you wanted to supply some different colors for the panels, but keep the same animations, your styles.scss might look something like this:
```sass
$ember-3d-folding-panel: (
'color-1': #ffffff,
'color-2': #000000,
'color-3': #ffffff,
'color-4': #000000
);
// After you define your overrides, make sure to import the styles from the addon!
@import 'ember-3d-folding-panel';
```
Contributing
------------------------------------------------------------------------------
See the [Contributing](CONTRIBUTING.md) guide for details.
License
------------------------------------------------------------------------------
This project is licensed under the [MIT License](LICENSE.md).