##Usage
First, require the component.
var Media = require('pivotal-ui-react.media').Media;Next, in your jsx, use the component. The default media displays a media object (images, video, audio) to the left or right of a content block.
<UI.Media leftImage={image}>left media</UI.Media>You'll need to pass in an image, most likely a UI.image component.
| Media Modifiers | Options | Description |
|---|---|---|
bodyAlignment |
top (default), "middle", "bottom" | Vertical alignment of the body (used for large images with small content next to it, usually centered) |
stackSize |
"xsmall", "small", "medium", "large" | At what breakpoint should the media object stack |
var image = <UI.Image src='http://placehold.it/50x50' />;
var linkedImage = <UI.Image src='http://placehold.it/50x50' href="http://google.com" />;If you want the image on the right:
<UI.Media rightImage={imageLinked}>
right media
</UI.Media>If you want both a right and left image:
<UI.Media leftImage={image} rightImage={mediaBasicImage}>
left and right media
</UI.Media>###Alignment
The images or other media can be aligned top, middle, or bottom. The default is top aligned.
Images are top aligned by default, so you don't need to make any modifications:
<UI.Media leftImage={image}>
top aligned image - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</UI.Media> <UI.Flag leftImage={image}>
middle aligned image - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</UI.Flag>
<UI.Flag leftImage={image}>
middle aligned and middle body (for short text and big images)
</UI.Flag>This is rarely, if ever, used.
<UI.Media leftImage={image} vAlign='bottom'>
bottom aligned - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</UI.Media>###Spacing
Media spacing can be added to the left and right medias. If no spacing is defined, it defaults to large.
<UI.Media leftImage={image}>
default image spacing media
</UI.Media>
<UI.Media
leftImage={image}
leftMediaSpacing='small'>
small image spacing media
</UI.Media>
<UI.Media
leftImage={image}
leftMediaSpacing='medium'>
medium image spacing media
</UI.Media>
<UI.Media
leftImage={image}
leftMediaSpacing='large'>
large image spacing media
</UI.Media>
<UI.Media
leftImage={image}
leftMediaSpacing='xlarge'>
xlarge image spacing media
</UI.Media>This is a component of Pivotal UI React.
For more information:
All Pivotal UI Components require ReactJS (0.12.x)
A SearchInput component can be used on its own as an input.
It accepts standard text input properties (such as placeholder).
To use SearchInput with a filtered list, bind to the onChange event of the search input.
Then update your list based on event.target.value.
(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.