Dialog

The TkDialog component provides a customizable modal dialog for displaying important information or requesting user input. It supports various configurations including different header types, variants, and customizable content.

React

import { TkDialog } from '@takeoff-ui/react'

Vue

import { TkDialog } from '@takeoff-ui/vue'

Angular

import { TkDialog } from '@takeoff-ui/angular'

Basic

The basic usage of TkDialog demonstrates how to create a simple dialog with a header, subheader, and content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

View Code

React

const [showDialog, setShowDialog] = useState(false);

  function handleClick() {
  setShowDialog(true);
}

return (
  <>
    <TkButton label="Open Dialog" onTkClick={handleClick} />
    <TkDialog
      header="Welcome"
      subheader="Basic Dialog Example"
      visible={showDialog}
      onTkVisibleChange={(e) => setShowDialog(e.detail)}
      containerStyle={{ width: "450px" }}
    >
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore
        sed consequuntur error repudiandae numquam deserunt quisquam repellat
        libero asperiores earum nam nobis, culpa ratione quam perferendis
        esse, cupiditate neque quas!
      </p>
    </TkDialog>
  </>
);

Vue

<script setup>
import { TkDialog, TkButton } from '@takeoff-ui/vue';
import { ref } from 'vue';

const showDialog = ref(false);
const handleClick = () => {
  showDialog.value = true;
};
</script>

<template>
  <>
    <TkButton label="Open Dialog" @tk-click="handleClick" />
    <TkDialog
      header="Welcome"
      subheader="Basic Dialog Example"
      :visible.prop="showDialog"
      @tk-visible-change="(e) => {
        showDialog = e.detail;
      }"
      containerStyle="{ width: '450px' }"
    >
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed
        consequuntur error repudiandae numquam deserunt quisquam repellat libero
        asperiores earum nam nobis, culpa ratione quam perferendis esse,
        cupiditate neque quas!
      </p>
    </TkDialog>
  </>
</template>

Angular

Header Types

TkDialog offers various header types to customize the appearance of the dialog's header.

This example demonstrates the different header types available for the TkDialog component.

View Code

React

<TkButton label="Open Dialog" onTkClick={() => setShowDialog(true)} />
<TkDialog
     header="Header Types"
     subheader="This dialog uses the basic header type"
     visible={showDialog}
     onTkVisibleChange={(e) => setShowDialog(e.detail)}
     headerType={"basic"}
     containerStyle={{ width: "450px" }}
>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
        quas!
    </p>
</TkDialog>

Vue

<script setup>
import { TkDialog, TkButton } from '@takeoff-ui/vue';
import { ref } from 'vue';

const showDialog = ref(false);
const headerType = ref('basic');
const setShowDialog = (value) => {
  showDialog.value = value;
};
</script>

<template>
  <>
    <TkButton label="Open Dialog" @tk-click="setShowDialog(true)" />
    <TkDialog
      header="Header Types"
      subheader="This dialog uses the basic header type"
      v-model="showDialog"
      :headerType.prop="headerType"
      :containerStyle="{ width: '450px' }"
    >
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed
        consequuntur error repudiandae numquam deserunt quisquam repellat libero
        asperiores earum nam nobis, culpa ratione quam perferendis esse,
        cupiditate neque quas!
      </p>
    </TkDialog>
  </>
</template>

Angular

Variants

Illustrates the different variants available for TkDialog, which affect the dialog's appearance and icon.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

View Code

React

<TkButton label="Open Dialog" onTkClick={() => setShowDialog(true)} />
<TkDialog
     header="Dialog Variants"
     subheader="This is a info dialog"
     visible={showDialog}
     onTkVisibleChange={(e) => setShowDialog(e.detail)}
     variant={"info"}
     containerStyle={{ width: "450px" }}
>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
        quas!
    </p>
</TkDialog>

Vue

<script setup>
import { TkDialog, TkButton } from '@takeoff-ui/vue';
import { ref } from 'vue';

const showDialog = ref(false);
const setShowDialog = (value) => {
  showDialog.value = true;
};
</script>

<template>
  <>
    <TkButton label="Open Dialog" @tkClick="showDialog = true" />
    <TkDialog header="Dialog Variants" subheader="This is a info dialog" :visible.prop="showDialog" variant="success"
      @tk-visible-change="(e) => {
        showDialog = e.detail;
      }"
      :containerStyle="{ width: '450px' }">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam
        deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
        neque
        quas!
      </p>
    </TkDialog>
  </>
</template>

Angular

Dialog with Footer

Illustrates how to add a footer using the footer-actions slot.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

View Code

React

const [showDialog, setShowDialog] = useState(false);
  
