Create Muk Button #
To create MukButton, create and select MukUICanvas, right-click in the Hierarchy > Muk > Button. You will see a new object(MukButton) created in the selected canvas or the first canvas in the Hierarchy (if no canvas is selected). If there’s no canvas in the Hierarchy, Muk will create a MukUICanvas for you and place the MukButton in the newly created MukUICanvas.
Muk Button On Click #
You can set the on click function via script(See below code) or Unity Inspector window(See below section)
using Muk2;
// Assign Muk Button in the Inspector window
[SerializeField] private MukButton mukButton;
private void Start()
{
mukButton.onClick.AddListener(() => {
print("Button clicked");
});
}
Muk Button - Properties #
Property | Desciption | Value |
|---|---|---|
Platform Type | Which UI Platform should Muk Components display. | Device - Base on device. iOS UI for iOS device, Material design for others. iOS - iOS design. Material - Material design. |
Material Version | Which Material design version to use. | Material_3 - Use the Material 3 design. Material_2 - Use the Material 2 design.f |
Dark Mode | Use Dark mode or light mode. You can set color for each mode in theme settings. | Dark - Dark Mode. Light - Light Mode. |
Button Type | Button's type | Text - Rectangle with text Icon - Rectangle with icon Icon Text - Rectangle with icon & text Circle Icon - Circle with icon |
Is Interactable | Is Clickable / disabled? | |
Is Show Shadow (Material only) | Is show the shadow? | |
Overrider Border Radius | Override border radius or not | |
Border Radius | How round is the corner, if override border radius overriden | |
Stroke Width | The width of the stroke | |
Background Color Property | The background color of the button | You can choose iOS / Material Color from the drop down list, this list is from MukAppThemeData. If there's no color you like, you can tick the Override color property, then choose the color you like. If ticked, it will show two options - iOS & Material, and each option will have two options inside(Light Mode color / Dark Mode Color). |
Stroke Color Property | The stroke color of the button | You can choose iOS / Material Color from the drop down list, this list is from MukAppThemeData. If there's no color you like, you can tick the Override color property, then choose the color you like. If ticked, it will show two options - iOS & Material, and each option will have two options inside(Light Mode color / Dark Mode Color). |
Disabled Background Color Property | The background color of the button when it's disabled | You can choose iOS / Material Color from the drop down list, this list is from MukAppThemeData. If there's no color you like, you can tick the Override color property, then choose the color you like. If ticked, it will show two options - iOS & Material, and each option will have two options inside(Light Mode color / Dark Mode Color). |
Disabled Text Color Property | The text color of the button when it's disabled | You can choose iOS / Material Color from the drop down list, this list is from MukAppThemeData. If there's no color you like, you can tick the Override color property, then choose the color you like. If ticked, it will show two options - iOS & Material, and each option will have two options inside(Light Mode color / Dark Mode Color). |
Shadow Color Property(Material only) | The shadow color of the button | You can choose iOS / Material Color from the drop down list, this list is from MukAppThemeData. If there's no color you like, you can tick the Override color property, then choose the color you like. If ticked, it will show one options - Material, it will have two options inside(Light Mode color / Dark Mode Color). |
Text Color Property (For button type that have text) | The text color of the button | You can choose iOS / Material Color from the drop down list, this list is from MukAppThemeData. If there's no color you like, you can tick the Override color property, then choose the color you like. If ticked, it will show two options - iOS & Material, and each option will have two options inside(Light Mode color / Dark Mode Color). |
Text (For button type that have text) | The text to display | |
Icon Color Property (For button type that have icon) | The icon color of the button | You can choose iOS / Material Color from the drop down list, this list is from MukAppThemeData. If there's no color you like, you can tick the Override color property, then choose the color you like. If ticked, it will show two options - iOS & Material, and each option will have two options inside(Light Mode color / Dark Mode Color). |
Icon Image (For button type that have icon) | The image for the icon | |
On Click | The callback listener when the button is clicked. |