Neoclassical Philosophic Musings

    ember-content-placeholders

    1.0.0 • Public • Published

    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.

    Install

    npm i ember-content-placeholders

    DownloadsWeekly Downloads

    290

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    275 kB

    Total Files

    27

    Last publish

    Collaborators

    • michalsnik