Update docs

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

View File

@@ -202,6 +202,8 @@ Import component and styles in App component
```
# Props
<div class="table-wrapper">
| Prop | Type | Default | Description |
|----------------------|------------|-------------|-----------------------------------------------|
| 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`) |
| dots | boolean | true | Current page indicator dots |
</div>
# Slots
## `prev` and `next`
@@ -220,11 +224,15 @@ 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
@@ -245,6 +253,7 @@ Slot props:
This slot is used for customizing dots appearance.
Slot props:
<div class="table-wrapper">
| Prop | Type | Description |
|---------------------|---------- --|----------------------------------------------|
@@ -252,6 +261,8 @@ Slot props:
| `pagesCount` | `number` | Total pages amount |
| `showPage` | `function` | Takes index as page to be shown |
</div>
```jsx
<Carousel
let:currentPageIndex
@@ -271,10 +282,14 @@ 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
@@ -302,6 +317,10 @@ Slot props:
}
/* table */
.table-wrapper {
max-width: 100%;
overflow-x: auto;
}
table {
border-collapse: collapse;
}

View File

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