🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

Dialog Vue 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

componentstring'div'

Component's HTML Element

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

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

componentstring'button'

Component's HTML Element

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.vue
<template>
<k-page>
<k-navbar title="Dialog" />
<k-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>
</k-block>
<k-block strong inset>
<p class="grid grid-cols-2 md:grid-cols-4 gap-4">
<k-button rounded @click="() => (basicOpened = true)">Basic</k-button>
<k-button rounded @click="() => (alertOpened = true)">Alert</k-button>
<k-button rounded @click="() => (confirmOpened = true)"
>Confirm</k-button
>
<k-button rounded @click="() => (listOpened = true)">List</k-button>
</p>
</k-block>
<k-dialog
:opened="basicOpened"
@backdropclick="() => (basicOpened = false)"
>
<template #title>Dialog Title</template>
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.
<template #buttons>
<k-dialog-button @click="() => (basicOpened = false)">
Action 2
</k-dialog-button>
<k-dialog-button @click="() => (basicOpened = false)">
Action 1
</k-dialog-button>
</template>
</k-dialog>
<k-dialog
:opened="alertOpened"
@backdropclick="() => (alertOpened = false)"
>
<template #title>Konsta UI</template>
Hello world!
<template #buttons>
<k-dialog-button @click="() => (alertOpened = false)"
>Ok</k-dialog-button
>
</template>
</k-dialog>
<k-dialog
:opened="confirmOpened"
@backdropclick="() => (confirmOpened = false)"
>
<template #title>Konsta UI</template>
All good today?
<template #buttons>
<k-dialog-button @click="() => (confirmOpened = false)"
>No</k-dialog-button
>
<k-dialog-button strong @click="() => (confirmOpened = false)">
Yes
</k-dialog-button>
</template>
</k-dialog>
<k-dialog :opened="listOpened" @backdropclick="() => (listOpened = false)">
<template #title>Your super hero</template>
<k-list nested class="-mx-4">
<k-list-item label title="Batman">
<template #after>
<k-radio
component="div"
value="batman"
:checked="radioValue === 'batman'"
@change="() => (radioValue = 'batman')"
/>
</template>
</k-list-item>
<k-list-item label title="Spider-man">
<template #after>
<k-radio
component="div"
value="spiderman"
:checked="radioValue === 'spiderman'"
@change="() => (radioValue = 'spiderman')"
/>
</template>
</k-list-item>
<k-list-item label title="Hulk">
<template #after>
<k-radio
component="div"
value="hulk"
:checked="radioValue === 'hulk'"
@change="() => (radioValue = 'hulk')"
/>
</template>
</k-list-item>
</k-list>
<template #buttons>
<k-dialog-button @click="() => (listOpened = false)"
>Confirm</k-dialog-button
>
</template>
</k-dialog>
</k-page>
</template>
<script>
import { ref } from 'vue';
import {
kPage,
kNavbar,
kNavbarBackLink,
kBlock,
kButton,
kDialog,
kDialogButton,
kList,
kListItem,
kRadio,
} from 'konsta/vue';
export default {
components: {
kPage,
kNavbar,
kNavbarBackLink,
kBlock,
kButton,
kDialog,
kDialogButton,
kList,
kListItem,
kRadio,
},
setup() {
const basicOpened = ref(false);
const alertOpened = ref(false);
const confirmOpened = ref(false);
const listOpened = ref(false);
const radioValue = ref('batman');
return {
basicOpened,
alertOpened,
confirmOpened,
listOpened,
radioValue,
};
},
};
</script>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.