t-menu

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

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

Usage

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

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

Basic Usage

import { TButton, TCard, TMenu } 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 menu
      await controller.toggle({ event });
    };

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

        <TMenu controller={controller}>
          <TCard design="raised" elevated>
            <TText p>Hello World!</TText>
          </TCard>
        </TMenu>
      </TCard>
    );
  },
});

Transitions and Size

import { TButton, TCard, TMenu } 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 menu
      await controller.toggle({ event });
    };

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

        <TMenu controller={controller} size="sm" transition="scroll-y-reverse">
          <TCard design="raised" elevated>
            <TText p>Hello World!</TText>
          </TCard>
        </TMenu>
      </TCard>
    );
  },
});

Slots

import { TButton, TCard, TMenu, TText, TDivider } 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 menu
      await controller.toggle({ event });
    };

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

        <TMenu
          controller={controller}
          size="xl"
          prepend={() => (
            <TCard design="raised" color="surface" mb="xs" elevated>
              <TText color="secondary" p>
                Prepend
              </TText>
            </TCard>
          )}
          append={() => (
            <TCard design="raised" color="surface" mt="xs" elevated>
              <TText color="secondary" p>
                Append
              </TText>
            </TCard>
          )}
        >
          <TCard design="raised" color="surface" py="xs" elevated>
            <TButton
              icon="mdi:account-plus"
              icon-position="end"
              rounded={false}
              onClick={() => controller.hide()}
              block
            >
              Create New Account
            </TButton>
            <TButton icon="mdi:login" icon-position="end" rounded={false} onClick={() => controller.hide()} block>
              Login
            </TButton>
            <TDivider />
            <TButton
              color="danger"
              icon="mdi:trash-can"
              icon-position="end"
              rounded={false}
              onClick={() => controller.hide()}
              block
            >
              Remove Your Account
            </TButton>
          </TCard>
        </TMenu>
      </TCard>
    );
  },
});

API

No options available

Popups

t-drawer

Popups

t-modal

Table of Contents