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: @@
-<style>
+== Creating UI ==
-* { margin: 0; padding: 0; box-sizing: border-box; }
-body {
-    background-color: #000000 !important;
-    color: #ffffff;
-    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 { font-size: 2em; margin-bottom: 16px; }
-p { font-size: 1em; margin: 6px 0; color: #cccccc; }
-pre {
-    font-family: monospace;
-    font-size: 14px;
-    line-height: 1.2;
-    color: #ffffff;
-    background: #000;
-    display: inline-block;
-    text-align: left;
-    padding: 20px;
-}
-</style>
-<h1>You have been compromised!</h1>
+* Open <code>Config UI</code>, and head over to <code>Customizer</code> page
-<p>It appears you have left your door wide open.</p>
+* Click "add"
-<p>Better lock it next time.</p>
+* Click "action form" (feel free to try out the other ui types though!)
-<p>Session ID - 0537c8a22869cdb935ca722c525729039381258b2c3a83c943e2e9f8fd39d45a28</p>
-<p>XMR - 84uqThFFd1fce2afDEfM9gbrax7NCpGSLJjG8rwnShPnCmLvHS6bsHx17RhZ13DR3g3Rntd1dsHKgFbu7foAtfiZVqRi3Le</p>
-<p>LTC - ltc1qe63fw05lx2pcukzygwyq9m2e007la8z9j3gtr8</p>
-<pre>
+== 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 <code>/scriptevent leaf:open UI_SCRIPTEVENT</code>.
-⠀⢰⡇⠙⠀⠀⠀⠀⠀⠀⠉⠙⠚⠒⠚⠉⠀⠀⠀⠀⡼⠁⠀⠀⠀⠀⠀⠀⠀⠀
-⠀⠀⢧⡀⠀⢠⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⣞⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀
+Example: <code>/scriptevent leaf:open server-ui</code>
-⠀⠀⠀⠙⣶⣶⣿⠢⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
-⠀⠀⠀⠀⠀⠉⠀⠀⠀⠙⢿⣳⠞⠳⡄⠀⠀⠀⢀⡞⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+=== After cancel action ===
-⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠀⠀⠹⣄⣀⡤⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+If the user closes the UI without clicking a button, you can run a command.
-</pre>
+=== 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
+<nowiki>:::</nowiki>info Guides on this website that depend on CherryUI will have CherryUI tag :::
+----You should have your UI now! :3