Dialog Svelte Component

Dialog is a type of modal window that appears in front of app content to provide critical information, or prompt for a decision to be made.

Dialog Components

There are following components included:

  • Dialog - dialog element
  • DialogButton - dialog button element

Dialog Props

NameTypeDefaultDescription
backdropbooleantrue

Enables Popup backdrop (dark semi transparent layer behind)

buttonsstring

Dialog buttons content

colorsobject

Object with Tailwind CSS colors classes

colors.bgIosstring'bg-white dark:bg-neutral-800'

Dialog bg color in iOS theme

colors.bgMaterialstring'bg-md-light-surface-3 dark:bg-md-dark-surface-3'

Dialog bg color in iOS theme

colors.contentTextIosstring''

Content text color in iOS theme

colors.contentTextMaterialstring'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'

Content text color in Material theme

colors.titleIosstring''

Title text color in iOS theme

colors.titleMaterialstring'text-md-light-on-surface dark:text-md-dark-on-surface'

Title text color in Material theme

contentstring

Dialog main content

openedbooleanfalse

Allows to open/close Popup and set its initial state

sizeIosstring'w-[16.875rem]'

Tailwind CSS size classes for iOS theme

sizeMaterialstring'w-[19.5rem]'

Tailwind CSS size classes for Material theme

titlestring

Dialog title content

titleFontSizeIosstring'text-[18px]'

Tailwind CSS classes for title font size iOS theme

titleFontSizeMaterialstring'text-[24px]'

Tailwind CSS classes for title font size Material theme

translucentbooleantrue

Makes Dialog background translucent (with backdrop-filter: blur) in iOS theme

onBackdropClickfunction(e)

Click handler on backdrop element

DialogButton Props

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.activeBgIosstring'active:bg-black active:bg-opacity-10 dark:active:bg-white dark:active:bg-opacity-10'

Active/pressed state bg color in iOS theme

colors.disabledTextIosstring'text-black text-opacity-30 dark:text-white dark:text-opacity-30'

Disabled button text color in iOS theme

colors.textIosstring''text-primary

Text color in iOS theme

disabledbooleanfalse

Makes button disabled

strongbooleanfalse

Makes button bold in iOS theme and fill in Material theme, overwrites strongIos and strongMaterial

strongIosbooleanfalse

Makes button bold in iOS theme

strongMaterialbooleanfalse

Makes button fill in Material theme

Dialog Slots

NameDescription
buttons

Dialog buttons content

content

Dialog main content

title

Dialog title content

Examples

Dialog.svelte
<script>
import {
Page,
Navbar,
NavbarBackLink,
Block,
Button,
Dialog,
DialogButton,
List,
ListItem,
Radio,
} from 'konsta/svelte';
let basicOpened = false;
let alertOpened = false;
let confirmOpened = false;
let listOpened = false;
let radioValue = 'batman';
</script>
<Page>
<Navbar title="Dialog" />
<Block strong inset class="space-y-4">
<p>
Dialog is a type of modal window that appears in front of app content to
provide critical information, or prompt for a decision to be made.
</p>
</Block>
<Block strong inset>
<p class="grid grid-cols-2 md:grid-cols-4 gap-4">
<Button rounded onClick={() => (basicOpened = true)}>Basic</Button>
<Button rounded onClick={() => (alertOpened = true)}>Alert</Button>
<Button rounded onClick={() => (confirmOpened = true)}>Confirm</Button>
<Button rounded onClick={() => (listOpened = true)}>List</Button>
</p>
</Block>
<Dialog opened={basicOpened} onBackdropClick={() => (basicOpened = false)}>
<svelte:fragment slot="title">Dialog Title</svelte:fragment>
Dialog is a type of modal window that appears in front of app content to provide
critical information, or prompt for a decision to be made.
<svelte:fragment slot="buttons">
<DialogButton onClick={() => (basicOpened = false)}>
Action 2
</DialogButton>
<DialogButton onClick={() => (basicOpened = false)}>
Action 1
</DialogButton>
</svelte:fragment>
</Dialog>
<Dialog opened={alertOpened} onBackdropClick={() => (alertOpened = false)}>
<svelte:fragment slot="title">Konsta UI</svelte:fragment>
Hello world!
<svelte:fragment slot="buttons">
<DialogButton onClick={() => (alertOpened = false)}>Ok</DialogButton>
</svelte:fragment>
</Dialog>
<Dialog
opened={confirmOpened}
onBackdropClick={() => (confirmOpened = false)}
>
<svelte:fragment slot="title">Konsta UI</svelte:fragment>
All good today?
<svelte:fragment slot="buttons">
<DialogButton onClick={() => (confirmOpened = false)}>No</DialogButton>
<DialogButton strong onClick={() => (confirmOpened = false)}>
Yes
</DialogButton>
</svelte:fragment>
</Dialog>
<Dialog opened={listOpened} onBackdropClick={() => (listOpened = false)}>
<svelte:fragment slot="title">Your super hero</svelte:fragment>
<List nested class="-mx-4">
<ListItem label title="Batman">
<svelte:fragment slot="after">
<Radio
component="div"
value="batman"
checked={radioValue === 'batman'}
onChange={() => (radioValue = 'batman')}
/>
</svelte:fragment>
</ListItem>
<ListItem label title="Spider-man">
<svelte:fragment slot="after">
<Radio
component="div"
value="spiderman"
checked={radioValue === 'spiderman'}
onChange={() => (radioValue = 'spiderman')}
/>
</svelte:fragment>
</ListItem>
<ListItem label title="Hulk">
<svelte:fragment slot="after">
<Radio
component="div"
value="hulk"
checked={radioValue === 'hulk'}
onChange={() => (radioValue = 'hulk')}
/>
</svelte:fragment>
</ListItem>
</List>
<svelte:fragment slot="buttons">
<DialogButton onClick={() => (listOpened = false)}>Confirm</DialogButton>
</svelte:fragment>
</Dialog>
</Page>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.