TxPopup · Vue · tecexpress

Dialog with a title and content. Before-events can be cancelled synchronously; external visibility remains authoritative.

Prop	Type	Default	Meaning
`visible`	`boolean \| undefined`	`false`	Controls visibility.
`title`	`string \| undefined`	`Dialog`	View title.
`showCloseButton`	`boolean \| undefined`	`true`	Shows a close action.
`hideOnOutsideClick`	`boolean \| undefined`	`false`	Allows closing by clicking outside.
`width`	`string \| number \| undefined`	`480`	Width; Vue numbers use pixels, Flutter uses logical pixels.
`height`	`string \| number \| undefined`	`undefined`	Height; Vue numbers use pixels, Flutter uses logical pixels.
`fullScreen`	`boolean \| undefined`	`false`	Fills the screen.
`dragEnabled`	`boolean \| undefined`	`false`	Allows dragging the dialog.
`resizeEnabled`	`boolean \| undefined`	`false`	Allows resizing the dialog.
`position`	`string \| undefined`	`center`	Position of the notification or overlay.

Events

Event	Payload / behavior
update:visible	New visible value; accept using v-model:visible (modelValue: v-model).
showing	Before showing: { cancel }; set synchronously to true to cancel.
hiding	Before user-initiated closing: { cancel }; synchronously cancellable.
shown	After showing, without a payload.
hidden	After hiding, without a payload.

Slots

Slot	Arguments
default	()
footer	()

vue

<script setup lang="ts">
import { ref } from 'vue'
import { TxPopup, TxButton } from '@tekocloud.de/tecexpress'
import '@tekocloud.de/tecexpress/themes/index.css'
const visible = ref(false)
</script>

<template>
  <TxButton text="Open" @click="visible = true" />
  <TxPopup v-model:visible="visible" title="Details">Hello</TxPopup>
</template>

TxPopup.