44 lines
No EOL
914 B
Svelte
44 lines
No EOL
914 B
Svelte
<script lang="ts" module>
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
import Dropdown from './Dropdown.svelte';
|
|
|
|
const { Story } = defineMeta({
|
|
title: 'Actions/Dropdown',
|
|
component: Dropdown,
|
|
argTypes: {
|
|
hover: {
|
|
control: 'boolean',
|
|
},
|
|
open: {
|
|
control: 'boolean',
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<Story name="Dropdown Menu">
|
|
<Dropdown>
|
|
{#snippet title()}
|
|
Click me!
|
|
{/snippet}
|
|
<ul class={'menu bg-base-200 rounded-box w-56'}>
|
|
<li><a>Item 1</a></li>
|
|
<li><a>Item 2</a></li>
|
|
<li><a>Item 3</a></li>
|
|
</ul>
|
|
</Dropdown>
|
|
</Story>
|
|
|
|
<Story name="Dropdown Card">
|
|
<Dropdown>
|
|
{#snippet title()}
|
|
Click me!
|
|
{/snippet}
|
|
<div class="card card-sm bg-base-100 z-1 w-64 shadow-md">
|
|
<div class="card-body">
|
|
<h2 class="card-title">You needed more info?</h2>
|
|
<p>This is a card. You can use any element as a dropdown.</p>
|
|
</div>
|
|
</div>
|
|
</Dropdown>
|
|
</Story> |