Leaf UI

# Core Concepts

There are a couple of methods which serve as Leaf UI's core: The most important being createElement.

# createElement

This method simply allows you to create(render) a native HTML element.

It takes in 3 parameters:

  • HTML Element To Render eg: h2 (string, required)

  • Element props (including children). You can use an empty array if there are no attributes (array, optional). If you have only one child, you can pass in a string instead of a whole array with the children prop.

  • Element type: (optional) This refers to the HTML tag type. Leaf UI supports 3 types:

    • UI::SINGLE_TAG for a single tag eg: meta and HTML 5 input (<element attributes>)

    • UI::SELF_CLOSING for a self closing tag <element attributes />

    • If the value is not one of the above or this field is left blank, a normal HTML is created <element attributes>children</element>

UI::createElement("h2", ["id" => "title"], type);
1

# createStyles

Create styles simply allows you to write styles in your Leaf UI, pretty much like how <style> lets you write styles in HTML.

It takes in 2 parameters:

  • The styles you want to apply (array)

  • Attributes for your style tag when Leaf UI renders in the browser. Leave blank or an empty array if there are no attributes (array)

// no attributes/ class selector
UI::createStyles([
  ".home" => "background: #fefefe;"
], []);

// no attributes/element selector
UI::createStyles([
  "h2" => "font-family: sans-serif;"
]);

// renders <style type="text/css">
UI::createStyles([
  "#btn" => "padding: 10px 15px;"
], ["type" => "text/css"]);

// media query example
UI::createStyles([
  "@media only screen and (max-width: 500px)" => [
    "p > button#btn" => "border: 1px solid grey;"
  ]
])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Checkout a simpler alternative to this

# loop

This is an element created to handle loops in your Leaf UI. Since your entire Leaf UI is just a function👌, you can't use "mult-line functions" like foreach, for, if..., therefore, this method has been prepared. It takes in 2 parameters:

  • The array to loop through
  • A callable handler for loop

The callable should return an element

$users = [
  ["name" => "user 1", "rank" => "D"],
  ["name" => "user 2", "rank" => "F"],
  ["name" => "user 3", "rank" => "S"],
];
// ...
Row([
  UI::loop($users, function($user) use(UI) {
    return Column([
      h2($user["name"]),
      small($user["rank"])
    ]);
  })
])
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Also, you can access both the key and value of an array during the loop.

$user = ["name" => "user 1", "rank" => "D"];

Column([
  UI::loop($user, function($value, $key) use(UI) {
    return Row([
      span("$key:"),
      h4($value)
    ]);
  })
])
1
2
3
4
5
6
7
8
9
10

# randomId

This method as the name suggests, generates a random id. Under the hood Leaf UI uses this method to generate an id for any element which isn't given an id. It takes in 1 param:

  • A string to add to id, usually an element name (optional)
UI::randomId("div");
1

# Render

This method allows you to output the UI you've created into the browser.

$html = UI::body([...]);
UI::render($html);

// or
UI::render(UI::body([...]));
1
2
3
4
5

← Custom Elements →