Ember-read-more NPM

Ember-read-more

A simple read-more component for ember, using maximum height.

Installation

ember install ember-read-more

Usage

{{#read-more}}
  Lorem ipsum...
{{/readmore}}

Options

isOpen - The on-load state of the component (default: false)
maxHeight - The maximum visible height when the component is closed (default: '200px')
toggleClass - The class of the toggle link (default: 'read-more-toggle')
openText - The open action text of the toggle link (default: 'Read more')
closeText - The close action text of the toggle link (default: 'Close')
bodyClass - The class of the content div (default: 'read-more-body')
bodyCss - The default styles of the content div (default: 'overflow-y: hidden; width: 100%; display: block;')

Actions

The onClose or the onOpen action is triggered when the toggle link is clicked.

You can set these actions like the example below:

{{#read-more onClose='yourCloseAction' onOpen='yourOpenAction'}}
  Lorem ipsum...
{{/readmore}}

Class bindings

The is-open or the is-closed class is automatically added to the component. Use these classes if you want to style your component differently for each state.

Animations

This component is using css max-height to toggle your content. Adding the following in your project styles should do the trick:

.read-more-body {
  max-height: 1000px; // set a height that your content will not exceed
  transition: max-height .3s;  // change the .3s to the duration you want
}