Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <svelte:options customElement="jga-ui-tabs" />
<style>
.box {
margin-bottom: 10px;
padding: 40px;
border: 1px solid #dee2e6;
border-radius: 0 0 0.5rem 0.5rem;
border-top: 0;
}
ul {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
border-bottom: 1px solid #dee2e6;
}
li {
margin-bottom: -1px;
}
span {
border: 1px solid transparent;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
display: block;
padding: 0.5rem 1rem;
cursor: pointer;
}
span:hover {
border-color: #e9ecef #e9ecef #dee2e6;
}
li.active > span {
color: #495057;
background-color: #fff;
border-color: #dee2e6 #dee2e6 #fff;
}
</style>
<script>
import { onMount } from "svelte";
// eslint-disable-next-line import/no-mutable-exports
export let items = [];
// eslint-disable-next-line import/no-mutable-exports
export let activeTabValue = 0;
// eslint-disable-next-line import/no-mutable-exports
export let tabs = [];
const handleClick = (tabValue) => () => {
activeTabValue = tabValue;
};
onMount(() => {
tabs = typeof items === "string" ? JSON.parse(items) : items;
});
</script>
<ul>
{#each tabs as item, index}
<li class="{activeTabValue === index ? 'active' : ''}">
<span on:click="{handleClick(index)}">{item.title}</span>
</li>
{/each}
</ul>
{#each tabs as item, index}
{#if activeTabValue === index}
<div class="box">
{#if item.content}
{item.content}
{:else}
{@html `<slot name="${item.title}"></slot>`}
{/if}
</div>
{/if}
{/each}
|