Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
ember-3d-folding-panel
Advanced tools
Ember-3d-folding-panel is based on 3D Folding Panel by CodyHouse. It aims to make it easily configurable for use with your Ember apps.
ember install ember-3d-folding-panel
{{folding-panel}}
{{#ember-3d-folding-panel}}
{{#each model as |item|}}
{{#item-square item=item}}
<img class="client-image" src="{{item.imageURL}}">
{{/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:
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
},
...
];
}
});
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.
// 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.
If you wanted to supply some different colors for the panels, but keep the same animations, your styles.scss might look something like this:
$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';
FAQs
An Ember addon for 3d folding panels
The npm package ember-3d-folding-panel receives a total of 4 weekly downloads. As such, ember-3d-folding-panel popularity was classified as not popular.
We found that ember-3d-folding-panel demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.