t-drawer

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

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

Usage

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

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

Basic Usage

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

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

        <TDrawer controller={controller} content-class="light:bg-white dark:bg-black">
          <TText p>Hello World!</TText>
        </TDrawer>
      </TCard>
    );
  },
});

Reverse and Slots

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

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

        <TDrawer
          controller={controller}
          content-class="light:bg-white dark:bg-black"
          prepend={() => <TText p>Prepend Slot</TText>}
          append={() => <TText p>Append Slot</TText>}
          reverse
        >
          <TText p>Content</TText>
        </TDrawer>
      </TCard>
    );
  },
});

Rail Drawer

Users can navigate your app using a t-drawer that has a t-rail component inside it. In this example also, we're using prepend and append slots.

import {
  TButton,
  TCard,
  TDrawer,
  TFlex,
  TTitle,
  TIconButton,
  TDivider,
  TRail,
  TRailItem,
} 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 drawer
      await controller.toggle({ event });
    };

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

        <TDrawer
          controller={controller}
          content-class="light:bg-white"
          prepend={() => (
            <>
              <TFlex justify="between" align="center" pt px mb>
                <TTitle size="lg" weight="normal">
                  My App
                </TTitle>
                <TIconButton icon="mdi:close" onClick={onClick} />
              </TFlex>
              <TDivider />
            </>
          )}
          append={() => (
            <>
              <TDivider />
              <TRail py="sm" pe>
                <TRailItem size="lg" label="Logout" icon="mdi:logout" color="danger" shaped />
              </TRail>
            </>
          )}
        >
          <TRail py pe>
            <TRailItem size="lg" label="Home" icon="mdi:home" color="primary" shaped />
            <TDivider my="sm" />
            <TRailItem size="lg" label="Account" icon="mdi:account-circle-outline" color="success" shaped>
              <TRailItem size="lg" label="Home" icon="mdi:home" shaped />
              <TRailItem size="lg" label="About" icon="mdi:information-variant" shaped />
              <TRailItem size="lg" label="Contact" icon="mdi:phone" shaped />
              <TRailItem size="lg" label="FAQ" icon="mdi:chat-question" shaped />
            </TRailItem>
            ...
          </TRail>
        </TDrawer>
      </TCard>
    );
  },
});

API

No options available

Icons

t-svg-icon

Popups

t-menu

Table of Contents