Gitart Vue Dialog

Appearance

Return to top
On this page

GDialog 

import { GDialog } from 'gitart-vue-dialog'

The component uses the Vue 3 teleport to move the component html to <body>.

z-index of the component is 200. So be careful. Don't make z-index of the header or other element like this:
z-index: 9999

Props

NameTypeDefault
backgroundboolean stringtrue
border-radiusboolean number stringtrue
close-on-backbooleanfalse
content-classstring''
depressedbooleanfalse
fullscreenbooleanfalse
heightstring number'auto'
localbooleanfalse
max-widthstring number'none'
model-valuebooleanfalse
no-click-animationboolean'false'
overlay-backgroundboolean stringtrue
persistentbooleanfalse
scrollablebooleanfalse
transitionstringg-dialog-transition
widthstring number'auto'

background

  • Type: Boolean | String

  • Default: true

  • Details:
    Sets background to the dialog content

    • true - remains default background,
    • false - removes background
    • String - sets some background to the current dialog content

    You can set default value for all dialogs by CSS var --g-dialog-content-bg

border-radius

  • Type: Boolean | Number | String

  • Default: true

  • Details:
    Sets border-radius to the dialog content

    • true - remains default border-radius,
    • false - removes border-radius
    • String - sets some border-radius to the current dialog content

    You can set default value for all dialogs by CSS var --g-dialog-content-border-radius

close-on-back

  • Type: Boolean

  • Default: false

  • Details:
    Allows to close the dialog by navigating back. It's adding hash to the url when the dialog is open.

content-class

  • Type: String

  • Default: ''

  • Details:
    Applies the class to the content (div that wraps the main slot)

depressed

  • Type: Boolean

  • Default: false

  • Details:
    Disables default box-shadow

fullscreen

  • Type: Boolean

  • Default: false

  • Details:
    Enables a fullscreen mode for the dialog.

    Example.

height

  • Type: String | Number

  • Default: 'auto'

  • Details:
    Sets height for the dialog

local

  • Type: Boolean

  • Default: false

  • Details:
    Enables the local mode. The dialog will not be teleported to the body and will be positioned like absolute instead of fixed. Be sure to specify position: relative; for the parent element where you place the dialog.

    The props can be useful if you want to show some windows above a specific part of your app.

    Example.

    v1.2.0+

max-width

  • Type: String | Number

  • Default: 'none'

  • Details:
    Sets max-width for the dialog

model-value

  • Type: Boolean

  • Default: false

  • Details:
    v-model props to activate and deactivate the dialog

no-click-animation

  • Type: Boolean

  • Default: false

  • Details:
    Disables the bounce effect when clicking outside of a dialog's content when using the persistent prop.

v2.0.0+

overlay-background

  • Type: Boolean | String

  • Default: true

  • Details:
    Sets dialog overlay background.

    • true - remains default background,
    • false - removes background
    • String - sets some background to the current dialog overlay

    You can set default value for all dialogs by CSS var --g-dialog-overlay-bg

persistent

  • Type: Boolean

  • Default: false

  • Details:
    Makes clicking outside of the element will not deactivate the dialog. Example.

scrollable

  • Type: Boolean

  • Default: false

  • Details:
    Applies the display: flex; to the dialog content wrapper element. It allows you to implement scrollable content to a specific part of a dialog. Here is an example of use.

transition

  • Type: String

  • Default: 'g-dialog-transition'

  • Details:
    Sets the component custom transition name (leaving and entering the dialog).

    Example.

    // transition="custom-rotate-transition"
.custom-rotate-transition {
  &-enter-active,
  &-leave-active {
    transition-timing-function: linear;
    transition-duration: 0.1s;
  }

  &-enter-from {
    transform: translate(0, 30px) rotate(12deg);
    opacity: 0;
  }

  &-leave-to {
    transform: translate(0, 30px) rotate(4deg);
    opacity: 0;
  }
}

    WARNING

    On leaving, transition-duration should not be higher than plugin closeDelay option (500ms by default) if you are using plugin method addDialog.

    removeDialog disables a dialog and deletes it after closeDelayms completely, so the custom transition may be truncated

width

  • Type: String | Number

  • Default: 'auto'

  • Details:
    Sets width for the dialog

Slots

NameDescription
defaultThe default Vue slot
activatorWhen used, will activate the component when clicked

default

  • Scoped Data:

    {
  onClose: () => {}
}

  • Details:

    The prop is for your content.

    onClose scoped data could help close a dialog.

    <GDialog>
  <template #default="{ onClose }">
    <p>Content</p>
  
    <button @click="onClose">
      close
    </button>
  </template>
</GDialog>

activator

  • Scoped Data:

    {
  onClick: () => {}
}

  • Details:

    The slot helps activate the component when clicked on inside element. Bind scoped data to the button.

    <GDialog>
  <template #activator="attrs">
    <button v-bind="attrs">
      open
    </button>
  </template>

  Content
</GDialog>

    Or you can call onClick manually with another event.

    <GDialog>
  <template #activator="{ onClick }">
    <button @mouseenter="onClick">
      open
    </button>
  </template>

  Content
</GDialog>

Events

NamePayloadDescription
update:modelValuebooleanruns with false after clicking outside

CSS Vars Customization

The packages provide global style customization by CSS variables. Below you can see all possible variables. Just put them in your global CSS file. Like this:

:root {
  --g-dialog-content-bg: #eff1f3;
  --g-dialog-content-border-radius: 8px;
}

List of possible variables:

transition-duration

  • Name: --g-dialog-transition-duration

  • Default: 0.2s

  • Details:
    Sets default transition-duration for entering and exiting the dialog.

  • Usage:

    --g-dialog-transition-duration: 0.4s;

    v2.2.0+

content-bg

  • Name: --g-dialog-content-bg

  • Default: #fff

  • Details:
    Sets default background for the dialog content

  • Usage:

    --g-dialog-content-bg: #282c34;

content-border-radius

  • Name: --g-dialog-content-border-radius

  • Default: 4px

  • Details:
    Sets default border-radius for the dialog content

  • Usage:

    --g-dialog-content-border-radius: 0;

content-shadow

  • Name: --g-dialog-content-shadow

  • Default:
    0 11px 15px -7px rgb(0 0 0 / 20%),
    0 24px 38px 3px rgb(0 0 0 / 14%),
    0 9px 46px 8px rgb(0 0 0 / 12%)

  • Details:
    Sets default box-shadow for the dialog content

  • Usage:

    --g-dialog-content-shadow: 0 11px 15px -7px rgb(0 0 0 / 20%);

overlay-bg

  • Name: --g-dialog-overlay-bg

  • Default: rgba(33, 33, 33, 0.46)

  • Details:
    Sets default background for the dialog overlay

  • Usage:

    --g-dialog-overlay-bg: rgba(143, 108, 249, 0.4);