README.md

Popup

Optional built-in implementation of modals

Important

To make popups work, it is essential to wrap your entire application in the Root component

Props

All available props see in Popup.props.ts

i18n

The component natively supports i18n for title and message prop.

You can provide a title and message with a locale tokens, and it will be dynamically translated

Usage

<template>
  <popup v-model="opened" title="Hello!"> How are you? </popup>

  <flat-button @click="onToggle">Open popup</flat-button>
</template>

<script setup lang="ts">
import { Popup } from '@tok/ui/components/Popup';
import { FlatButton } from '@tok/ui/components/FlatButton';
import { ref } from 'vue';

const opened = ref(false);

const onToggle = () => {
  opened.value = !opened.value;
};
</script>