t-modal

This component renders a modal that offers easy to use api for its transition and position and full customization of the modal's content.

To generate modals programmatically, check the use-popups plugin.

Usage

In order to control the modal status you need to define a controller that can be used and passed to other components.

const controller = TUsePopupController.create();

Later on you can control the status of the modal using the controller value which offers these methods:

const onClick = (event: MouseEvent) => {
  // Toggle the current status of the modal
  controller.toggle({ event });
  // Show the modal
  controller.show({ event });
  // Hide the modal
  controller.hide();
};

Basic Usage

import { TButton, TCard, TModal } from "@dija/tohama-components";
import { TUsePopupController } from "@dija/tohama-shared";
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    const controller = TUsePopupController.create();

    const onClick = async (event: MouseEvent) => {
      // Toggle the current status of the modal
      await controller.toggle({ event });
    };

    return () => (
      <TCard design="outlined" p>
        <TButton onClick={onClick}>Toggle Modal</TButton>

        <TModal controller={controller} size="re" window>
          <TCard design="raised" color="surface" elevated p>
            Hello World!
          </TCard>
        </TModal>
      </TCard>
    );
  },
});

Transparent and top sheet transition and hide on body click

import { TButton, TCard, TCell, TModal, TInputText } from "@dija/tohama-components";
import { TUsePopupController } from "@dija/tohama-shared";
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    const controller = TUsePopupController.create();

    const onClick = async (event: MouseEvent) => {
      // Toggle the current status of the modal
      await controller.toggle({ event });
    };

    return () => (
      <TCard design="outlined" p>
        <TButton onClick={onClick}>Toggle Modal</TButton>

        <TModal
          controller={controller}
          transition="modal-top"
          verticalAlign="start"
          size="re"
          overlayed={false}
          hideOnBodyClick
          window
        >
          <TCard class="!rounded-t-none" design="raised" color="surface" size="xl" p="xl" elevated>
            <TInputText size="xl" label="Email Address" placeholder="[email protected]" persistentPlaceholder mb="xl" />
            <TButton design="raised" onClick={onClick}>
              Hide
            </TButton>
          </TCard>
        </TModal>
      </TCard>
    );
  },
});

Persistent and bottom sheet transition

import { TButton, TCard, TModal, TCell, TInputText } from "@dija/tohama-components";
import { TUsePopupController } from "@dija/tohama-shared";
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    const controller = TUsePopupController.create();

    const onClick = async (event: MouseEvent) => {
      // Toggle the current status of the modal
      await controller.toggle({ event });
    };

    return () => (
      <TCard design="outlined" p>
        <TButton onClick={onClick}>Toggle Modal</TButton>

        <TModal controller={controller} transition="modal-bottom" verticalAlign="end" size="re" persistent window>
          <TCard class="!rounded-b-none" design="raised" color="surface" size="xl" p="xl" elevated>
            <TInputText size="xl" label="Email Address" placeholder="[email protected]" persistentPlaceholder mb="xl" />
            <TButton design="raised" onClick={onClick}>
              Hide
            </TButton>
          </TCard>
        </TModal>
      </TCard>
    );
  },
});

Hide on content click and side transition

import { TButton, TCard, TCell, TAspectRatio, TImage, TModal } from "@dija/tohama-components";
import { TUsePopupController } from "@dija/tohama-shared";
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    const controller = TUsePopupController.create();

    const onClick = async (event: MouseEvent) => {
      // Toggle the current status of the modal
      await controller.toggle({ event });
    };

    return () => (
      <TCard design="outlined" p>
        <TButton onClick={onClick}>Toggle Modal</TButton>

        <TModal
          controller={controller}
          transition="scroll-x-reverse"
          verticalAlign="end"
          horizontalAlign="start"
          size="re"
          hideOnContentClick
          window
        >
          <TCell p>
            <TCard class="overflow-hidden" design="raised" color="surface" size="xl" elevated>
              <TImage ratio="1" src="https://source.unsplash.com/500x500/?newyork" />
            </TCard>
          </TCell>
        </TModal>
      </TCard>
    );
  },
});

Full screen with modal bottom transition

import { TButton, TCard, TInputText, TModal } from "@dija/tohama-components";
import { TUsePopupController } from "@dija/tohama-shared";
import { defineComponent } from "vue";

export const Example4 = defineComponent({
  setup() {
    const controller = TUsePopupController.create();

    const onClick = async (event: MouseEvent) => {
      // Toggle the current status of the modal
      await controller.toggle({ event });
    };

    return () => (
      <TCard design="outlined" p>
        <TButton onClick={onClick}>Toggle Modal</TButton>

        <TModal controller={controller} transition="modal-bottom" size="re" fullscreen>
          <TCard p="xl" design="raised" color="surface" rounded={false} stretch>
            <TInputText size="xl" label="Email Address" placeholder="[email protected]" persistentPlaceholder mb="xl" />
            <TButton design="raised" onClick={onClick}>
              Hide
            </TButton>
          </TCard>
        </TModal>
      </TCard>
    );
  },
});

API

No options available

Popups

t-menu

Popups

t-overlay

Table of Contents