TxPopup · Vue · tecexpress

Dialog mit Titel und Inhalt. Vorereignisse können synchron abgebrochen werden; externe Sichtbarkeit bleibt maßgeblich.

Prop	Typ	Standard	Bedeutung
`visible`	`boolean \| undefined`	`false`	Steuert die Sichtbarkeit.
`title`	`string \| undefined`	`Dialog`	Titel der Ansicht.
`showCloseButton`	`boolean \| undefined`	`true`	Zeigt die Schließen-Aktion.
`hideOnOutsideClick`	`boolean \| undefined`	`false`	Erlaubt Schließen über den Außenbereich.
`width`	`string \| number \| undefined`	`480`	Breite; Vue-Zahlen in Pixeln, Flutter in logischen Pixeln.
`height`	`string \| number \| undefined`	`undefined`	Höhe; Vue-Zahlen in Pixeln, Flutter in logischen Pixeln.
`fullScreen`	`boolean \| undefined`	`false`	Füllt den Bildschirm.
`dragEnabled`	`boolean \| undefined`	`false`	Erlaubt das Verschieben des Dialogs.
`resizeEnabled`	`boolean \| undefined`	`false`	Erlaubt Größenänderungen des Dialogs.
`position`	`string \| undefined`	`center`	Position der Meldung beziehungsweise des Overlays.

Ereignisse

Event	Payload / Verhalten
update:visible	Neuer Wert von visible; über v-model:visible übernehmen (modelValue: v-model).
showing	Vor Anzeige: { cancel }; synchron auf true setzen, um abzubrechen.
hiding	Vor benutzerinitiiertem Schließen: { cancel }; synchron abbrechbar.
shown	Nach Anzeige, ohne Payload.
hidden	Nach Verbergen, ohne Payload.

Slots

Slot	Argumente
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.