# Custom Elements
Custom elements for Leaf UI are pre-created elements which combine a set of features from regular markup. They make it a lot easier to perform some UI tasks.
One distinguishing feature is that all custom elements start with _
. Also, although they're named custom elements, they are parsed into valid HTML and CSS in the browser. Let's look at the supported custom elements.
# Style
This is a custom element which provides a simpler a simpler way to use stylesheets in your Leaf UI. Style
unlike createStyles
allows you to also import external styles.
It takes in 2 parameters:
(string|array) The styles to use. Pass in an array to use styles directly and a string for an external stylesheet
(array, optional) Attributes
// external style import
Style("./style.css");
// "in UI" styles
Style([
"body" => "background-color: #fcfcfc;"
]);
// "in UI" styles with attributes
Style([
"body" => "background-color: #fcfcfc;"
], ["type" => "text/css"]);
Style([
"body" => [
"background" => "grey",
"font-family" => "sans-serif",
],
// you can also use styles this way
"p" => "font-size: 20px; font-weight: normal;",
// you can even use media queries
"@media only screen and (max-width: 500px)" => [
"body" => [
"background" => "silver"
],
],
]),
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# Script
This works pretty much the same way Style
works. It allows you to scripts inside your Leaf UI.
It takes in 2 parameters:
(string|array) The scripts to use. Pass in an array to use scripts directly and a string for an external script
(array, optional) Attributes
// external script import
Script("./main.js");
// "in UI" script - Note that array must contain a string
Script(["
alert('This is an alert');
"]);
2
3
4
5
6
7
# Uppercase
Makes all takes uppercase. It takes in 2 parameters:
- (string|array) Child/Children
- (array, optional) Attributes
Uppercase("This is uppercase");
# Lowercase
Makes all text lowercase. It takes in 2 parameters:
- (string|array) Child/Children
- (array, optional) Attributes
Lowercase("This is a lowercase");
# Container
Container is an element inspired by bootstrap's .container
. It pretty much creates a container around an object. It takes in 2 parameters:
(array, optional) Container attributes eg: style, ...
(array) Children
Container([], [
// children here
]);
2
3
# Row
Row just as the name indicates, creates a row. It works using CSS Flexbox and therefore creates a flex row. It takes in 2 parameters:
(array, optional) Row attributes eg: style, ...
(array) Children
$ui::Row([], [
// children here
]);
2
3
# Column
This custom element creates a flex column. It takes in 2 parameters:
(array, optional) Column attributes eg: style, ...
(array) Children
$ui::Column([], [
// children here
]);
2
3
# Creating your own elements (Components)
As far as PHP is concerned, all Leaf UI elements are just PHP functions, with this in mind, simply create a function and return a Leaf UI. That's it! There's no need to extend classes and all that when everything is already available for you.
function MyButton($children, $props)
{
return button(div(["class" => "btn-content-wrapper"], $children), array_merge(
$props, ["class" => "custom-btn"]
));
}
// ...
echo MyButton("click me!", ["color" => "red"]);
2
3
4
5
6
7
8
9
10
Built with ❤ by Mychi Darko