# 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
]);
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"]);
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
]);
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;"]);
2
3
4
5
# header
This is the equivalent of <header>
. It takes in 2 parameters:
- (array, optional) Attributes
- (array) Children
$ui::header([attributes], [
// children here
]);
2
3
# nav
This is the equivalent of <nav>
. It takes in 2 parameters:
- (array, optional) Attributes
- (array) Children
$ui::nav([attributes], [
// children here
]);
2
3
# footer
This is the equivalent of <footer>
. It takes in 2 parameters:
- (array, optional) Attributes
- (array) Children
$ui::footer([attributes], [
// children here
]);
2
3
# aside
This is the equivalent of <aside>
. It takes in 2 parameters:
- (array, optional) Attributes
- (array) Children
$ui::aside([attributes], [
// children here
]);
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
]);
2
3
# div
This is the equivalent of <div>
. It takes in 2 parameters:
- (array, optional) Attributes
- (array) Children
$ui::div([attributes], [
// children here
]);
2
3
# span
This is the equivalent of <span>
. It takes in 2 parameters:
- (array, optional) Attributes
- (array) Children
$ui::span([attributes], [
// children here
]);
2
3
# section
This is the equivalent of <section>
. It takes in 2 parameters:
- (array, optional) Attributes
- (array) Children
$ui::section([attributes], [
// children here
]);
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]);
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
]);
2
3
# details
This is the equivalent of <details>
. It takes in 2 parameters:
- (array, optional) Attributes
- (array) Children
$ui::details([attributes], [
// children here
]);
2
3
# summary
This is the equivalent of <summary>
. It takes in 2 parameters:
- (array, optional) Attributes
- (array) Children
$ui::summary([attributes], [
// children here
]);
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
]);
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
]);
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"
]);
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"
]);
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