Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sm Modal size

Browse Source
This commit is contained in:
venashial 2022-06-18 17:31:29 -07:00
parent 87a8706299
commit a1932fa3dc
2 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/routes/components/Modal.md
View File

@ -2,12 +2,20 @@
<script lang="ts"> <script lang="ts">
import { Modal, Button } from 'omorphia' import { Modal, Button } from 'omorphia'
import IconArrowRight from 'virtual:icons/heroicons-outline/arrow-right' import IconArrowRight from 'virtual:icons/heroicons-outline/arrow-right'
import IconCheck from 'virtual:icons/heroicons-outline/check'
</script> </script>
<Modal title="Example modal" danger cancelButton let:trigger> <Modal title="Example modal" danger let:trigger>
<Button on:click={trigger} slot="trigger">Open modal</Button> <Button on:click={trigger} slot="trigger">Open modal</Button>
<p>Secret message goes here!</p> <p>Secret message goes here!</p>
<Button color="primary" slot="button"><IconArrowRight /> Continue</Button> <Button color="primary" slot="button"><IconArrowRight /> Continue</Button>
</Modal> </Modal>
<Modal let:trigger size='sm'>
<Button on:click={trigger} slot="trigger">Confirm modal</Button>
Are you sure you want to delete this gallery image?
<Button color="primary" slot="button"><IconCheck /> Confirm</Button>
</Modal>
``` ```

19
src/components/Modal.svelte
View File

@ -7,7 +7,7 @@
export let open = false export let open = false
/** Set the width of the modal */ /** Set the width of the modal */
export let size: 'md' | 'lg' = 'md' export let size: 'sm' | 'md' | 'lg' = 'md'
export let title = '' export let title = ''
@ -39,12 +39,14 @@
<div <div
class={classCombine(['modal', `modal--size-${size}`, 'card'])} class={classCombine(['modal', `modal--size-${size}`, 'card'])}
transition:fly={{ y: 400, duration: 250 }}> transition:fly={{ y: 400, duration: 250 }}>
<div class="modal__top"> {#if title}
<h2 class="title-secondary">{title}</h2> <div class="modal__top">
<Button title="Close" color="transparent" on:click={close}> <h2 class="title-secondary">{title}</h2>
<IconX width={20} /> <Button title="Close" color="transparent" on:click={close}>
</Button> <IconX width={20} />
</div> </Button>
</div>
{/if}
<slot /> <slot />
@ -83,6 +85,9 @@
overflow-y: auto; overflow-y: auto;
&--size { &--size {
&-sm {
max-width: 450px;
}
&-md { &-md {
max-width: 600px; max-width: 600px;
} }