Skip to content
Composable components for rendering fake (progressive) content like facebook
Branch: master
Clone or download
Latest commit e983872 May 6, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon Rename to "ember-content-placeholders" (#1) Oct 8, 2017
app Rename to "ember-content-placeholders" (#1) Oct 8, 2017
blueprints/ember-content-placeholders Rename to "ember-content-placeholders" (#1) Oct 8, 2017
config
node-tests Rename to "ember-content-placeholders" (#1) Oct 8, 2017
tests Upgrade to Ember 3 (#4) May 6, 2018
vendor
.editorconfig Initial Commit from Ember CLI v2.16.0-beta.2 Oct 4, 2017
.ember-cli Initial Commit from Ember CLI v2.16.0-beta.2 Oct 4, 2017
.eslintrc.js Upgrade to Ember 3 (#4) May 6, 2018
.gitignore Upgrade to Ember 3 (#4) May 6, 2018
.npmignore Upgrade to Ember 3 (#4) May 6, 2018
.travis.yml Upgrade to Ember 3 (#4) May 6, 2018
.watchmanconfig Initial Commit from Ember CLI v2.16.0-beta.2 Oct 4, 2017
LICENSE.md Initial Commit from Ember CLI v2.16.0-beta.2 Oct 4, 2017
README.md Upgrade to Ember 3 (#4) May 6, 2018
compile-css.js Add css compilation (#2) Oct 12, 2017
ember-cli-build.js Upgrade to Ember 3 (#4) May 6, 2018
index.js Upgrade to Ember 3 (#4) May 6, 2018
package.json 1.0.0 May 6, 2018
testem.js Upgrade to Ember 3 (#4) May 6, 2018
yarn.lock Upgrade to Ember 3 (#4) May 6, 2018

README.md

ember-content-placeholders

NPM version Build Status

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}}

rendered example

{{#content-placeholders rounded=true as |placeholder|}}
  {{placeholder.img}}
  {{placeholder.heading}}
{{/content-placeholders}}

rendered example

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

🍻 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

For more information on using ember-cli, visit https://ember-cli.com/.

🔒 License

This project is licensed under the MIT License.

You can’t perform that action at this time.