Island layout with clickable thumbnails
Configurable set of clickable thumbnails in "island" style. Accepts up to 6 items.
You can tweak the style using the controls on the right side. The code example below will change as you tweak the values.
In this demo, you can click the background image or the thumbnails to upload different images.
CONTROLS
Number of items:
Background color
Thumbnails background color
Thumbnails padding: 3px
Thumbnails border radius: 6px
Remove island padding
1import ThumbnailsIsland from '@tempoplatform/tpds/components/thumbnails-island'
2
3<ThumbnailsIsland
4 backgroundColor='#ffffff45'
5 thumbnailsBackgroundColor='#0000005c'
6 thumbnailsBorderRadius={6}
7 thumbnailsPadding={3}
8 removeEnclosingIsland={false}
9 items={[
10 { url: 'https://picsum.photos/200/200', callBack: () => console.log('clicked thumb 1') },
11 { url: 'https://picsum.photos/200/200', callBack: () => console.log('clicked thumb 2') },
12 { url: 'https://picsum.photos/200/200', callBack: () => console.log('clicked thumb 3') },
13 { url: 'https://picsum.photos/200/200', callBack: () => console.log('clicked thumb 4') },
14 ]}
15/>Prop Name
Type
Default
Required
Description
items
Array
null
yes
The array of images in the format { url: string, callBack: function }
backgroundColor
String
rgba(156, 163, 175, 0.2)
no
The background color of the island.
thumbnailsBackgroundColor
String
white
no
The background color of the thumbnails. It is only visible if the thumbnails padding is set above zero.
thumbnailsPadding
Number
0
no
The padding around the thumbnails.
thumbnailsBorderRadius
Number
6
no
The roundness of the thumbnails.
removeEnclosingIsland
Boolean
false
no
If true, removes the island padding around the thumbnails.