michalsnik / Ember Content Placeholders
Licence: mit
Composable components for rendering fake (progressive) content like facebook
Stars: ✭ 121
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Ember Content Placeholders
ember-cli-g-maps
Deprecated Google Maps Addon
Stars: ✭ 58 (-52.07%)
Mutual labels: ember, ember-addon, lazy-loading
ember-content-loader
Easy, customizable content placeholders / skeletons screens
Stars: ✭ 41 (-66.12%)
Mutual labels: ember, loader, ember-addon
Ember Styleguide
This is a UI addon that intends to help standardize the Ember family of websites and make it easier to make the Ember website an Ember app.
Stars: ✭ 69 (-42.98%)
Mutual labels: ember, ember-addon
Ember Cli Bundle Analyzer
Analyze the size and contents of your Ember app's bundles
Stars: ✭ 78 (-35.54%)
Mutual labels: ember, ember-addon
Ember Side Menu
Side menu component for Ember.js applications
Stars: ✭ 58 (-52.07%)
Mutual labels: ember, ember-addon
Ember Cli Chartist
Ember Addon for Chartist.js
Stars: ✭ 58 (-52.07%)
Mutual labels: ember, ember-addon
Ember Cli Coffeescript
Adds precompilation of CoffeeScript files and all the basic generation types to the ember generate command.
Stars: ✭ 72 (-40.5%)
Mutual labels: ember, ember-addon
Docfy
Build fully personalized documentation sites; write content and demos in Markdown.
Stars: ✭ 48 (-60.33%)
Mutual labels: ember, ember-addon
Ember Steps
Declaratively create wizards, tabbed UIs, and more
Stars: ✭ 84 (-30.58%)
Mutual labels: ember, ember-addon
Ember Drag Sort
A sortable list component with support for multiple and nested lists
Stars: ✭ 82 (-32.23%)
Mutual labels: ember, ember-addon
Ember Simple Auth Auth0
Auth0 + lock.js, built on ember-simple-auth
Stars: ✭ 53 (-56.2%)
Mutual labels: ember, ember-addon
Virtual Each
Ember infinite list component, inspired by react-infinite-list
Stars: ✭ 51 (-57.85%)
Mutual labels: ember, ember-addon
Ember Toggle
Checkbox based Toggle Switches for Ember
Stars: ✭ 111 (-8.26%)
Mutual labels: ember, ember-addon
Ember Sticky Element
An ember component that mimics the functionality of `position: sticky`
Stars: ✭ 51 (-57.85%)
Mutual labels: ember, ember-addon
Ember Cli Clipboard
A simple ember wrapper around clipboard.js
Stars: ✭ 72 (-40.5%)
Mutual labels: ember, ember-addon
Ember Cli Postcss
🔥 A Postcss integration for ember-cli
Stars: ✭ 97 (-19.83%)
Mutual labels: ember, ember-addon
Ember Accessibility
An EmberJS addon to help identify accessibility violations during development
Stars: ✭ 29 (-76.03%)
Mutual labels: ember, ember-addon
Ember React Components
Render React components in Ember
Stars: ✭ 43 (-64.46%)
Mutual labels: ember, ember-addon
ember-content-placeholders
Ember addon for rendering fake content while data is fetching to provide better UX and lower bounce rate.
💿 Installation
ember install ember-content-placeholders
🚀 Usage
{{#content-placeholders as |placeholder|}}
{{placeholder.heading img=true}}
{{placeholder.text lines=3}}
{{/content-placeholders}}
{{#content-placeholders rounded=true as |placeholder|}}
{{placeholder.img}}
{{placeholder.heading}}
{{/content-placeholders}}
Available components and properties
-
root
content-placeholders
- Boolean
animated
(default: true) - Boolean
rounded
(default: false) - border radius - Boolean
centered
(default: false)
properties from root component are automatically passed down to each one of yielded components, so they can be overriden whenever necessary per comoponent case
- Boolean
-
yield
placeholder.heading
- Boolean
img
(default: false)
- Boolean
-
yield
placeholder.text
- Number
lines
(default: 4)
- Number
-
yield
placeholder.img
-
yield
placeholder.nav
TO DO:
placeholder.list
placeholder.chart
placeholder.table
Customization
Composable components make it easy to form a required module, but sometimes it's not enough. If you'd like to also amend styling, there are few variables that can help you out:
-
$ember-content-placeholders-primary-color
- heading background -
$ember-content-placeholders-secondary-color
- light background -
$ember-content-placeholders-border-radius
- border radius size whenrounded
property istrue
-
$ember-content-placeholders-line-height
- single line height -
$ember-content-placeholders-spacing
- distance between lines
🍻 Contributing
Installation
- Fork this repo
git clone https://github.com/{YOUR_USERNAME}/ember-content-placeholders
cd ember-content-placeholders
yarn install
Linting
yarn lint:js
yarn lint:js --fix
Running tests
-
ember test
– Runs the test suite on the current Ember version -
ember test --server
– Runs the test suite in "watch mode" -
yarn test
– Runsember try:each
to test your addon against multiple Ember versions
Running the dummy application
ember serve
- Visit the dummy application at http://localhost:4200.
For more information on using ember-cli, visit https://ember-cli.com/.
🔒 License
This project is licensed under the MIT License.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].