t-overlay

This component renders an overlay layer that offers easy to use api to control its status and full customization of the overlay's content. It's used internally in multiple popup components.

Usage

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

const controller = TOverlayController.create();

Later on you can control the status of the overlay 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, TOverlay, TOverlayController } from "@dija/tohama-components";
import { defineComponent } from "vue";

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

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

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

        <TOverlay controller={controller} onClick={onClick} />
      </TCard>
    );
  },
});

Loading Screen

import { TButton, TCard, TOverlay, TOverlayController, TLoading } from "@dija/tohama-components";
import { defineComponent } from "vue";

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

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

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

        <TOverlay controller={controller} onClick={onClick} class="flex items-center justify-center">
          <TLoading color="primary" dimensions="84" width="3" />
        </TOverlay>
      </TCard>
    );
  },
});

Color and Transition

import { TButton, TCard, TOverlay, TOverlayController, TIcon } from "@dija/tohama-components";
import { defineComponent } from "vue";

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

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

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

        <TOverlay
          controller={controller}
          onClick={onClick}
          class="flex items-center justify-center"
          color="danger"
          transition="pop"
          transitionOrigin="bottom"
        >
          <TCard design="raised" color="surface" p>
            <TIcon color="danger" size="64" icon="mdi:alert-circle-outline" />
          </TCard>
        </TOverlay>
      </TCard>
    );
  },
});

API

No options available

Popups

t-modal