Snackbar

This plugin provides an easy way to launch and queue snackbars.

Learn more about popups and t-snackbar.

Message

Set label and sublabel values to show a message snackbar.

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

export default defineComponent({
  setup() {
    const snackbar = useSnackbar();

    const launch = async () => {
      void snackbar.show({
        color: "success",
        label: "Thank you!",
        sublabel: "Your order was completed.",
      });
    };

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

Loading

Show a loading snackbar with persistent enabled and pass a t-loading to the actions property.

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

export default defineComponent({
  setup() {
    const snackbar = useSnackbar();

    const launch = async () => {
      void snackbar.show({
        design: "flat",
        color: "primary",
        size: "lg",
        label: "Great!",
        sublabel: "Now we're creating your account.",
        persistent: true,
        actions: () => <TLoading color="primary" width="3" dimensions="24" />,
      });
    };

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

Confirm

The actions property provides the snackbar's controller to hide the modal with a boolean value.

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

export default defineComponent({
  setup() {
    const snackbar = useSnackbar();

    const launch = async () => {
      const response = await snackbar.show({
        design: "flat",
        color: "alert",
        label: "Delete Account",
        sublabel: "Confirm to permanently delete your account.",
        persistent: true,
        actions: ({ controller }) => (
          <TButton color="alert" size="sm" ms="sm" onClick={() => controller.hide({ value: true })}>
            Delete
          </TButton>
        ),
      });

      if (response) {
        // Delete Account
      }
    };

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

Popups

Modal

Rich

t-input-rich-editor

Table of Contents