# Basic Usage

This guide assumes you've read the introduction to Leaf UI. As said before, Leaf UI is a library for building user interfaces with PHP. In this section we'll be looking at using basic "HTML tags".

A bunch of shorthand methods have been created which allow you use create elements with using the create_element we saw before. The mostly look like this:

$ui::div([attributes], [
	// children
]);

1
2
3

Now, let's look at our elements.

# Structural HTML Tags

# html

This is the equivalent of <html>, it also adds <!doctype html> at the begining of the page. It takes in 2 parameters:

(array) Children
(array, optional) Attributes

$ui::html([
	// children here
]);

$ui::html([...], ["lang" => "en-us"]);

1
2
3
4
5

# head

This is the equivalent of <head>. It takes in 2 parameters:

(array) Children
(array, optional) Attributes

$ui::head([
	// children here
]);

1
2
3

# body

This is the equivalent of <body>. It takes in 2 parameters:

(array) Children
(array, optional) Attributes

$ui::body([
	// children here
]);

$ui::body([...], ["style" => "margin: 0;"]);

1
2
3
4
5

This is the equivalent of <header>. It takes in 2 parameters:

(array, optional) Attributes
(array) Children

$ui::header([attributes], [
	// children here
]);

1
2
3

# nav

This is the equivalent of <nav>. It takes in 2 parameters:

(array, optional) Attributes
(array) Children

$ui::nav([attributes], [
	// children here
]);

1
2
3

This is the equivalent of <footer>. It takes in 2 parameters:

(array, optional) Attributes
(array) Children

$ui::footer([attributes], [
	// children here
]);

1
2
3

# aside

This is the equivalent of <aside>. It takes in 2 parameters:

(array, optional) Attributes
(array) Children

$ui::aside([attributes], [
	// children here
]);

1
2
3

# br

This is the equivalent of <br>. It takes in just 1 parameter:

(array, optional) Attributes

$ui::br([attributes]);

# hr

This is the equivalent of <hr>. It takes in just 1 parameter:

(array, optional) Attributes

$ui::hr([attributes]);

# a

This is the equivalent of <a>. It takes in 2 parameters:

(array, optional) Attributes
(array) Children

$ui::a([attributes], [
	// children here
]);

1
2
3

# div

This is the equivalent of <div>. It takes in 2 parameters:

(array, optional) Attributes
(array) Children

$ui::div([attributes], [
	// children here
]);

1
2
3

# span

This is the equivalent of <span>. It takes in 2 parameters:

(array, optional) Attributes
(array) Children

$ui::span([attributes], [
	// children here
]);

1
2
3

# section

This is the equivalent of <section>. It takes in 2 parameters:

(array, optional) Attributes
(array) Children

$ui::section([attributes], [
	// children here
]);

1
2
3

# hgroup

This is the equivalent of <hgroup>. It takes in 2 parameters:

(array) Children
(array, optional) Attributes

$ui::hgroup([...], [attributes]);

# h1-h6

This is the equivalent of <h1>...<h6>. It takes in 2 parameters:

(array) Children
(array, optional) Attributes

$ui::h1([...], [attributes]);
$ui::h3([...], [attributes]);
$ui::h5([...], [attributes]);

1
2
3

# blockquote

This is the equivalent of <blockquote>. It takes in 2 parameters:

(array) Children
(array, optional) Attributes

$ui::blockquote([...], [attributes]);

# p

This is the equivalent of <p>. It takes in 2 parameters:

(array) Children
(array, optional) Attributes

$ui::p([...], [attributes]);

# article

This is the equivalent of <article>. It takes in 2 parameters:

(array, optional) Attributes
(array) Children

$ui::article([attributes], [
	// children here
]);

1
2
3

# details

This is the equivalent of <details>. It takes in 2 parameters:

(array, optional) Attributes
(array) Children

$ui::details([attributes], [
	// children here
]);

1
2
3

# summary

This is the equivalent of <summary>. It takes in 2 parameters:

(array, optional) Attributes
(array) Children

$ui::summary([attributes], [
	// children here
]);

1
2
3

