https://github.com/leafsphp/ui

Leaf UI is a PHP library for building user interfaces.
https://github.com/leafsphp/ui

frontend-framework leaf-ui php ui

Last synced: 2 months ago
JSON representation

Leaf UI is a PHP library for building user interfaces.

• Host: GitHub
• URL: https://github.com/leafsphp/ui
• Owner: leafsphp
• Created: 2020-05-23T15:47:51.000Z (over 4 years ago)
• Default Branch: next
• Last Pushed: 2023-04-18T01:20:14.000Z (over 1 year ago)
• Last Synced: 2024-05-23T07:01:42.623Z (8 months ago)
• Topics: frontend-framework, leaf-ui, php, ui
• Language: PHP
• Homepage: https://ui.leafphp.dev/
• Size: 794 KB
• Stars: 34
• Watchers: 4
• Forks: 3
• Open Issues: 5
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        



  



  

  




Leaf UI [WIP v0.2.0]


Leaf UI is a PHP library for building user interfaces.

Leaf UI doesn't need a new compiler or any extensive compiling, it's just the same old PHP you write everyday; as such, you can build full scalable Leaf UI powered apps or just sprinkle Leaf UI into your existing HTML/PHP code.

v0.2.0 of Leaf UI is currently in development, it is a complete rewrite of the library that comes with a lot of new features and a new API. Leaf UI v0.2.0 will allow you to build full scalable Leaf UI powered apps, write reactive UIs all in PHP. You can think of it as a PHP version of React.

## Installing Leaf UI

Like most PHP libraries, we recommend installing Leaf UI with the [Leaf CLI](https://cli.leafphp.dev):

```bash

leaf install ui@dev-next

```

Or with [composer](//getcomposer.org). Just open up your console and type:

```bash

composer require leafs/ui:dev-next

```

After this, you can use all of Leaf UI's methods and components.

View the [documentation here](https://staging.ui.leafphp.dev/)

## Building your first Leaf UI

Since Leaf UI is modelled after React, everything is a component. You can create your own components and handle your application state in them.

```php

count++;

    }

    public function decrement()

    {

        $this->count--;

    }

    public function render()

    {

        // your UI will go here

        return '

            

                


                    
Static text

                    -

                    
{{ $count }}

                    +

                

            

        ';

    }

}

```


This component renders some static text, a button to decrement a counter, a counter and a button to increment the counter. The counter is stored in the component's state and is updated when the buttons are clicked.

To actually make this work, you simply need to render this component wherever you want it to appear.

```php