You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
421 lines
8.3 KiB
Markdown
421 lines
8.3 KiB
Markdown
### Various sizes
|
|
|
|
```jsx
|
|
<util.ConversationContext theme={util.theme}>
|
|
<Image
|
|
height="200"
|
|
width="199"
|
|
url={util.pngObjectUrl}
|
|
attachment={{}}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="149"
|
|
width="149"
|
|
url={util.pngObjectUrl}
|
|
attachment={{}}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="99"
|
|
width="99"
|
|
url={util.pngObjectUrl}
|
|
attachment={{}}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="99"
|
|
width="99"
|
|
url={util.pngObjectUrl}
|
|
attachment={{ pending: true }}
|
|
i18n={util.i18n}
|
|
/>
|
|
</util.ConversationContext>
|
|
```
|
|
|
|
### Various curved corners
|
|
|
|
```jsx
|
|
<util.ConversationContext theme={util.theme}>
|
|
<Image
|
|
height="149"
|
|
width="149"
|
|
curveTopLeft
|
|
url={util.pngObjectUrl}
|
|
attachment={{}}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="149"
|
|
width="149"
|
|
curveTopRight
|
|
url={util.pngObjectUrl}
|
|
attachment={{}}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="149"
|
|
width="149"
|
|
curveBottomLeft
|
|
url={util.pngObjectUrl}
|
|
attachment={{}}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="149"
|
|
width="149"
|
|
curveBottomRight
|
|
url={util.pngObjectUrl}
|
|
attachment={{}}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="149"
|
|
width="149"
|
|
curveBottomRight
|
|
url={util.pngObjectUrl}
|
|
attachment={{ pending: true }}
|
|
i18n={util.i18n}
|
|
/>
|
|
</util.ConversationContext>
|
|
```
|
|
|
|
### With bottom overlay
|
|
|
|
```jsx
|
|
<util.ConversationContext theme={util.theme}>
|
|
<Image
|
|
height="149"
|
|
width="149"
|
|
bottomOverlay
|
|
url={util.pngObjectUrl}
|
|
attachment={{}}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="149"
|
|
width="149"
|
|
bottomOverlay
|
|
curveBottomRight
|
|
url={util.pngObjectUrl}
|
|
attachment={{}}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="149"
|
|
width="149"
|
|
bottomOverlay
|
|
curveBottomLeft
|
|
url={util.pngObjectUrl}
|
|
attachment={{}}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="149"
|
|
width="149"
|
|
bottomOverlay
|
|
curveBottomLeft
|
|
url={util.pngObjectUrl}
|
|
attachment={{ pending: true }}
|
|
i18n={util.i18n}
|
|
/>
|
|
</util.ConversationContext>
|
|
```
|
|
|
|
### With play icon
|
|
|
|
```jsx
|
|
<util.ConversationContext theme={util.theme}>
|
|
<Image
|
|
height="200"
|
|
width="199"
|
|
playIconOverlay
|
|
url={util.pngObjectUrl}
|
|
attachment={{}}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="149"
|
|
width="149"
|
|
playIconOverlay
|
|
url={util.pngObjectUrl}
|
|
attachment={{}}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="99"
|
|
width="99"
|
|
playIconOverlay
|
|
url={util.pngObjectUrl}
|
|
attachment={{}}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="99"
|
|
width="99"
|
|
playIconOverlay
|
|
url={util.pngObjectUrl}
|
|
attachment={{ pending: true }}
|
|
i18n={util.i18n}
|
|
/>
|
|
</util.ConversationContext>
|
|
```
|
|
|
|
### With dark overlay and text
|
|
|
|
```jsx
|
|
<util.ConversationContext theme={util.theme}>
|
|
<div>
|
|
<Image
|
|
height="200"
|
|
width="199"
|
|
darkOverlay
|
|
attachment={{}}
|
|
url={util.pngObjectUrl}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="149"
|
|
width="149"
|
|
darkOverlay
|
|
attachment={{}}
|
|
url={util.pngObjectUrl}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="99"
|
|
width="99"
|
|
darkOverlay
|
|
attachment={{}}
|
|
url={util.pngObjectUrl}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="99"
|
|
width="99"
|
|
darkOverlay
|
|
attachment={{ pending: true }}
|
|
url={util.pngObjectUrl}
|
|
i18n={util.i18n}
|
|
/>
|
|
</div>
|
|
<hr />
|
|
<div>
|
|
<Image
|
|
height="200"
|
|
width="199"
|
|
darkOverlay
|
|
attachment={{}}
|
|
overlayText="+3"
|
|
url={util.pngObjectUrl}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="149"
|
|
width="149"
|
|
darkOverlay
|
|
attachment={{}}
|
|
overlayText="+3"
|
|
url={util.pngObjectUrl}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="99"
|
|
width="99"
|
|
darkOverlay
|
|
attachment={{}}
|
|
overlayText="+3"
|
|
url={util.pngObjectUrl}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="99"
|
|
width="99"
|
|
darkOverlay
|
|
attachment={{ pending: true }}
|
|
overlayText="+3"
|
|
url={util.pngObjectUrl}
|
|
i18n={util.i18n}
|
|
/>
|
|
</div>
|
|
</util.ConversationContext>
|
|
```
|
|
|
|
### With caption
|
|
|
|
```jsx
|
|
<util.ConversationContext theme={util.theme}>
|
|
<div>
|
|
<Image
|
|
height="200"
|
|
width="199"
|
|
attachment={{ caption: 'dogs playing' }}
|
|
url={util.pngObjectUrl}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="149"
|
|
width="149"
|
|
attachment={{ caption: 'dogs playing' }}
|
|
url={util.pngObjectUrl}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="99"
|
|
width="99"
|
|
attachment={{ caption: 'dogs playing' }}
|
|
url={util.pngObjectUrl}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="99"
|
|
width="99"
|
|
attachment={{ caption: 'dogs playing', pending: true }}
|
|
url={util.pngObjectUrl}
|
|
i18n={util.i18n}
|
|
/>
|
|
</div>
|
|
<hr />
|
|
<div>
|
|
<Image
|
|
height="200"
|
|
width="199"
|
|
attachment={{ caption: 'dogs playing' }}
|
|
darkOverlay
|
|
overlayText="+3"
|
|
url={util.pngObjectUrl}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="149"
|
|
width="149"
|
|
attachment={{ caption: 'dogs playing' }}
|
|
darkOverlay
|
|
overlayText="+3"
|
|
url={util.pngObjectUrl}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="99"
|
|
width="99"
|
|
attachment={{ caption: 'dogs playing' }}
|
|
darkOverlay
|
|
overlayText="+3"
|
|
url={util.pngObjectUrl}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="99"
|
|
width="99"
|
|
attachment={{ caption: 'dogs playing', pending: true }}
|
|
darkOverlay
|
|
overlayText="+3"
|
|
url={util.pngObjectUrl}
|
|
i18n={util.i18n}
|
|
/>
|
|
</div>
|
|
</util.ConversationContext>
|
|
```
|
|
|
|
### With top-right X and soft corners
|
|
|
|
```jsx
|
|
<util.ConversationContext theme={util.theme}>
|
|
<div>
|
|
<Image
|
|
height="200"
|
|
width="199"
|
|
attachment={{}}
|
|
closeButton={true}
|
|
onClick={() => console.log('onClick')}
|
|
onClickClose={attachment => console.log('onClickClose', attachment)}
|
|
softCorners={true}
|
|
url={util.gifObjectUrl}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="149"
|
|
width="149"
|
|
attachment={{}}
|
|
closeButton={true}
|
|
onClick={() => console.log('onClick')}
|
|
onClickClose={attachment => console.log('onClickClose', attachment)}
|
|
softCorners={true}
|
|
url={util.gifObjectUrl}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="99"
|
|
width="99"
|
|
attachment={{}}
|
|
closeButton={true}
|
|
onClick={() => console.log('onClick')}
|
|
onClickClose={attachment => console.log('onClickClose', attachment)}
|
|
softCorners={true}
|
|
url={util.gifObjectUrl}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="99"
|
|
width="99"
|
|
attachment={{ pending: true }}
|
|
closeButton={true}
|
|
onClick={() => console.log('onClick')}
|
|
onClickClose={attachment => console.log('onClickClose', attachment)}
|
|
softCorners={true}
|
|
url={util.gifObjectUrl}
|
|
i18n={util.i18n}
|
|
/>
|
|
</div>
|
|
<br />
|
|
<div>
|
|
<Image
|
|
height="200"
|
|
width="199"
|
|
attachment={{}}
|
|
closeButton={true}
|
|
attachment={{ caption: 'dogs playing' }}
|
|
onClick={() => console.log('onClick')}
|
|
onClickClose={attachment => console.log('onClickClose', attachment)}
|
|
softCorners={true}
|
|
url={util.gifObjectUrl}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="149"
|
|
width="149"
|
|
attachment={{}}
|
|
closeButton={true}
|
|
attachment={{ caption: 'dogs playing' }}
|
|
onClick={() => console.log('onClick')}
|
|
onClickClose={attachment => console.log('onClickClose', attachment)}
|
|
softCorners={true}
|
|
url={util.gifObjectUrl}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="99"
|
|
width="99"
|
|
closeButton={true}
|
|
attachment={{ caption: 'dogs playing' }}
|
|
onClick={() => console.log('onClick')}
|
|
onClickClose={attachment => console.log('onClickClose', attachment)}
|
|
softCorners={true}
|
|
url={util.gifObjectUrl}
|
|
i18n={util.i18n}
|
|
/>
|
|
<Image
|
|
height="99"
|
|
width="99"
|
|
closeButton={true}
|
|
attachment={{ caption: 'dogs playing', pending: true }}
|
|
onClick={() => console.log('onClick')}
|
|
onClickClose={attachment => console.log('onClickClose', attachment)}
|
|
softCorners={true}
|
|
url={util.gifObjectUrl}
|
|
i18n={util.i18n}
|
|
/>
|
|
</div>
|
|
</util.ConversationContext>
|
|
```
|