Muk TextField

Table of Contents

Create Muk Text Field
Muk Text Field Code
Muk TextField - Properties

Create Muk Text Field #

To create MukTextField, create and select MukUICanvas, right-click in the Hierarchy > Muk > TextField. You will see a new object(MukTextField) 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 MukTextField in the newly created MukUICanvas.

Muk Text Field Code #

You can get and set the text of the textfield or set call backs via script. Please see the code.


using Muk2;

// Assign MukTextField in the Inspeactor window.
[SerializeField] private MukTextField mukTextField;

private void Start()
{
    //Text Field
    mukTextField.text = "Text set by code";
    mukTextField.onPrefixClick.AddListener(OnPrefixClick);
    mukTextField.onSuffixClick.AddListener(OnSuffixClick);
    mukTextField.onValueChanged.AddListener(OnValueChanged);
    mukTextField.onEndEdit.AddListener(OnEndEdit);
    mukTextField.onSelect.AddListener(OnSelect);
    mukTextField.onDeselect.AddListener(OnDeselect);
    
    print("text is " + mukTextField.text);
}
    
private void OnPrefixClick()
{
    print("OnPrefixClick");
}

private void OnSuffixClick()
{
    print("OnSuffixClick");
}

private void OnValueChanged(string value)
{
    print("OnValueChanged " + value);
}

private void OnEndEdit(string value)
{
    print("OnEndEdit " + value);
}

private void OnSelect(string value)
{
    print("OnSelect " + value);
}

private void OnDeselect(string value)
{
    print("OnDeselect " + value);
}

Muk TextField - 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.
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 multiple Text Area	This is still in beta phase, so may face some odd behaviour.
Content Type	The textfield type, like email, numbers...
Stroke Color Property	The border color of the textfield	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).
Background Color Property	The background color of the textfield	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 Color Property	The text color of the textfield	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).
Placeholder text Color Property	The placeholder / hint text color of the textfield	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).
Caret Color Property	The caret color of the textfield	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).
Prefix Icon Color Property	The left icon color of the textfield	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).
Suffix Icon Color Propert	The right icon color of the textfield	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).
Is Show Prefix	Should show left icon or not?
Prefix Sprite	The image sprite of the left icon.
Is Show Suffix	Should show right icon or not?
Suffix Sprite	The image of the right icon.
Title Text (Material Only)	The title text of the textfield.
Placeholder Text	The text of the placeholder / hint text.
Text	The text of the textfield.
OnValueChangeed	Call back for when the text changed
OnEndEdit	Call back for when user end the edit of the textfield
OnSelect	Call back for when textfield is selected by user.
OnDeselect	Call back for when user deselect the textfield.

Quick Start

Muk Settings

Scene Management

Muk Components

Muk TextField

Create Muk Text Field #

Muk Text Field Code #

Muk TextField - Properties #