Add styles for storybook

This commit is contained in:
Vadim
2021-06-30 23:34:59 +03:00
parent b67fd52f73
commit 9cf1c645d3
3 changed files with 76 additions and 13 deletions

View File

@@ -17,13 +17,24 @@
let carousel;
// goTo
let pageIndex
function handlePageChange(e) {
pageIndex = e.target.value
pageIndex = Number(e.target.value)
}
function handlePageChangeClick() {
function handleGoToClick() {
carousel.goTo(pageIndex)
}
// goToPrev
function handleGoToPrevClick() {
carousel.goToPrev()
}
// goToNext
function handleGoToNextClick() {
carousel.goToNext()
}
</script>
<div class="main-container">
@@ -39,8 +50,21 @@
</div>
{/each}
</Carousel>
<input type="number" on:change={handlePageChange} />
<button class="button" on:click={handlePageChangeClick}>Go to</button>
<div class="sb-container">
<span class="sb-title">carousel.goTo</span>
<input class="sb-input" type="number" on:change={handlePageChange} />
<button class="sb-button" on:click={handleGoToClick}>Go</button>
<div class="sb-divider"></div>
<span class="sb-title">carousel.goToPrev</span>
<button class="sb-button" on:click={handleGoToPrevClick}>Go</button>
<div class="sb-divider"></div>
<span class="sb-title">carousel.goToNext</span>
<button class="sb-button" on:click={handleGoToNextClick}>Go</button>
<div class="sb-divider"></div>
</div>
</div>
<style>
@@ -61,13 +85,4 @@
font-style: italic;
font-size: 18px;
}
input {
width: 200px;
height: 30px;
}
.button {
width: 200px;
height: 30px;
}
</style>