Static Element

A demonstration of static UI components available in Laravel VueForm, including plain text, headings, horizontal rules, and images. This example showcases how StaticElement can be used to insert non-interactive content into forms, making it ideal for creating informational sections, visual dividers, instructional text, and branding elements within complex form layouts. Documentation

🧱 Import Class

use VueFormLaravel\Abstracts\VueFormBuilder;
use VueFormLaravel\Elements\Static\StaticElement;
use VueFormLaravel\Elements\Vueform;

🧩 Example

• Input
• Output

class StaticElementForm extends VueFormBuilder
{
    protected function buildForm()
    {
        return Vueform::build()
            ->schema([
                StaticElement::text('asdf'),
                StaticElement::h1('asdf'),
                StaticElement::hr(),
                StaticElement::img(
                    src: 'https://vueform.com/images/logo.svg',
                    height: 40,
                    width: 570
                )

            ]);
    }
}

⚙️ Allowed Attributes

⚡ Events

The following events Documentation are available for this element:

🔔 Example Usage of PHP

StaticElement::name('example')
    ->events([
        'beforeCreate' => 'handleBeforeCreate',
        'created' => 'handleCreated',
        'beforeMount' => 'handleBeforeMount',
        'mounted' => 'handleMounted',
        'beforeUpdate' => 'handleBeforeUpdate',
        'updated' => 'handleUpdated',
        'beforeUnmount' => 'handleBeforeUnmount',
        'unmounted' => 'handleUnmounted',
    ])

🔔 Example Usage of JavaScript

function handleBeforeCreate(el$) {
    // Your code here
}
function handleCreated(el$) {
    // Your code here
}
function handleBeforeMount(el$) {
    // Your code here
}
function handleMounted(el$) {
    // Your code here
}
function handleBeforeUpdate(el$) {
    // Your code here
}
function handleUpdated(el$) {
    // Your code here
}
function handleBeforeUnmount(el$) {
    // Your code here
}
function handleUnmounted(el$) {
    // Your code here
}
---

## ⚙️ Available Static Methods

| Method | Description |
| --- | --- |
| `text` | Generates a simple static text block without any HTML tag. |
| `h1` | Renders a bold level-one heading. |
| `h2` | Renders a level-two heading. |
| `h3` | Renders a level-three heading. |
| `h4` | Renders a level-four heading. |
| `p` | Renders a paragraph containing plain text. |
| `blockquote` | Renders a blockquote for quoted content. |
| `a` | Renders a hyperlink with configurable URL and target. |
| `img` | Displays an image with optional alt text, title, and dimensions. |
| `hr` | Renders a visual horizontal divider. |