moonspot/component

Library for creating HTML components in PHP

Installs: 21

Dependents: 1

Suggesters: 0

Security: 0

Stars: 0

Watchers: 0

Forks: 0

Open Issues: 0

pkg:composer/moonspot/component

1.0.1 2025-07-04 20:15 UTC

This package is auto-updated.

Last update: 2025-10-05 19:16:34 UTC


README

A library for creating HTML components in PHP.

Creating consitent HTML components is important for good user experience. This library aims to make creating those components easier. It is the result of work I have done for years on different projects. A prime reason for this library and some of the techniques it uses is performance.

Example

Text Input

use Moonspot\Component\ComponentAbstract;

class TextInput extends ComponentAbstract {

    // Define the attributes for the component as public properties
    // id and class are defined in the parent class for all components.
    public string   $type      = 'text';
    public string   $name      = '';
    public bool     $required  = false;
    public int|null $minlength = null;
    public int|null $maxlength = null;
    public int|null $size      = null;

    // For other settings, define them as protected properties
    protected string $label = '';

    // function where the markup is defined
    public function markup() {
        ?>
        <label for="<?=htmlspecialchars($this->id)?>"><?=htmlspecialchars($this->label)?></label><br> 
        <input <?=$this->attributes()?> />
        <?php
    }

    // An inline style or a link tag to a css file can be used here.
    // Either way, it will only be included once in the output. There
    // is also a similar function named "script" for loading script tags.
    public static function css() {
        ?>
        <style>
            input[type=text] {
                font-size: 14px;
            }
        </style>
        <?php
    }
}

TextInput::render(attributes: [
    'id' => 'myinput1'
]);

TextInput::render(attributes: [
    'id' => 'myinput2'
]);

Output:

        <style>
            input[type=text] {
                font-size: 14px;
            }
        </style>
        <input id="myinput1" type="text" />
        <input id="myinput2" type="text" />