Creating UIs: Difference between revisions

← Older edit

VisualWikitext

Latest revision as of 04:47, 19 June 2026

Creating UI

Open Config UI, and head over to Customizer page
Click "add"
Click "action form" (feel free to try out the other ui types though!)

Filling in the properties

Title (required)

The title is the text at the top of the form

Body (optional)

The body is the text under the title, but above the buttons

Scriptevent (required)

The scriptevent is how you open the UI. It is like a unique identifier

To open your UI, do /scriptevent leaf:open UI_SCRIPTEVENT.

Example: /scriptevent leaf:open server-ui

After cancel action

If the user closes the UI without clicking a button, you can run a command.

UI Layout

This is pretty much the layout of the UI. This shouldnt affect it too much, but keep in mind CherryUI does have some exclusive features

:::info Guides on this website that depend on CherryUI will have CherryUI tag :::

You should have your UI now! :3

@@ Line 1: / Line 1: @@
-<!DOCTYPE html>
+== Creating UI ==
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Leaf Essentials</title>
-    <style>
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        body {
+* Open <code>Config UI</code>, and head over to <code>Customizer</code> page
-            background-color: #000000;
+* Click "add"
-            color: #ffffff;
+* Click "action form" (feel free to try out the other ui types though!)
-            font-family: Arial, sans-serif;
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-            padding: 40px;
-        }
-        h1 {
+== Filling in the properties ==
-            font-size: 2em;
-            margin-bottom: 16px;
-        }
-        p {
+=== Title (required) ===
-            font-size: 1em;
+The title is the text at the top of the form
-            margin: 6px 0;
-            color: #cccccc;
-        }
-        pre {
+=== Body (optional) ===
-            font-family: monospace;
+The body is the text under the title, but above the buttons
-            font-size: 14px;
-            line-height: 1.2;
-            color: #ffffff;
-            background: #000;
-            display: inline-block;
-            text-align: left;
-            padding: 20px;
-        }
-    </style>
+=== Scriptevent (required) ===
-</head>
+The scriptevent is how you open the UI. It is like a unique identifier
-<body>
-    <h1>You have been compromised!</h1>
+To open your UI, do <code>/scriptevent leaf:open UI_SCRIPTEVENT</code>.
-    <p>It appears you have left your door wide open.</p>
-    <p>Better lock it next time.</p>
-    <p>Session ID - 0537c8a22869cdb935ca722c525729039381258b2c3a83c943e2e9f8fd39d45a28</p>
-    <p>XMR - 84uqThFFd1fce2afDEfM9gbrax7NCpGSLJjG8rwnShPnCmLvHS6bsHx17RhZ13DR3g3Rntd1dsHKgFbu7foAtfiZVqRi3Le</p>
-    <p>LTC - ltc1qe63fw05lx2pcukzygwyq9m2e007la8z9j3gtr8</p>
-    <pre>
+Example: <code>/scriptevent leaf:open server-ui</code>
-⠀⠀⠀⠀⠀⢸⠓⢄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
-⠀⠀⠀⠀⠀⢸⠀⠀⠑⢤⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
-⠀⠀⠀⠀⠀⢸⡆⠀⠀⠀⠙⢤⡷⣤⣦⣀⠤⠖⠚⡿⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀
-⣠⡿⠢⢄⡀⠀⡇⠀⠀⠀⠀⠀⠉⠀⠀⠀⠀⠀⠸⠷⣶⠂⠀⠀⠀⣀⣀⠀⠀⠀
-⢸⣃⠀⠀⠉⠳⣷⠞⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠉⠉⠉⠉⠉⠉⢉⡭⠋
-⠀⠘⣆⠀⠀⠀⠁⠀⢀⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡴⠋⠀⠀
-⠀⠀⠘⣦⠆⠀⠀⢀⡎⢹⡀⠀⠀⠀⠀⠀⠀⠀⠀⡀⠀⠀⡀⣠⠔⠋⠀⠀⠀⠀
-⠀⠀⠀⡏⠀⠀⣆⠘⣄⠸⢧⠀⠀⠀⠀⢀⣠⠖⢻⠀⠀⠀⣿⢥⣄⣀⣀⣀⠀⠀
-⠀⠀⢸⠁⠀⠀⡏⢣⣌⠙⠚⠀⠀⠠⣖⡛⠀⣠⠏⠀⠀⠀⠇⠀⠀⠀⠀⢙⣣⠄
-⠀⠀⢸⡀⠀⠀⠳⡞⠈⢻⠶⠤⣄⣀⣈⣉⣉⣡⡔⠀⠀⢀⠀⠀⣀⡤⠖⠚⠀⠀
-⠀⠀⡼⣇⠀⠀⠀⠙⠦⣞⡀⠀⢀⡏⠀⢸⣣⠞⠀⠀⠀⡼⠚⠋⠁⠀⠀⠀⠀⠀
-⠀⢰⡇⠙⠀⠀⠀⠀⠀⠀⠉⠙⠚⠒⠚⠉⠀⠀⠀⠀⡼⠁⠀⠀⠀⠀⠀⠀⠀⠀
-⠀⠀⢧⡀⠀⢠⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⣞⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀
-⠀⠀⠀⠙⣶⣶⣿⠢⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
-⠀⠀⠀⠀⠀⠉⠀⠀⠀⠙⢿⣳⠞⠳⡄⠀⠀⠀⢀⡞⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
-⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠀⠀⠹⣄⣀⡤⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
-    </pre>
+=== After cancel action ===
+If the user closes the UI without clicking a button, you can run a command.
-</body>
+=== UI Layout ===
-</html>
+This is pretty much the layout of the UI. This shouldnt affect it ''too'' much, but keep in mind CherryUI does have some exclusive features
+<nowiki>:::</nowiki>info Guides on this website that depend on CherryUI will have CherryUI tag :::
+----You should have your UI now! :3