#38 : Customize table, update docs
This commit is contained in:
Vadim
@@ -1,13 +1,17 @@
|
||||
html,body{position:relative;width:100%;height:100%;margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;}
|
||||
code[class*="language-"],pre[class*="language-"] {color:#ccc;background:none;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}pre[class*="language-"] {padding:1em;margin:.5em 0;overflow:auto;}:not(pre) > code[class*="language-"],pre[class*="language-"] {background:#2d2d2d;}:not(pre) > code[class*="language-"] {padding:.1em;border-radius:.3em;white-space:normal;}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata {color:#999;}.token.punctuation {color:#ccc;}.token.tag,.token.attr-name,.token.namespace,.token.deleted {color:#e2777a;}.token.function-name {color:#6196cc;}.token.boolean,.token.number,.token.function {color:#f08d49;}.token.property,.token.class-name,.token.constant,.token.symbol {color:#f8c555;}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin {color:#cc99cd;}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable {color:#7ec699;}.token.operator,.token.entity,.token.url {color:#67cdcc;}.token.important,.token.bold {font-weight:bold;}.token.italic {font-style:italic;}.token.entity {cursor:help;}.token.inserted {color:green;}
|
||||
.img-container.svelte-14lrqxf.svelte-14lrqxf{display:block;width:100%;height:200px}.img-container.svelte-14lrqxf>img.svelte-14lrqxf{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}.table-wrapper.svelte-14lrqxf.svelte-14lrqxf{max-width:100%;overflow-x:auto}table.svelte-14lrqxf.svelte-14lrqxf{border-collapse:collapse}tr.svelte-14lrqxf.svelte-14lrqxf{border-bottom:2px solid #009800}td.svelte-14lrqxf.svelte-14lrqxf{padding:2px 10px}th.svelte-14lrqxf.svelte-14lrqxf{padding:5px 10px}.custom-arrow.svelte-14lrqxf.svelte-14lrqxf{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;-webkit-tap-highlight-color:transparent}.custom-arrow.svelte-14lrqxf.svelte-14lrqxf:hover{opacity:0.5}.custom-arrow.svelte-14lrqxf>i.svelte-14lrqxf{border:solid #1e1e1e;border-width:0 5px 5px 0;padding:5px;position:relative}.custom-arrow-prev.svelte-14lrqxf.svelte-14lrqxf{left:0}.custom-arrow-prev.svelte-14lrqxf>i.svelte-14lrqxf{transform:rotate(135deg);right:-4px}.custom-arrow-next.svelte-14lrqxf.svelte-14lrqxf{right:0}.custom-arrow-next.svelte-14lrqxf>i.svelte-14lrqxf{transform:rotate(-45deg);left:-4px}.custom-dots.svelte-14lrqxf.svelte-14lrqxf{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;padding:0 20px}
|
||||
.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}
|
||||
.img-container.svelte-4bw00n.svelte-4bw00n{display:block;width:100%;height:200px}.img-container.svelte-4bw00n>img.svelte-4bw00n{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}.custom-arrow.svelte-4bw00n.svelte-4bw00n{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;-webkit-tap-highlight-color:transparent}.custom-arrow.svelte-4bw00n.svelte-4bw00n:hover{opacity:0.5}.custom-arrow.svelte-4bw00n>i.svelte-4bw00n{border:solid #1e1e1e;border-width:0 5px 5px 0;padding:5px;position:relative}.custom-arrow-prev.svelte-4bw00n.svelte-4bw00n{left:0}.custom-arrow-prev.svelte-4bw00n>i.svelte-4bw00n{transform:rotate(135deg);right:-4px}.custom-arrow-next.svelte-4bw00n.svelte-4bw00n{right:0}.custom-arrow-next.svelte-4bw00n>i.svelte-4bw00n{transform:rotate(-45deg);left:-4px}.custom-dots.svelte-4bw00n.svelte-4bw00n{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;padding:0 20px}
|
||||
.custom-dot__dot-container.svelte-1ufq367{height:25px;width:25px;background-color:#727272;border-radius:50%;opacity:0.7;display:flex;align-items:center;justify-content:center;margin:5px;cursor:pointer;-webkit-tap-highlight-color:transparent}.custom-dot__dot-container.svelte-1ufq367:hover{opacity:0.9}.custom-dot__dot-container_active.svelte-1ufq367{background-color:#009800}.custom-dot__symbol.svelte-1ufq367{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-1pac7rj{display:flex;width:100%;flex-direction:column;align-items:center}.sc-carousel__content-container.svelte-1pac7rj{position:relative;display:flex;width:100%}.sc-carousel__pages-window.svelte-1pac7rj{flex:1;display:flex;overflow:hidden;box-sizing:border-box}.sc-carousel__pages-container.svelte-1pac7rj{width:100%;display:flex;transition-property:transform}.sc-carousel__arrow-container.svelte-1pac7rj{padding:5px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}
|
||||
.albums-container.svelte-tqqkfc.svelte-tqqkfc{display:flex;justify-content:center;flex-wrap:wrap}.album-container.svelte-tqqkfc.svelte-tqqkfc{width:250px;padding:10px;background-color:#c6c6c6;border-radius:5px;margin:5px}.album-title.svelte-tqqkfc.svelte-tqqkfc{font-size:16px}.album-size.svelte-tqqkfc.svelte-tqqkfc{font-size:10px;color:#585858}.album-tag.svelte-tqqkfc.svelte-tqqkfc{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-tqqkfc.svelte-tqqkfc:not(:last-child){margin-right:3px}.album-arrow.svelte-tqqkfc.svelte-tqqkfc{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;-webkit-tap-highlight-color:transparent}.album-arrow.svelte-tqqkfc>i.svelte-tqqkfc{border:solid #1e1e1e;border-width:0 5px 5px 0;padding:5px;position:relative}.album-container.svelte-tqqkfc:hover .album-arrow.svelte-tqqkfc{opacity:0.5}.album-arrow-prev.svelte-tqqkfc.svelte-tqqkfc{left:0}.album-arrow-prev.svelte-tqqkfc>i.svelte-tqqkfc{transform:rotate(135deg);right:-4px}.album-arrow-next.svelte-tqqkfc.svelte-tqqkfc{right:0}.album-arrow-next.svelte-tqqkfc>i.svelte-tqqkfc{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-tycflj{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;-webkit-tap-highlight-color:transparent}.sc-carousel-arrow__circle.svelte-tycflj:hover{opacity:0.9}.sc-carousel-arrow__arrow.svelte-tycflj{border:solid #1e1e1e;border-width:0 var(--size) var(--size) 0;padding:var(--size);position:relative}.sc-carousel-arrow__arrow-next.svelte-tycflj{transform:rotate(-45deg);left:calc(var(--size) / -2)}.sc-carousel-arrow__arrow-prev.svelte-tycflj{transform:rotate(135deg);right:calc(var(--size) / -2)}.sc-carousel-arrow__circle_disabled.svelte-tycflj,.sc-carousel-arrow__circle_disabled.svelte-tycflj: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}
|
||||
tr.svelte-yxhgu7{border-bottom:2px solid #009800}
|
||||
td.svelte-17sscyq{padding:2px 10px}
|
||||
th.svelte-1w3aa8v{padding:5px 10px}
|
||||
.table-wrapper.svelte-1kq2472{max-width:100%;overflow-x:auto}table.svelte-1kq2472{border-collapse:collapse}
|
||||
.sc-carousel-dot__container.svelte-18q6rl6{display:flex;align-items:center;justify-content:center;height:16px;width:16px}.sc-carousel-dot__dot.svelte-18q6rl6{background-color:#5d5d5d;border-radius:50%;display:inline-block;opacity:0.5;transition:opacity 100ms ease;cursor:pointer;-webkit-tap-highlight-color:transparent}.sc-carousel-dot__dot.svelte-18q6rl6:hover{opacity:0.9}.sc-carousel-dot__dot_active.svelte-18q6rl6{opacity:0.7}
|
||||
File diff suppressed because one or more lines are too long
@@ -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;
|
||||
|
||||
@@ -1,3 +1,16 @@
|
||||
<script context="module">
|
||||
import Table from './custom/Table.svelte';
|
||||
import Th from './custom/Th.svelte';
|
||||
import Tr from './custom/Tr.svelte';
|
||||
import Td from './custom/Td.svelte';
|
||||
export {
|
||||
Table as table,
|
||||
Th as th,
|
||||
Tr as tr,
|
||||
Td as td
|
||||
};
|
||||
</script>
|
||||
|
||||
<script>
|
||||
const links = [{
|
||||
title: 'github',
|
||||
|
||||
15
src/docs/Layouts/custom/Table.svelte
Normal file
15
src/docs/Layouts/custom/Table.svelte
Normal file
@@ -0,0 +1,15 @@
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<slot></slot>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.table-wrapper {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
</style>
|
||||
9
src/docs/Layouts/custom/Td.svelte
Normal file
9
src/docs/Layouts/custom/Td.svelte
Normal file
@@ -0,0 +1,9 @@
|
||||
<td>
|
||||
<slot></slot>
|
||||
</td>
|
||||
|
||||
<style>
|
||||
td {
|
||||
padding: 2px 10px;
|
||||
}
|
||||
</style>
|
||||
9
src/docs/Layouts/custom/Th.svelte
Normal file
9
src/docs/Layouts/custom/Th.svelte
Normal file
@@ -0,0 +1,9 @@
|
||||
<th>
|
||||
<slot></slot>
|
||||
</th>
|
||||
|
||||
<style>
|
||||
th {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
</style>
|
||||
9
src/docs/Layouts/custom/Tr.svelte
Normal file
9
src/docs/Layouts/custom/Tr.svelte
Normal file
@@ -0,0 +1,9 @@
|
||||
<tr>
|
||||
<slot></slot>
|
||||
</tr>
|
||||
|
||||
<style>
|
||||
tr {
|
||||
border-bottom: 2px solid #009800;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user