UltimateUI guide

How to use components

In this guide, you will learn how to use components

Components#

Components are used to insert multiple instances of the same objects without the need to write large amounts of code. You can create a component that contains, for example, a text block, and then add it to a page in any quantity using just a single line.

Components also support parameters. If you want the same component to display different text, you can add a text parameter and set it to any value when adding the component.

The components folder is located at plugins/UltimateUI/contents/components. In this location, you can create a .yml file. Below is an example component and how to use it:

ini

params:
  example: "Default text"
blocks:
  - type: text
    layer: 100
    opacity: 100
    color: ffffff
    align: center
    text: ${example}
    position:
      x: 0
      y: 0
    size:
      width: 125
      height: 125

To use the component on a page, you need to add the following line to a page file located in plugins/UltimateUI/contents/pages:

ini

name: example_page
blocks:
  - { component: example_component, params: { example: "Your text" } }

Now the component with the text "Your text" will appear on your page. You can use this component anywhere on the page as many times as you want.

Advanced Usage#

Case Blocks#

Inside components, you can use many advanced features such as if blocks, loops, and much more.

For example, to create a component that accepts a true/false value and displays different content based on it, you can use the following code:

ini

params:
  example: false
blocks:
  - case: "{open}"
	true:
	  - type: text
		layer: 150.0
		opacity: 255
		color: ffffff
		align: center
		position:
		  x: 0
		  y: 0
		size:
		  width: 125
		  height: 125
		text: Component with ${example} param!
	false:
	  - type: text
		layer: 150.0
		opacity: 255
		color: ffffff
		align: center
		position:
		  x: 0
		  y: 0
		size:
		  width: 125
		  height: 125
		text: Component with ${example} param!

To use the component, add the following line to the page:

ini

name: example_page2
blocks:
  - { component: example_component2, params: { example: true } }

Loop Blocks#

Inside components, you can use loops to add multiple elements at once. Below is an example of a loop:

ini

params:
  loop_count: 5
blocks:
  - loop: "{loop_count}"
	block:
	  type: block
	  layer: 150.0
	  opacity: 255
	  color: ffffff
	  position:
		x: 50 + (100 * {val})
		y: 25
	  size:
		width: 25
		height: 25
	  unicode: 

To use the component, add the following line to the page:

ini

name: example_page3
blocks:
  - { component: example_component3, params: { loop_count: 10 } }