43 lines
1.2 KiB
Plaintext
43 lines
1.2 KiB
Plaintext
|
<script>
|
||
|
|
import { View } from "svench";
|
||
|
|
import Button from "../Button/Button.svelte";
|
||
|
|
import Drawer from "./Drawer.svelte";
|
||
|
|
|
||
|
|
let drawer1;
|
||
|
|
let drawer2;
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.drawer {
|
||
|
|
height: 40vh;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<View name="Basic Bottom Drawer">
|
||
|
|
<Button primary on:click={drawer1.show}>Open Drawer</Button>
|
||
|
|
<Drawer
|
||
|
|
bind:this={drawer1}
|
||
|
|
title="A basic Drawer with some text"
|
||
|
|
on:close={() => alert('You closed the drawer!')}>
|
||
|
|
<p slot="body">
|
||
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat,
|
||
|
|
architecto assumenda! Quia harum hic numquam, soluta maiores facere
|
||
|
|
explicabo vero obcaecati voluptas, qui placeat ad, dolorem recusandae
|
||
|
|
labore quos? Nisi!
|
||
|
|
</p>
|
||
|
|
</Drawer>
|
||
|
|
</View>
|
||
|
|
<View name="Basic Bottom Drawer">
|
||
|
|
<Button blue on:click={drawer2.show}>Open Drawer</Button>
|
||
|
|
<Drawer
|
||
|
|
bind:this={drawer2}
|
||
|
|
title={'Actions'}
|
||
|
|
on:close={() => alert('You closed the drawer!')}>
|
||
|
|
<heading slot="buttons">
|
||
|
|
<Button thin blue on:click={drawer2.hide}>Save</Button>
|
||
|
|
</heading>
|
||
|
|
<div slot="description">This describes the drawer!</div>
|
||
|
|
<div class="drawer" slot="body">Some content here</div>
|
||
|
|
</Drawer>
|
||
|
|
</View>
|