A simple read-more component for ember, using maximum height.
ember install ember-read-more
{{#read-more}}
Lorem ipsum...
{{/read-more}}
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;'
)
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...
{{/read-more}}
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.
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
}
ember server
- Visit your app at http://localhost:4200.
npm test
(Runsember try:testall
to test your addon against multiple Ember versions)ember test
ember test --server
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.