Tailwind CSS Dialog - Taco Vue

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>