# Meta-data HTML Tags

# title

This is the equivalent of <title>. It takes in 2 parameters:

(string) Title
(array, optional) Attributes

$ui::title("Home");

# Meta

This is the equivalent of <meta>. It takes in 3 parameters:

(string) name <meta name="">
(string) content <meta content="">
(array, optional) Attributes

$ui::meta("viewport", "width=device-width;initial-scale=1");

# Link

This is the equivalent of <link>. It takes in 3 parameters:

(string) href <link href="">
(string) rel <link rel="">
(array, optional) Attributes

$ui::link("./style.css", "stylesheet");

# Using Styles

# Using Scripts

# base

This is the equivalent of <base>. It takes in 2 parameters:

(string) href <base href="">
(array, optional) Attributes

$ui::base("...");

# Formatting Tags

# tt

This is the equivalent of <tt>. It takes in 2 parameters:

(string|array) Child/Children
(array, optional) Attributes

$ui::tt("This is tt");

# b

This is the equivalent of <b>. It takes in 2 parameters:

(string|array) Child/Children
(array, optional) Attributes

$ui::b("...");

# i

This is the equivalent of <i>. It takes in 2 parameters:

(string|array) Child/Children
(array, optional) Attributes

$ui::i("...");

# u

This is the equivalent of <u>. It takes in 2 parameters:

(string|array) Child/Children
(array, optional) Attributes

$ui::u("...");

# small

This is the equivalent of <small>. It takes in 2 parameters:

(string|array) Child/Children
(array, optional) Attributes

$ui::small("...");

# sub

This is the equivalent of <sub>. It takes in 2 parameters:

(string|array) Child/Children
(array, optional) Attributes

$ui::sub("...");

# sup

This is the equivalent of <sup>. It takes in 2 parameters:

(string|array) Child/Children
(array, optional) Attributes

$ui::sup("...");

# Embedded Content Tags

# Figure

This is the equivalent of <figure>. It takes in 2 parameters:

(array, optional) Attributes
(array) Children

$ui::figure([attributes], [
	// children here
]);

1
2
3

# Img

This is the equivalent of <img>. It takes in 2 parameters:

The image to display
(array, optional) Attributes

$ui::img("./img.jpg", ["style" => "width: 80px;"]);

# Form Tags

# form

This is the equivalent of <form>. It takes in 4 parameters:

(string) method: get, post
(string) action: where to submit the form
(array) Form Fields
(array) attributes for form tag

$ui::form("post", "/form/submit", [
	// children here
]);

1
2
3

# input

This is the equivalent of <input>. It takes in 3 parameters:

(string) type: The input type - text, number, password...
(string) name: Input name name="..."
(array, optional) attributes for input tag

$ui::input("text", "username", [
	"placeholder" => "mychi.darko"
]);

1
2
3

input() also takes in a label attribute which creates a label element.

$ui::input("text", "username", [
	"placeholder" => "mychi.darko",
	"label" => "Enter Your Username"
]);

1
2
3
4

# label

This is the equivalent of <label>. It takes in 3 parameters:

(string) label: The label text
(string, optional) for: for="..."
(array, optional) attributes for label tag

$ui::label("Enter Your Password", "password");

# button

This is the equivalent of <button>. It takes in 2 parameters:

(string) Text on button
(array, optional) Attributes

$ui::button("Click Me!", ["style" => "background: gold;"]);

# Custom Elements

Basic Usage Custom Elements Blade Templating Session Using a database

Built with ❤ by Mychi Darko

← Your First Leaf UI Core Concepts →

# Basic Usage

# Structural HTML Tags

# html

# head

# body

# header

# nav

# footer

# aside

# br

# hr

# a

# div

# span

# section

# hgroup

# h1-h6

# blockquote

# p

# article

# details

# summary

# Meta-data HTML Tags

# title

# Meta

# Link

# Using Styles

# Using Scripts

# base

# Formatting Tags

# tt

# b

# i

# u

# small

# sub

# sup

# Embedded Content Tags

# Figure

# Img

# Form Tags

# form

# input

# label

# button

# Custom Elements