Riot Views
This is a collection of reusable riot views. They can be used as components to build up functionality.
Each view is prefixed with solid-
(Solid Compnonent).
Example
http://solid-interactive.github.io/riot-views/
These docs in alternative format
http://documentup.com/solid-interactive/riot-views
Guide
solid-clamp
Dependencies : clamp-js
A Clamp can be used to limit the number of lines displayed and ellipsize the last line i fthere is overflow. Internally
it uses a <yield />
.
Attributes:
- lines: number of lines to clamp to - default: 1
Content:
- Text you want clamped.
The following text will be clamped to two lines even if the text is longer than two lines.
Modals
solid-modal
Dependencies : bluebird
This modal can be openend using tag.show()
. This will return a promise that is resolved if the modal is closed, or
rejected if the modal is canceled.
Open modal This is a modal.
solid-modal-close
Dependencies : none
Clicking on this view will trigger close on the parent view.
This is a modal.
solid-raw
Dependencies : none
Will output html string. Riot by default will not template html. Use this tag when you want to template html.
Attributes:
- content: an html string.
riot;
solid-tabs
Dependencies : velocity
Tabs with an animated underline.
Attributes:
- tabs: an array of tabs. Each tab item should have a
hash
and alabel
property. - callback: an optional function that gets called with the active index on each user click.
riot;
solid-background-video
;
Dependencies : listen-once
, lodash.throttle
Big background video, will autoplay and loop. Will resize with browser and maintain aspect ratio while covering parent tag.
Attributes:
mp4
: REQUIRED. A path to a mp4 file.webm
: RECOMMENDED. A path to a webm file.poster
: REQUIRED. A poster image to show when the browser does not support, OR, when when on mobile.maxwidthforplayback
: REQUIRED. A pixel size that will be the max width the video will play. If below this value, show the poster (mobile).playonmobile
: RECOMMENDED. If you want to cancel playback on any mobile devices (not just by the width displayed above.)
riot;
Important
When using this tag, it must be wrapped in a relatively positioned parent, with a height and a width set.