Modal

This plugin provides an easy way to launch modals. It's designed to show simple and complex content with a number of properties and slots.

All slots provide the modal controller, which allows you to control the status of the modal.

Learn more about popups and t-modal.

Basic

Both of the label and content properties accept a string or a function that returns a component. You can also specify the size of the modal.

import { TButton } from "@dija/tohama-components";
import { useModal } from "@dija/tohama-plugins";
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    const modal = useModal();

    const launch = () => {
      void modal.show({
        size: "re",
        label: "Terms and Conditions",
        content:
          "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.",
      });
    };

    return () => (
      <TButton design="flat" onClick={launch}>
        Launch Modal
      </TButton>
    );
  },
});

Forms

The modal content is scrollable, which allows for complex content. You can also pass a function that returns a component to the actions property.

import { TButton, TCard, TCell, TDivider, TImage, TInputText, TText } from "@dija/tohama-components";
import { useModal } from "@dija/tohama-plugins";
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    const modal = useModal();

    const launch = () => {
      void modal.show({
        size: "lg",
        color: "danger",
        label: "Your Account Settings",
        content: () => (
          <TCell py="re" px="lg">
            <TCard design="flat" ratio={6 / 19} nmt="re" nmx="lg" mb>
              <TImage src="https://source.unsplash.com/1200x700/?nature" />
            </TCard>
          </TCell>
        ),
        actions: ({ controller }) => (
          <>
            <TButton onClick={() => {}}>Save</TButton>
            <TButton color="secondary" onClick={() => controller.hide()}>
              Cancel
            </TButton>
          </>
        ),
      });
    };

    return () => (
      <TButton design="flat" onClick={launch}>
        Launch Modal
      </TButton>
    );
  },
});

Bottom Sheet

You can also set the layout property to bottom-sheet.

import { TAvatar, TButton, TCell, TDivider, TFlex, TText } from "@dija/tohama-components";
import { useModal } from "@dija/tohama-plugins";
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    const modal = useModal();

    const launch = () => {
      void modal.show({
        layout: "bottom-sheet",
        size: "md",
        color: "danger",
        prepend: () => (
          <TCell>
            <TFlex align="center" py="re" px="lg">
              <TAvatar class="w-12" ratio="1" src="https://source.unsplash.com/1200x700/?nature" circle me />
              <TCell>
                <TText size="lg" weight="normal" leading="tight">
                  Kalid Bader
                </TText>
                <TText size="re" weight="normal" leading="tight">
                  [email protected]
                </TText>
              </TCell>
            </TFlex>

            <TDivider />
          </TCell>
        ),
        content: () => (
          <TCell>
            <TButton color="primary" size="lg" icon-position="end" icon="mdi:home" block>
              Home
            </TButton>
          </TCell>
        ),
        append: () => (
          <TCell>
            <TDivider />
            <TText size="re" weight="normal" py="md" px="lg">
              Shortcuts
            </TText>
          </TCell>
        ),
      });
    };

    return () => (
      <TButton design="flat" onClick={launch}>
        Launch Modal
      </TButton>
    );
  },
});

Top Sheet

You can also set the layout property to top-sheet.

import { TButton, TCell, TDivider, TFlex, TIconButton, TImage, TText } from "@dija/tohama-components";
import { useModal } from "@dija/tohama-plugins";
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    const modal = useModal();

    const launch = () => {
      void modal.show({
        layout: "top-sheet",
        size: "re",
        persistent: true,
        prepend: ({ controller }) => (
          <TFlex justify="between" align="center" py="md" px="lg">
            <TCell>
              <TText leading="tight" size="lg">
                Recent Post
              </TText>
              <TText leading="tight" size="xs">
                2,423 likes
              </TText>
            </TCell>
            <TIconButton icon="mdi:close" onClick={() => controller.hide()} nme />
          </TFlex>
        ),
        content: () => (
          <>
            <TDivider />
            <TImage ratio="1" src="https://source.unsplash.com/1200x1200/?nature" />
          </>
        ),
        append: ({ controller }) => (
          <TCell>
            <TDivider />
            <TButton color="danger" icon="mdi:heart" onClick={() => controller.hide()} my="xs" centered block>
              Like
            </TButton>
          </TCell>
        ),
      });
    };

    return () => (
      <TButton design="flat" onClick={launch}>
        Launch Modal
      </TButton>
    );
  },
});

Popups

Message Modal

Popups

Snackbar

Table of Contents