https://github.com/michalsnik/ember-content-placeholders
Composable components for rendering fake (progressive) content like facebook
https://github.com/michalsnik/ember-content-placeholders
ember ember-addon fake-content lazy-loading loader progressive-rendering
Last synced: 8 months ago
JSON representation
Composable components for rendering fake (progressive) content like facebook
- Host: GitHub
- URL: https://github.com/michalsnik/ember-content-placeholders
- Owner: michalsnik
- License: mit
- Created: 2017-10-04T22:15:44.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2021-06-28T08:53:13.000Z (over 4 years ago)
- Last Synced: 2025-03-27T02:10:00.246Z (9 months ago)
- Topics: ember, ember-addon, fake-content, lazy-loading, loader, progressive-rendering
- Language: JavaScript
- Size: 165 KB
- Stars: 119
- Watchers: 6
- Forks: 12
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
ember-content-placeholders
==============================================================================
[](https://npmjs.org/package/ember-content-placeholders)
[](https://travis-ci.org/michalsnik/ember-content-placeholders)
> Ember addon for rendering fake content while data is fetching to provide better UX and lower bounce rate.
:cd: Installation
------------------------------------------------------------------------------
```
ember install ember-content-placeholders
```
:rocket: Usage
------------------------------------------------------------------------------
```hbs
{{#content-placeholders as |placeholder|}}
{{placeholder.heading img=true}}
{{placeholder.text lines=3}}
{{/content-placeholders}}
```
```hbs
{{#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
* yield `placeholder.heading`
* Boolean `img` (default: false)
* yield `placeholder.text`
* Number `lines` (default: 4)
* 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 when `rounded` property is `true`
* `$ember-content-placeholders-line-height` - single line height
* `$ember-content-placeholders-spacing` - distance between lines
:beers: 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` – Runs `ember try:each` to test your addon against multiple Ember versions
### Running the dummy application
* `ember serve`
* Visit the dummy application at [http://localhost:4200](http://localhost:4200).
For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).
:lock: License
------------------------------------------------------------------------------
This project is licensed under the [MIT License](LICENSE.md).