UI Elements

Author: admin 268 views

Learn more about custom Dark UI elements.

Button

There’s no usage difference, you can use Dark UI buttons just like the default one. For the main button, text can be changed using Button Manager. If you don’t want to change them by using Button Manager, you can enable ‘Use Custom Content’. For scripting, you can still continue to use UnityEngine.UI.Button class.

API / Scripting

				
					using Michsky.UI.Dark; // namespace

public ButtonManager myButton; // Your button variable

void YourFunction()
{
   // Updating button content
   myButton.buttonText = "My New Text";
   myButton.UpdateUI();
  
   // Enable or disable options
   myButton.useRipple = true;
   myButton.useCustomContent = false;
}

Horizontal Selector

Basically, think of this thing as a dropdown, but the navigation is managed by only with next and previous controls. In my opinion, it fits better than dropdown in most cases.

Items

You can add horizontal selector items to this list. If you wish, you can add functions to each item as well. As long as ‘Indicator’ is enabled, each button will generate an indicator item at runtime.

Saving

You can save the selected value by enabling this feature. Note that every selector should has its own unique Selector Tag value. Otherwise, there might be conflict(s) between selectors.

API / Scripting

				
					using Michsky.UI.Dark; // namespace

public HorizontalSelector mySelector; // Your selector variable

void YourFunction()
{
   // Creating a new item
   mySelector.CreateNewItem("Item Title");
 
   // Creating items within a loop
   for (int i = 0; i < yourIndexOrVariable; ++i)
   {
	  mySelector.CreateNewItem("Item Title");
   }

   // Adding a new dynamic event
   mySelector.selectorEvent.AddListener(YourEventHere);
  
   // Initializing the selector - use this if you've created a new item at runtime
   mySelector.defaultIndex = 3; // optional
   mySelector.SetupSelector();
  
   // Changing index & updating UI
   mySelector.index = 3;
   mySelector.UpdateUI();
  
   mySelector.ForwardClick(); // Select next item
   mySelector.PreviousClick(); // Select previous item
   mySelector.RemoveItem("Item Title"); // Delete a specific item
}

Modal Window

In order to change Modal Window content, you just need to change some values via Modal Window Manager (which is attached to the modal object).

At runtime, window content will be changing depending on its manager. If you want to change those values manually, you can enable ‘Use Custom Content’. You can call the window via OnClick or within your script.

API / Scripting

				
					using Michsky.UI.Dark; // namespace

public ModalWindowManager myModalWindow; // Your window variable

void YourFunction()
{
   myModalWindow.title = "New Title"; // Change title
   myModalWindow.description = "Description"; // Change desc
   myModalWindow.UpdateUI(); // Update UI
   myModalWindow.ModalWindowIn(); // Open window
   myModalWindow.ModalWindowOut(); // Close window
}

Slider

Dark UI is using the native slider that comes with Unity UI, but we’ve added some new cool features into it. For scripting, you can use UnityEngine.UI.Slider.

Saving

You can save the last selected value by checking this box. Note that every selector should has its own unique ‘Slider Tag’ value. Otherwise, there might be conflict(s) between sliders.

API / Scripting

				
					using Michsky.UI.Dark; // namespace

public SliderManager mySlider; // Your slider variable

void YourFunction()
{
   mySlider.mainSlider.value = 25f; // Changing slider value
   mySlider.usePercent = false; // Enabling/disabling percent
   mySlider.useRoundValue = false; // Show simplifed value
}

Native UI Elements

Dark UI is using the native Unity UI and its elements. Only custom UI elements are included on this page. You can also use your own UI tools or third party tools with it without any problem. For more information about Unity UI and other UI elements that is not included in this page, I’d suggest reading the official documentation or watching tutorials: https://docs.unity3d.com/2017.3/Documentation/Manual/UISystem.html