t-snackbar

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

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

Usage

In order to control the snackbar 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 snackbar using the controller value which offers these methods:

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

Basic Usage

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

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

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

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

        <TSnackbar controller={controller}>Hello, I'm a snackbar!</TSnackbar>
      </TCard>
    );
  },
});

Persistent and Slots

To make a snackbar persistent, set duration to 0.

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

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

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

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

        <TSnackbar
          controller={controller}
          color="primary"
          transition="fade"
          duration={0}
          actions={() => <TIcon icon="mdi:twitter" />}
          hideOnClick
          elevated
        >
          Click anywhere to hide!
        </TSnackbar>
      </TCard>
    );
  },
});

API

No options available

Popups

t-overlay

Popups

t-tooltip

Table of Contents