# 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

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

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]);
1

# hr

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

  • (array, optional) Attributes
$ui::hr([attributes]);
1

# 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]);
1

# 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]);
1

# p

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

  • (array) Children
  • (array, optional) Attributes
$ui::p([...], [attributes]);
1

# 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");
1

# 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");
1

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");
1

# 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("...");
1

# 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");
1

# b

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

  • (string|array) Child/Children
  • (array, optional) Attributes
$ui::b("...");
1

# i

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

  • (string|array) Child/Children
  • (array, optional) Attributes
$ui::i("...");
1

# u

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

  • (string|array) Child/Children
  • (array, optional) Attributes
$ui::u("...");
1

# small

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

  • (string|array) Child/Children
  • (array, optional) Attributes
$ui::small("...");
1

# sub

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

  • (string|array) Child/Children
  • (array, optional) Attributes
$ui::sub("...");
1

# sup

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

  • (string|array) Child/Children
  • (array, optional) Attributes
$ui::sup("...");
1

# 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;"]);
1

# 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");
1

# 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;"]);
1

# Custom Elements



Basic Usage Custom Elements Blade Templating Session Using a database


Built with ❤ by Mychi Darko