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

Update docs

Browse Source
This commit is contained in:
Vadim
2021-01-28 21:54:01 +03:00
parent a0dd4a6ed5
commit ad108b2069
4 changed files with 27 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/index.css
View File

@@ -1,4 +1,4 @@
.img-container.svelte-n3qgl9.svelte-n3qgl9{display:block;width:100%;height:200px}.img-container.svelte-n3qgl9>img.svelte-n3qgl9{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}table.svelte-n3qgl9.svelte-n3qgl9{border-collapse:collapse}tr.svelte-n3qgl9.svelte-n3qgl9{border-bottom:2px solid #009800}td.svelte-n3qgl9.svelte-n3qgl9{padding:2px 10px}th.svelte-n3qgl9.svelte-n3qgl9{padding:5px 10px}.custom-arrow.svelte-n3qgl9.svelte-n3qgl9{width:20px;background-color:#000000;opacity:0.3;position:absolute;top:0;bottom:0;z-index:1;transition:opacity 150ms ease;display:flex;align-items:center;justify-content:center;cursor:pointer}.custom-arrow.svelte-n3qgl9.svelte-n3qgl9:hover{opacity:0.5}.custom-arrow.svelte-n3qgl9>i.svelte-n3qgl9{border:solid #1e1e1e;border-width:0 5px 5px 0;padding:5px;position:relative}.custom-arrow-prev.svelte-n3qgl9.svelte-n3qgl9{left:0}.custom-arrow-prev.svelte-n3qgl9>i.svelte-n3qgl9{transform:rotate(135deg);right:-4px}.custom-arrow-next.svelte-n3qgl9.svelte-n3qgl9{right:0}.custom-arrow-next.svelte-n3qgl9>i.svelte-n3qgl9{transform:rotate(-45deg);left:-4px}.custom-dots.svelte-n3qgl9.svelte-n3qgl9{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;padding:0 20px}html, body { .img-container.svelte-bi9sd6.svelte-bi9sd6{display:block;width:100%;height:200px}.img-container.svelte-bi9sd6>img.svelte-bi9sd6{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}.table-wrapper.svelte-bi9sd6.svelte-bi9sd6{max-width:100%;overflow-x:auto}table.svelte-bi9sd6.svelte-bi9sd6{border-collapse:collapse}tr.svelte-bi9sd6.svelte-bi9sd6{border-bottom:2px solid #009800}td.svelte-bi9sd6.svelte-bi9sd6{padding:2px 10px}th.svelte-bi9sd6.svelte-bi9sd6{padding:5px 10px}.custom-arrow.svelte-bi9sd6.svelte-bi9sd6{width:20px;background-color:#000000;opacity:0.3;position:absolute;top:0;bottom:0;z-index:1;transition:opacity 150ms ease;display:flex;align-items:center;justify-content:center;cursor:pointer}.custom-arrow.svelte-bi9sd6.svelte-bi9sd6:hover{opacity:0.5}.custom-arrow.svelte-bi9sd6>i.svelte-bi9sd6{border:solid #1e1e1e;border-width:0 5px 5px 0;padding:5px;position:relative}.custom-arrow-prev.svelte-bi9sd6.svelte-bi9sd6{left:0}.custom-arrow-prev.svelte-bi9sd6>i.svelte-bi9sd6{transform:rotate(135deg);right:-4px}.custom-arrow-next.svelte-bi9sd6.svelte-bi9sd6{right:0}.custom-arrow-next.svelte-bi9sd6>i.svelte-bi9sd6{transform:rotate(-45deg);left:-4px}.custom-dots.svelte-bi9sd6.svelte-bi9sd6{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;padding:0 20px}html, body {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -128,5 +128,5 @@ pre[class*="language-"] {
.token.inserted { .token.inserted {
color: green; color: green;
} }
.color-container.svelte-1bsdhrs.svelte-1bsdhrs{height:150px;width:100%;display:flex;align-items:center;justify-content:center;user-select:none}.color-container.svelte-1bsdhrs>p.svelte-1bsdhrs{font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;font-style:italic;font-size:18px}.divider.svelte-1dny3ln{margin-top:30px;margin-bottom:30px;height:1px}.custom-dot__dot-container.svelte-14kkhbi{height:25px;width:25px;background-color:#727272;border-radius:50%;opacity:0.7;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:5px}.custom-dot__dot-container.svelte-14kkhbi:hover{opacity:0.9}.custom-dot__dot-container_active.svelte-14kkhbi{background-color:#009800}.custom-dot__symbol.svelte-14kkhbi{font-size:14px;font-weight:bold;color:#eaeaea}.sc-carousel__carousel-container.svelte-14k3cum{display:flex;width:100%;flex-direction:column;align-items:center}.sc-carousel__content-container.svelte-14k3cum{position:relative;display:flex;width:100%}.sc-carousel__pages-window.svelte-14k3cum{flex:1;display:flex;overflow:hidden;box-sizing:border-box}.sc-carousel__pages-container.svelte-14k3cum{width:100%;display:flex;transition-timing-function:ease-in-out;transition-property:transform}.sc-carousel__arrow-container.svelte-14k3cum{padding:5px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.albums-container.svelte-16ckfh1.svelte-16ckfh1{display:flex;justify-content:center;flex-wrap:wrap}.album-container.svelte-16ckfh1.svelte-16ckfh1{width:250px;padding:10px;background-color:#c6c6c6;border-radius:5px;margin:5px}.album-title.svelte-16ckfh1.svelte-16ckfh1{font-size:16px}.album-size.svelte-16ckfh1.svelte-16ckfh1{font-size:10px;color:#585858}.album-tag.svelte-16ckfh1.svelte-16ckfh1{background-color:#8f8f8f;border-radius:5px;padding:1px 5px;color:#ffffff;margin-top:3px;margin-bottom:3px;display:inline-block;font-size:10px}.album-tag.svelte-16ckfh1.svelte-16ckfh1:not(:last-child){margin-right:3px}.album-arrow.svelte-16ckfh1.svelte-16ckfh1{width:20px;background-color:#000000;opacity:0;position:absolute;top:0;bottom:0;z-index:1;transition:opacity 150ms ease;display:flex;align-items:center;justify-content:center;cursor:pointer}.album-arrow.svelte-16ckfh1>i.svelte-16ckfh1{border:solid #1e1e1e;border-width:0 5px 5px 0;padding:5px;position:relative}.album-container.svelte-16ckfh1:hover .album-arrow.svelte-16ckfh1{opacity:0.5}.album-arrow-prev.svelte-16ckfh1.svelte-16ckfh1{left:0}.album-arrow-prev.svelte-16ckfh1>i.svelte-16ckfh1{transform:rotate(135deg);right:-4px}.album-arrow-next.svelte-16ckfh1.svelte-16ckfh1{right:0}.album-arrow-next.svelte-16ckfh1>i.svelte-16ckfh1{transform:rotate(-45deg);left:-4px}.docs__main-layout__main-container.svelte-fevk9p.svelte-fevk9p{background-color:#eaeaea}.docs__main-layout__header-container.svelte-fevk9p.svelte-fevk9p{display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px;padding:10px;box-sizing:border-box;background-color:#f0e68c}.docs__main-layout__logo.svelte-fevk9p.svelte-fevk9p{height:80%}.docs__main-layout__links-container.svelte-fevk9p.svelte-fevk9p{display:flex;justify-content:center;padding:10px}.docs__main-layout__links-container.svelte-fevk9p>a.svelte-fevk9p{text-decoration:none;color:#009800}.docs__main-layout__links-container.svelte-fevk9p>a.svelte-fevk9p:not(:last-child){margin-right:10px}.docs__main-layout__content-container.svelte-fevk9p.svelte-fevk9p{margin:0 auto}@media screen and (min-width: 0px){.docs__main-layout__content-container.svelte-fevk9p.svelte-fevk9p{width:95%}}@media screen and (min-width: 768px){.docs__main-layout__content-container.svelte-fevk9p.svelte-fevk9p{width:70%}}@media screen and (min-width: 992px){.docs__main-layout__content-container.svelte-fevk9p.svelte-fevk9p{width:60%}}@media screen and (min-width: 1200px){.docs__main-layout__content-container.svelte-fevk9p.svelte-fevk9p{width:50%}}:root{--size:2px .custom-dot__dot-container.svelte-14kkhbi{height:25px;width:25px;background-color:#727272;border-radius:50%;opacity:0.7;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:5px}.custom-dot__dot-container.svelte-14kkhbi:hover{opacity:0.9}.custom-dot__dot-container_active.svelte-14kkhbi{background-color:#009800}.custom-dot__symbol.svelte-14kkhbi{font-size:14px;font-weight:bold;color:#eaeaea}.divider.svelte-1dny3ln{margin-top:30px;margin-bottom:30px;height:1px}.color-container.svelte-1bsdhrs.svelte-1bsdhrs{height:150px;width:100%;display:flex;align-items:center;justify-content:center;user-select:none}.color-container.svelte-1bsdhrs>p.svelte-1bsdhrs{font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;font-style:italic;font-size:18px}.sc-carousel__carousel-container.svelte-14k3cum{display:flex;width:100%;flex-direction:column;align-items:center}.sc-carousel__content-container.svelte-14k3cum{position:relative;display:flex;width:100%}.sc-carousel__pages-window.svelte-14k3cum{flex:1;display:flex;overflow:hidden;box-sizing:border-box}.sc-carousel__pages-container.svelte-14k3cum{width:100%;display:flex;transition-timing-function:ease-in-out;transition-property:transform}.sc-carousel__arrow-container.svelte-14k3cum{padding:5px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.albums-container.svelte-16ckfh1.svelte-16ckfh1{display:flex;justify-content:center;flex-wrap:wrap}.album-container.svelte-16ckfh1.svelte-16ckfh1{width:250px;padding:10px;background-color:#c6c6c6;border-radius:5px;margin:5px}.album-title.svelte-16ckfh1.svelte-16ckfh1{font-size:16px}.album-size.svelte-16ckfh1.svelte-16ckfh1{font-size:10px;color:#585858}.album-tag.svelte-16ckfh1.svelte-16ckfh1{background-color:#8f8f8f;border-radius:5px;padding:1px 5px;color:#ffffff;margin-top:3px;margin-bottom:3px;display:inline-block;font-size:10px}.album-tag.svelte-16ckfh1.svelte-16ckfh1:not(:last-child){margin-right:3px}.album-arrow.svelte-16ckfh1.svelte-16ckfh1{width:20px;background-color:#000000;opacity:0;position:absolute;top:0;bottom:0;z-index:1;transition:opacity 150ms ease;display:flex;align-items:center;justify-content:center;cursor:pointer}.album-arrow.svelte-16ckfh1>i.svelte-16ckfh1{border:solid #1e1e1e;border-width:0 5px 5px 0;padding:5px;position:relative}.album-container.svelte-16ckfh1:hover .album-arrow.svelte-16ckfh1{opacity:0.5}.album-arrow-prev.svelte-16ckfh1.svelte-16ckfh1{left:0}.album-arrow-prev.svelte-16ckfh1>i.svelte-16ckfh1{transform:rotate(135deg);right:-4px}.album-arrow-next.svelte-16ckfh1.svelte-16ckfh1{right:0}.album-arrow-next.svelte-16ckfh1>i.svelte-16ckfh1{transform:rotate(-45deg);left:-4px}.docs__main-layout__main-container.svelte-17evj66.svelte-17evj66{background-color:#eaeaea}.docs__main-layout__header-container.svelte-17evj66.svelte-17evj66{display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px;padding:10px;box-sizing:border-box;background-color:#f0e68c}.docs__main-layout__logo.svelte-17evj66.svelte-17evj66{height:80%;max-width:100%;object-fit:contain}.docs__main-layout__links-container.svelte-17evj66.svelte-17evj66{display:flex;justify-content:center;padding:10px}.docs__main-layout__links-container.svelte-17evj66>a.svelte-17evj66{text-decoration:none;color:#009800;font-size:18px}.docs__main-layout__links-container.svelte-17evj66>a.svelte-17evj66:not(:last-child){margin-right:10px}.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{margin:0 auto}@media screen and (min-width: 0px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:95%}}@media screen and (min-width: 768px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:70%}}@media screen and (min-width: 992px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:60%}}@media screen and (min-width: 1200px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:50%}}:root{--dot-size:10px}.sc-carousel-dots__container.svelte-ru127d{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;padding:0 30px}.sc-carousel-dots__dot-container.svelte-ru127d{height:calc(var(--dot-size) + 10px);width:calc(var(--dot-size) + 10x);display:flex;align-items:center;justify-content:center}:root{--size:2px
}.sc-carousel-arrow__circle.svelte-192r2sk{width:20px;height:20px;border-radius:50%;background-color:rgba(93, 93, 93, 0.5);display:flex;align-items:center;justify-content:center;transition:opacity 100ms ease;cursor:pointer}.sc-carousel-arrow__circle.svelte-192r2sk:hover{opacity:0.9}.sc-carousel-arrow__arrow.svelte-192r2sk{border:solid #1e1e1e;border-width:0 var(--size) var(--size) 0;padding:var(--size);position:relative}.sc-carousel-arrow__arrow-next.svelte-192r2sk{transform:rotate(-45deg);left:calc(var(--size) / -2)}.sc-carousel-arrow__arrow-prev.svelte-192r2sk{transform:rotate(135deg);right:calc(var(--size) / -2)}.sc-carousel-arrow__circle_disabled.svelte-192r2sk,.sc-carousel-arrow__circle_disabled.svelte-192r2sk:hover{opacity:0.5}:root{--dot-size:10px}.sc-carousel-dots__container.svelte-ru127d{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;padding:0 30px}.sc-carousel-dots__dot-container.svelte-ru127d{height:calc(var(--dot-size) + 10px);width:calc(var(--dot-size) + 10x);display:flex;align-items:center;justify-content:center}.image-container.svelte-1cv82er{display:block;width:100%;height:150px}img.svelte-1cv82er{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}.sc-carousel-dot__container.svelte-198k0wd{display:flex;align-items:center;justify-content:center;height:16px;width:16px}.sc-carousel-dot__dot.svelte-198k0wd{background-color:#5d5d5d;border-radius:50%;display:inline-block;opacity:0.5;cursor:pointer;transition:opacity 100ms ease}.sc-carousel-dot__dot.svelte-198k0wd:hover{opacity:0.9}.sc-carousel-dot__dot_active.svelte-198k0wd{opacity:0.7} }.sc-carousel-arrow__circle.svelte-192r2sk{width:20px;height:20px;border-radius:50%;background-color:rgba(93, 93, 93, 0.5);display:flex;align-items:center;justify-content:center;transition:opacity 100ms ease;cursor:pointer}.sc-carousel-arrow__circle.svelte-192r2sk:hover{opacity:0.9}.sc-carousel-arrow__arrow.svelte-192r2sk{border:solid #1e1e1e;border-width:0 var(--size) var(--size) 0;padding:var(--size);position:relative}.sc-carousel-arrow__arrow-next.svelte-192r2sk{transform:rotate(-45deg);left:calc(var(--size) / -2)}.sc-carousel-arrow__arrow-prev.svelte-192r2sk{transform:rotate(135deg);right:calc(var(--size) / -2)}.sc-carousel-arrow__circle_disabled.svelte-192r2sk,.sc-carousel-arrow__circle_disabled.svelte-192r2sk:hover{opacity:0.5}.image-container.svelte-1cv82er{display:block;width:100%;height:150px}img.svelte-1cv82er{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}.sc-carousel-dot__container.svelte-198k0wd{display:flex;align-items:center;justify-content:center;height:16px;width:16px}.sc-carousel-dot__dot.svelte-198k0wd{background-color:#5d5d5d;border-radius:50%;display:inline-block;opacity:0.5;cursor:pointer;transition:opacity 100ms ease}.sc-carousel-dot__dot.svelte-198k0wd:hover{opacity:0.9}.sc-carousel-dot__dot_active.svelte-198k0wd{opacity:0.7}

4
docs/index.js
View File

File diff suppressed because one or more lines are too long

19
src/docs/Carousel.svx
View File

@@ -202,6 +202,8 @@ Import component and styles in App component
``` ```
# Props # Props
<div class="table-wrapper">
| Prop | Type | Default | Description | | Prop | Type | Default | Description |
|----------------------|------------|-------------|-----------------------------------------------| |----------------------|------------|-------------|-----------------------------------------------|
| arrows | boolean | true | Enable Next/Prev arrows | | arrows | boolean | true | Enable Next/Prev arrows |
@@ -213,6 +215,8 @@ Import component and styles in App component
| autoplayDirection | string | 3000 | Auto play change direction (`next` or `prev`) | | autoplayDirection | string | 3000 | Auto play change direction (`next` or `prev`) |
| dots | boolean | true | Current page indicator dots | | dots | boolean | true | Current page indicator dots |
</div>
# Slots # Slots
## `prev` and `next` ## `prev` and `next`
@@ -220,11 +224,15 @@ They are used for customizing prev and next buttons.
Slot props: Slot props:
<div class="table-wrapper">
| Prop | Type | Description | | Prop | Type | Description |
|--------------------|-------------|---------------------------------------| |--------------------|-------------|---------------------------------------|
| `showPrevPage` | `function` | Call it to switch to the previos page | | `showPrevPage` | `function` | Call it to switch to the previos page |
| `showNextPage` | `function` | Call it to switch to the next page | | `showNextPage` | `function` | Call it to switch to the next page |
</div>
```jsx ```jsx
<Carousel <Carousel
let:showPrevPage let:showPrevPage
@@ -245,6 +253,7 @@ Slot props:
This slot is used for customizing dots appearance. This slot is used for customizing dots appearance.
Slot props: Slot props:
<div class="table-wrapper">
| Prop | Type | Description | | Prop | Type | Description |
|---------------------|---------- --|----------------------------------------------| |---------------------|---------- --|----------------------------------------------|
@@ -252,6 +261,8 @@ Slot props:
| `pagesCount` | `number` | Total pages amount | | `pagesCount` | `number` | Total pages amount |
| `showPage` | `function` | Takes index as page to be shown | | `showPage` | `function` | Takes index as page to be shown |
</div>
```jsx ```jsx
<Carousel <Carousel
let:currentPageIndex let:currentPageIndex
@@ -271,10 +282,14 @@ This slot takes content for the carousel.
Slot props: Slot props:
<div class="table-wrapper">
| Prop | Type | Description | | Prop | Type | Description |
|-------------------|------------|----------------------------------------------------------------------| |-------------------|------------|----------------------------------------------------------------------|
| `loaded` | `number[]` | Contains indexes of pages to be loaded. Can be used for lazy loading | | `loaded` | `number[]` | Contains indexes of pages to be loaded. Can be used for lazy loading |
</div>
```jsx ```jsx
<Carousel <Carousel
let:loaded let:loaded
@@ -302,6 +317,10 @@ Slot props:
} }
/* table */ /* table */
.table-wrapper {
max-width: 100%;
overflow-x: auto;
}
table { table {
border-collapse: collapse; border-collapse: collapse;
} }

3
src/docs/Layouts/Main.svelte
View File

@@ -39,6 +39,8 @@
} }
.docs__main-layout__logo { .docs__main-layout__logo {
height: 80%; height: 80%;
max-width: 100%;
object-fit: contain;
} }
.docs__main-layout__links-container { .docs__main-layout__links-container {
display: flex; display: flex;
@@ -48,6 +50,7 @@
.docs__main-layout__links-container > a { .docs__main-layout__links-container > a {
text-decoration: none; text-decoration: none;
color: #009800; color: #009800;
font-size: 18px;
} }
.docs__main-layout__links-container > a:not(:last-child) { .docs__main-layout__links-container > a:not(:last-child) {
margin-right: 10px; margin-right: 10px;