Writing your first page
Note
This guide assumes you have read the component documentation and understand the way Leaf UI components work.
As mentioned, every page in your Leaf UI is a component. This means that you can write your first page by creating a new component.
The essentials
The only difference between a page and a regular component is that while components can contain any markup, pages need to have an HTML body tag wrapping the rest of their markup.
This is because Leaf UI uses the body tag to track Leaf UIs pages and attach Leaf UI specific information to the component.
<body>
<h2>My first page</h2>
<p>My first page is a component</p>
</body>
And we can use this view in our component like this:
<?php
use Leaf\UI;
use Leaf\UI\Component;
class MyFirstPage extends Component
{
public $key = 'MyFirstPage';
public function render()
{
return UI::view('my-first-page.html');
}
}
Displaying the page
After creating the component in our application, we can load it into the DOM it by using the render method at the location you want to display the component.
use Leaf\UI;
...
UI::render(new MyFirstPage());