Dialog (Native)

A popup component encapsulated based on the HTML5 native <dialog> element. It retains the visual style of TechUI while utilizing native browser features to implement modal layer management.

Basic Usage

Use v-model to control the display state.

<script setup>
import { ref } from 'vue'

const visible = ref(false)
</script>

<template>
  <TuiButton @click="visible = true">Open Native Dialog</TuiButton>

  <TuiDialogNative 
    v-model="visible" 
    title="Native Title"
  >
    <div class="dialog-content">
      This is a component based on the native &lt;dialog&gt; element.
    </div>
  </TuiDialogNative>
</template>

Visual Style

Similar to the standard TuiDialog component, TuiDialogNative integrates the TuiTyped system. You can easily define semantic tones or advanced visual effects such as frosted glass.

Semantic Tones

Commonly used semantic tones such as primary, success, warning, and danger are supported.

<script setup>
import { reactive } from 'vue'

const state = reactive({
  primary: false,
  danger: false
})
</script>

<template>
  <TuiButton type="primary" @click="state.primary = true">Primary</TuiButton>
  <TuiButton type="danger" @click="state.danger = true">Danger</TuiButton>

  <TuiDialogNative v-model="state.primary" title="Primary" type="primary">
    Primary tone content
  </TuiDialogNative>

  <TuiDialogNative v-model="state.danger" title="Danger" type="danger">
    Danger tone content
  </TuiDialogNative>
</template>

Advanced Configuration (TypedConfig)

Enable semi-transparency or adjust tone intensity via typedConfig.

<script setup>
import { ref } from 'vue'

const visible = ref(false)
const glassConfig = {
  transparent: true,     // Enable semi-transparency
  backgroundBlur: true,  // Enable background blur
  tone: 'weak'           // Weak tone
}
</script>

<template>
  <TuiButton @click="visible = true">Open Glass Style</TuiButton>

  <TuiDialogNative
    v-model="visible"
    title="Glass Style"
    type="success"
    :typedConfig="glassConfig"
  >
    Frosted glass effect implemented using native Dialog.
  </TuiDialogNative>
</template>

Size and Layout

The native component also supports flexible size definitions using units like px, vw, and vh.

• width: Defines the width (e.g., 40vw, 500).
• top: Defines the offset from the top (e.g., 30vh, -200).
• fullscreen: Enables full-screen mode.

<script setup>
import { reactive } from 'vue'

const state = reactive({
  custom: false,
  full: false
})
</script>

<template>
  <TuiButton @click="state.custom = true">Custom Width/Height</TuiButton>
  <TuiButton @click="state.full = true">Full Screen</TuiButton>

  <TuiDialogNative 
    v-model="state.custom" 
    title="Custom Layout" 
    width="40vw"
    top="30vh"
  >
    Width 40vw, 30vh from the top.
  </TuiDialogNative>

  <TuiDialogNative v-model="state.full" title="Full Screen" fullscreen>
    Full screen content
  </TuiDialogNative>
</template>

Nested Dialogs

Opening a native Dialog nested within another native Dialog is supported; the component automatically manages the stacking levels.

<script setup>
import { reactive } from 'vue'

const state = reactive({
  layer1: false,
  layer2: false
})
</script>

<template>
  <TuiButton @click="state.layer1 = true">Open Layer 1</TuiButton>

  <TuiDialogNative v-model="state.layer1" title="Layer 1" width="500">
    <p>Layer 1 content...</p>
    <TuiButton @click="state.layer2 = true">Open Layer 2</TuiButton>
  </TuiDialogNative>

  <TuiDialogNative v-model="state.layer2" title="Layer 2" width="300">
    <p>Layer 2 content, stacked on top.</p>
  </TuiDialogNative>
</template>

API Reference

Props

Property	Description	Type	Default Value
modelValue	(v-model) Whether to show the Dialog	Boolean	false
title	Title text	String	''
width	Popup width, e.g., 500(px) or '40vw'	String / Number	null
top	Top offset, e.g., 200(px) or '30vh'	String / Number	null
fullscreen	Whether to show in full screen	Boolean	false
modal	Whether to enable modal mode (show backdrop)	Boolean	true
center	Whether to center content	Boolean	false
type	Semantic type, options: `'default'	'primary'	'success'
typedConfig	TuiTyped configuration object (transparent, tone, backgroundBlur)	Object	—
customColor	Custom color	String / Array	—
showClose	Whether to show the close icon	Boolean	true
closeIcon	Custom close icon Class	String	'tui-icon ti-times'
divider	Whether to show title divider line	Boolean	false
closeOnBackdrop	Whether to close when clicking background backdrop	Boolean	true
closeOnEsc	Whether to close when pressing the ESC key	Boolean	true
overflow	Whether to allow content overflow	Boolean	false
customClass	Custom class name	String	''

Emits

Event Name	Description	Callback Parameters
update:modelValue	Triggered when bound value changes	value: boolean
open	Triggered when opening	—
opened	Triggered when open animation ends	—
close	Triggered when closing	—
closed	Triggered when close animation ends	—
confirm	Triggered when clicking confirm button (use with Footer)	—

Expose

The component exposes the following properties and methods via ref, which can be used to directly manipulate the DOM.

Name	Description	Type
open	Manual open method	() => void
close	Manual close method	() => void
dialogRef	DOM reference to the native <dialog> element	HTMLDialogElement
baseDialogRef	Reference to the internal wrapper container	HTMLElement

Hierarchy Management

In complex scenarios where multiple popups are nested or co-exist, TuiDialog relies on TechUI's global services (TuiService) to implement intelligent stack management:

• ESC Response (escCounter): The component monitors the global ESC signal in real-time. When closeOnEsc is true, the component responds to this signal.
• Intelligent Stacking Determination (Stack Management): The global service maintains a stack of currently active popups. When ESC is triggered, the component communicates with the global service to ensure that only the Dialog instance at the top layer (i.e., the one opened last or with the highest z-index) is closed. This mechanism prevents "accidental closing" in nested scenarios and ensures safe, clear interaction logic.