public/svelte-carousel
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix code highlight, fix cloning

Browse Source
This commit is contained in:
Vadim
2021-01-24 23:36:21 +03:00
parent 6de0ab7298
commit 1e0b3d3020
7 changed files with 68 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/docs/Carousel.svx
View File

@@ -1,62 +1,59 @@
<script>
import _ from 'lodash'
import Carousel from '../components/Carousel/Carousel.svelte'
import Color from './Color.svelte'
const colorGroups = [
[
{ 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' },
]
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 colorGroups.flat() as { color, text } (color)}
<div
class="color-container"
style="background-color: {color};"
>
<p>{text}</p>
</div>
{#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 colorGroups as colorGroup, groupIndex (groupIndex)}
{#each _.chunk(colors, 3) as colorsChunk, chunkIndex (chunkIndex)}
<div style="display: flex;">
{#each colorGroup as { color, text } (color)}
<div
class="color-container"
style="background-color: {color}; width: 33.33%;"
>
<p>{text}</p>
</div>
{#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>
```
<style>
.color-container {
height: 100px;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
.color-container > p {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-style: italic;
font-size: 18px;
}
</style>