I am currently using Vue 3 version of Mertronic UI. Here, the modals and side drawers (MessengerDrawer/ActivityDrawer/...) uses classes to toggle like this:
<div
id="kt_drawer_chat"
class="bg-body"
data-kt-drawer="true"
data-kt-drawer-name="chat"
data-kt-drawer-activate="true"
data-kt-drawer-overlay="true"
data-kt-drawer-width="{default:"300px", "md": "500px"}"
data-kt-drawer-direction="end"
data-kt-drawer-toggle="#kt_drawer_chat_toggle"
data-kt-drawer-close="#kt_drawer_chat_close"
>
How can I toggle them programmatically?
Hi Apar,
Thank you for reaching out to us.
You can get a drawer instance in your component and then open it using show function as shown below.
import { DrawerComponent } from "@/assets/ts/components";
const drawer = DrawerComponent.getInstance("your_drawer_id");
drawer?.show();