return (
  <>
    <TkButton label="Open Dialog" onTkClick={() => setShowDialog(true)} />
    <TkDialog
      header="Dialog with Footer"
      subheader="This dialog uses the footer-actions slot"
      visible={showDialog}
      onTkVisibleChange={(e) => setShowDialog(e.detail)}
      containerStyle={{ width: "450px" }}
    >
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore
        sed consequuntur error repudiandae numquam deserunt quisquam repellat
        libero asperiores earum nam nobis, culpa ratione quam perferendis
        esse, cupiditate neque quas!
      </p>
      <div slot="footer-actions">
        <TkButton
          label="Cancel"
          variant="neutral"
          onTkClick={() => setShowDialog(false)}
          type="text"
        />
        <TkButton label="Save" variant="primary" />
      </div>
    </TkDialog>
  </>
);

Vue

<script setup>
import { TkDialog, TkButton } from '@takeoff-ui/vue';
import { ref } from 'vue';

const showDialog = ref(false);
const setShowDialog = (value) => {
  showDialog.value = value;
};
</script>

<template>
  <>
    <TkButton label="Open Dialog" @tk-click="setShowDialog(true)" />
    <TkDialog
      header="Dialog with Footer"
      subheader="This dialog uses the footer-actions slot"
      :visible.prop="showDialog"
      @tk-visible-change="(e) => {
        showDialog = e.detail;
      }"
      :containerStyle="{ width: '450px' }"
    >
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed
        consequuntur error repudiandae numquam deserunt quisquam repellat libero
        asperiores earum nam nobis, culpa ratione quam perferendis esse,
        cupiditate neque quas!
      </p>
      <div slot="footer-actions">
        <TkButton
          label="Cancel"
          variant="neutral"
          @tkClick="showDialog = false"
          type="text"
        />
        <TkButton label="Save" variant="primary" @tkClick="saveAction" />
      </div>
    </TkDialog>
  </>
</template>

Angular

Mask Blur

Illustrates how to add a blur effect to the mask of the dialog.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

View Code

React

const [showDialog, setShowDialog] = useState(false);

  function handleClick() {
  setShowDialog(true);
}

return (
  <>
    <TkButton label="Open Dialog" onTkClick={handleClick} />
    <TkDialog
      header="Welcome"
      subheader="Basic Dialog Example"
      visible={showDialog}
      onTkVisibleChange={(e) => setShowDialog(e.detail)}
      containerStyle={{ width: "450px" }}
      isMaskBlur={true}
    >
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore
        sed consequuntur error repudiandae numquam deserunt quisquam repellat
        libero asperiores earum nam nobis, culpa ratione quam perferendis
        esse, cupiditate neque quas!
      </p>
    </TkDialog>
  </>
);

Vue

<script setup>
import { TkDialog, TkButton } from '@takeoff-ui/vue';
import { ref } from 'vue';

const showDialog = ref(false);
const handleClick = () => {
  showDialog.value = !showDialog.value;
};
</script>

<template>
  <div style="margin-bottom: 16px; display: flex; gap: 8px">
    <TkButton label="Open Dialog" @tk-click="handleClick" />
    <TkDialog
      header="Welcome"
      subheader="Basic Dialog Example"
      v-model="showDialog"
      :containerStyle="{ width: '450px' }"
      isMaskBlur={true}
    >
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed
        consequuntur error repudiandae numquam deserunt quisquam repellat libero
        asperiores earum nam nobis, culpa ratione quam perferendis esse,
        cupiditate neque quas!
      </p>
    </TkDialog>
  </div>
</template>

Angular

API

Props

Name	Type	Default	Description
	any	null	The style attribute of container element
	string	null	The header text
	"basic", "dark", "divided", "light", "primary"	'basic'	Header type
	boolean	false	Controls whether the backdrop is shown
	boolean	false	Controls whether the dialog has a blur background
	"base", "dark", "darkest", "light", "lightest"	'base'	Appearance of the mask
	boolean	false	Prevents the dialog from being dismissed by clicking outside
	boolean	true	Controls whether the close button is shown
	boolean	true	Controls whether the header is shown
	boolean	true	Controls whether the variant sign is shown
	string	null	The subheader text
	"danger", "info", "success", "warning"	'info'	The variant of the dialog
	boolean	false	Controls the visibility of the dialog

Events

Name	Description
tk-close	Event emitted when the dialog is closed
tk-open	Event emitted when the dialog is opened
tk-visible-change	Event emitted when the dialog visibility changes

Methods

Name	Description
close	Requests to close the dialog by emitting a tk-close event. Note: This method only emits an event. The dialog will only close if the parent component listens for this event and updates the 'visible' prop to false.
open	Requests to open the dialog by emitting a tk-open event. Note: This method only emits an event. The dialog will only open if the parent component listens for this event and updates the 'visible' prop to true.

Slots

Name	Description
container	Custom container template.
content	Custom content template.
default	Default slot to detect child to inner content.
footer	Custom footer template.
footer-actions	Custom actions template to default footer.
header	Custom header template.