Tailwind CSS Dialog - Taco Svelte

A dialog is a type of modal window with critical information which disable all app functionality when they appear and remains on the screen until confirmed/dismissed. Below we are presenting dynamic examples of the Dialog component that you can use in your project based on Taco. 

<DialogContainer
size="md"
open="false"
>
<DialogHeader>
  Its a simple dialog.
</DialogHeader>
<DialogBody divider>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus ad
    reprehenderit omnis perspiciatis aut odit! Unde architecto perspiciatis,
    dolorum dolorem iure quia saepe autem accusamus eum praesentium magni
    corrupti explicabo!
</DialogBody>
<DialogFooter>
  <Button size="md" variant="text" color="red" class="mr-1">
    Cancel
  </Button>
  <Button size="md" variant="gradient" color="blue">
    Confirm
  </Button>
</DialogFooter>
</DialogContainer>

Dialog Sizes

The Dialog component comes with 6 different sizes that you can change it using the size prop. 

<DialogContainer
size="xs"
open="false"
>
<DialogHeader>
  Its a simple dialog.
</DialogHeader>
<DialogBody divider>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus ad
    reprehenderit omnis perspiciatis aut odit! Unde architecto perspiciatis,
    dolorum dolorem iure quia saepe autem accusamus eum praesentium magni
    corrupti explicabo!
</DialogBody>
<DialogFooter>
  <Button size="md" variant="text" color="red" class="mr-1">
    Cancel
  </Button>
  <Button size="md" variant="gradient" color="blue">
    Confirm
  </Button>
</DialogFooter>
</DialogContainer>

Dialog Animation

You can use animation on the open/close state for Dialog component using the animate prop. 

<DialogContainer
size="md"
open="false"
animation
>
<DialogHeader>
  Its a simple dialog.
</DialogHeader>
<DialogBody divider>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus ad
    reprehenderit omnis perspiciatis aut odit! Unde architecto perspiciatis,
    dolorum dolorem iure quia saepe autem accusamus eum praesentium magni
    corrupti explicabo!
</DialogBody>
<DialogFooter>
  <Button size="md" variant="text" color="red" class="mr-1">
    Cancel
  </Button>
  <Button size="md" variant="gradient" color="blue">
    Confirm
  </Button>
</DialogFooter>
</DialogContainer>

Custom Dialog 

<DialogContainer
  size="md"
  open="{false}"
  animation="{false}"
>
  <DialogHeader>
    Its a simple dialog.
  </DialogHeader>
  <DialogBody divider>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus ad
      reprehenderit omnis perspiciatis aut odit! Unde architecto perspiciatis,
      dolorum dolorem iure quia saepe autem accusamus eum praesentium magni
      corrupti explicabo!
  </DialogBody>
  <DialogFooter>
    <Button size="md" variant="text" color="red" class="mr-1">
      Cancel
    </Button>
    <Button size="md" variant="gradient" color="blue">
      Confirm
    </Button>
  </DialogFooter>
</DialogContainer>