ember-content-placeholders
Ember addon for rendering fake content while data is fetching to provide better UX and lower bounce rate.
💿 Installation
Compatibility
🚀 Usage
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
Usage
[Longer description of how to use the addon in apps.]
Contributing
See the Contributing guide for details.
🔒 License
This project is licensed under the MIT License.