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

#38 : Customize table, update docs

Browse Source
This commit is contained in:
Vadim
2021-07-07 23:19:26 +03:00
parent b07caa9bac
commit da14c0ef6f
8 changed files with 64 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/docs/Carousel.svx
View File

@@ -208,8 +208,6 @@ Import component
# Props
<div class="table-wrapper">
| Prop | Type | Default | Description |
|----------------------|------------|-----------------|-----------------------------------------------|
| `arrows` | `boolean` | `true` | Enable Next/Prev arrows |
@@ -223,8 +221,6 @@ Import component
| `pauseOnFocus` | `boolean` | `false` | Pause autoplay on focus |
| `timingFunction` | `string` | `'ease-in-out'` | CSS animation timing function |
</div>
<Divider />
# Events
@@ -232,14 +228,10 @@ Import component
## `pageChange`
Is dispatched on page change
<div class="table-wrapper">
| Payload field | Type | Description |
|--------------------|-------------|---------------------------------------|
| `event.detail` | `number` | Current page index |
</div>
```jsx
<Carousel
on:pageChange={
@@ -259,15 +251,11 @@ They are used for customizing prev and next buttons.
Slot props:
<div class="table-wrapper">
| Prop | Type | Description |
|--------------------|-------------|---------------------------------------|
| `showPrevPage` | `function` | Call it to switch to the previos page |
| `showNextPage` | `function` | Call it to switch to the next page |
</div>
```jsx
<Carousel
let:showPrevPage
@@ -288,7 +276,6 @@ Slot props:
This slot is used for customizing dots appearance.
Slot props:
<div class="table-wrapper">
| Prop | Type | Description |
|---------------------|---------- --|----------------------------------------------|
@@ -296,8 +283,6 @@ Slot props:
| `pagesCount` | `number` | Total pages amount |
| `showPage` | `function` | Takes index as page to be shown |
</div>
```jsx
<Carousel
let:currentPageIndex
@@ -317,14 +302,10 @@ This slot takes content for the carousel.
Slot props:
<div class="table-wrapper">
| Prop | Type | Description |
|-------------------|------------|----------------------------------------------------------------------|
| `loaded` | `number[]` | Contains indexes of pages to be loaded. Can be used for lazy loading |
</div>
```jsx
<Carousel
let:loaded
@@ -345,15 +326,11 @@ Navigates to a page by index
Arguments:
<div class="table-wrapper">
| Argument | Type | Default | Description |
|--------------------|-------------|---------|---------------------------------------|
| `pageIndex` | `number` | | Page number |
| `options.animated` | `boolean` | `true` | Should it be animated or not |
</div>
```jsx
<script>
// ...
@@ -376,14 +353,10 @@ Navigates to the previous page
Arguments:
<div class="table-wrapper">
| Argument | Type | Default | Description |
|--------------------|-------------|---------|---------------------------------------|
| `options.animated` | `boolean` | `true` | Should it be animated or not |
</div>
```jsx
<script>
// ...
@@ -406,14 +379,10 @@ Navigates to the next page
Arguments:
<div class="table-wrapper">
| Argument | Type | Default | Description |
|--------------------|-------------|---------|---------------------------------------|
| `options.animated` | `boolean` | `true` | Should it be animated or not |
</div>
```jsx
<script>
// ...
@@ -446,24 +415,6 @@ Arguments:
-webkit-user-drag: none;
}
/* table */
.table-wrapper {
max-width: 100%;
overflow-x: auto;
}
table {
border-collapse: collapse;
}
tr {
border-bottom: 2px solid #009800;
}
td {
padding: 2px 10px;
}
th {
padding: 5px 10px;
}
/* custom arrows */
.custom-arrow {
width: 20px;