Create Muk Nav Drawer #
To create Muk Drawer, right-click in the Hierarchy > Muk > Drawer. You will see a new object(MukDrawerCanvas) created in the Hierarchy. Since Drawer needs to be on top of all other UI. MukDrawer is rendering in Screen Space – Overlay render mode.
Muk Drawer - Properties #
Go to MukDrawerCanvas > Container > MukDrawer. You can edit all the settings in here. For details go througth the properties table below. Since Drawers are do dynamic, there’s not much setting here. And you can add UI in the drawer, details please see the section below.
Property | Desciption | Value |
|---|---|---|
Platform Type | Which UI Platform should Muk Components display. (Default Material design) | Device - Base on device. iOS UI for iOS device, Material design for others. iOS - iOS design. Material - Material design. |
Dark Mode | Use Dark mode or light mode. You can set color for each mode in theme settings. | Dark - Dark Mode. Light - Light Mode. |
Is Dismiss by backgound | When the drawer is showing, should it close when the background is clicked. | |
Is Showing | The default state of the drawer. You can set it to false after done the UI design of the drawer. |
Customizing Muk Drawer #
You can add any Unity UI object in the following path. MukDrawerCanvas > Container > MukDrawer > Drawer > Content > MukScrollview > scroll_view > Viewport > Content. (I know it’s a bit deep, but that’s the best I can do, since it is quite complicated.)
This is a normal Unity scrollview. So after adding UIs in the scrollview’s content, remember to set the content’s height, so it can scroll properly.
Muk Drawer Row #
While you can add any UI in the MukDrawer. We have create a new simple row for you to use. You can simple right-click in the Hierarchy > Muk > Drawer Row. You will see a new object(MukDrawerRow) created in the Hierarchy. you can move this object to the scrollview’s content in the MukDrawer.
In the MukDrawerRow, there’s a button component, you can set the onClick there.
And under the row, there are few children(You can edit the Icon and Title here), Go to MukDrawerRow > Icon, you can change the icon image to any icon you want, and set any color. Go to MukDrawerRow > Title, and you can change the title text to any text you want.
Show and Hide Drawer #
You can use the following code to show and hide the drawer. If you have set Is Dismiss by background to true in the MukDrawer. Then you can hide the drawer by clicking the background while the drawer is showing.
You can also check if the drawer is showing by calling the drawer.isShowing.
using Muk;
[SerializeField] private MukDrawer mukDrawer;
// Drawer
public void ShowDrawer()
{
mukDrawer.Show();
}
public void HideDrawer()
{
mukDrawer.Hide();
}
public void ShowDrawerIfNotShowing()
{
if(!mukDrawer.isShowing)
{
mukDrawer.Show();
}
}