58 lines
1.3 KiB
Plaintext
58 lines
1.3 KiB
Plaintext
<script>
|
|
import _ from 'lodash'
|
|
import Carousel from '../components/Carousel/Carousel.svelte'
|
|
import Color from './Color.svelte'
|
|
|
|
const colors = [
|
|
{ color: '#e5f9f0', text: '#e5f9f0' },
|
|
{ color: '#ccf3e2', text: '#ccf3e2' },
|
|
{ color: '#b2edd3', text: '#b2edd3' },
|
|
{ color: '#99e7c5', text: '#99e7c5' },
|
|
{ color: '#7fe1b7', text: '#7fe1b7' },
|
|
{ color: '#66dba8', text: '#66dba8' },
|
|
{ color: '#4cd59a', text: '#4cd59a' },
|
|
{ color: '#32cf8b', text: '#32cf8b' },
|
|
{ color: '#19c97d', text: '#19c97d' },
|
|
]
|
|
</script>
|
|
|
|
## Single item
|
|
<Carousel>
|
|
{#each colors as { color, text } (color)}
|
|
<Color {color} {text} />
|
|
{/each}
|
|
</Carousel>
|
|
|
|
```jsx
|
|
<Carousel>
|
|
{#each colors as { color, text } (color)}
|
|
<Color {color} {text} />
|
|
{/each}
|
|
</Carousel>
|
|
```
|
|
|
|
## Multiple items
|
|
<Carousel>
|
|
{#each _.chunk(colors, 3) as colorsChunk, chunkIndex (chunkIndex)}
|
|
<div style="display: flex;">
|
|
{#each colorsChunk as { color, text } (color)}
|
|
<Color {color} {text} />
|
|
{/each}
|
|
</div>
|
|
{/each}
|
|
</Carousel>
|
|
|
|
```jsx
|
|
<Carousel>
|
|
{#each _.chunk(colors, 3) as colorsChunk, chunkIndex (chunkIndex)}
|
|
<div style="display: flex;">
|
|
{#each colorsChunk as { color, text } (color)}
|
|
<Color {color} {text} />
|
|
{/each}
|
|
</div>
|
|
{/each}
|
|
</Carousel>
|
|
```
|
|
|
|
|