31 lines
904 B
31 lines
904 B
<h1>Basic Tabs</h1>
|
|
|
|
<tabs>
|
|
<a class="active">Tab1</a>
|
|
<a>Tab2</a>
|
|
<a>Tab3</a>
|
|
</tabs>
|
|
|
|
<h1>Interactive Demo</h1>
|
|
<tabs>
|
|
{#each panels as panel, i}
|
|
<a class:active={ panel.active} on:click={ () => activate(i) }>{panel.title}</a>
|
|
{/each}
|
|
</tabs>
|
|
<panels>
|
|
{#each panels as panel, i}
|
|
<panel class:active={panel.active}>
|
|
<h1>{ panel.title }</h1>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
|
|
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
|
|
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
|
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
|
laborum.
|
|
</p>
|
|
</panel>
|
|
{/each}
|
|
</panels>
|
|
|
|
|