Components

Component Attributes

Components offer a convenient mechanism for managing HTML classes, styles, and other attributes, allowing for more flexibility in configuring their behavior and appearance.

Adding

The method setAttribute() adds or alters a component's attribute.

setAttribute(string $name, string|bool $value)
  • $name - the name of the attribute,
  • $value - the value.
$component->setAttribute('data-id', '123');

Removing

The method removeAttribute() removes an attribute by its name.

removeAttribute(string $name)
  • $name - the name of the attribute.
$component->removeAttribute('data-id');

Iterable Attributes

The method iterableAttributes adds attributes necessary for working with iterable components.

iterableAttributes(int $level = 0)
  • $level - the level of nesting.

Massive Change

The method customAttributes() adds or replaces multiple attributes of a component.

customAttributes(array $attributes, bool $override = false)
  • $attributes - an array of attributes to be added,
  • $override - a key that allows overwriting existing attributes.
$component->customAttributes(['data-role' => 'admin'], true);

Merging Values

The method mergeAttribute() merges the value of an attribute with a new value, using the specified separator.

mergeAttribute(string $name, string $value, string $separator = ' ')
  • $name - the name of the attribute,
  • $value - the value,
  • $separator - the separator.
$component->mergeAttribute('class', 'new-class');

Adding Class

The method class() adds CSS classes to the attributes of a component.

class(string|array $classes)
  • $classes - classes that need to be added to the component.
$component->class(['btn', 'btn-primary']);

Adding Style

The method style adds CSS styles to the attributes of a component.

style(string|array $styles)
$component->style(['color' => 'red']);

Quick Attributes for Alpine.js

For convenient integration with the JavaScript framework Alpine.js, methods for setting corresponding attributes are used.

Description

Methods that allow convenient interaction with Alpine.js

x-data

xData(null|array|string $data = null)

Everything in Alpine starts with the directive x-data. The xData method defines an HTML fragment as an Alpine component and provides reactive data to reference this component.

Div::make([])->xData(['title' => 'Hello world']) // title is a reactive variable inside
xDataMethod(string $method, ...$parameters)

x-data specifying the component and its parameters

Div::make([])->xDataMethod('some-component', 'var', ['foo' => 'bar'])

x-model

x-model binds a field to a reactive variable

xModel(?string $column = null)
Div::make([
    Text::make('Title')->xModel()
])->xData(['title' => 'Hello world'])
 
// or
 
Div::make([
    Text::make('Name')->xModel('title')
])->xData(['title' => 'Hello world'])

x-if

xIf(
    string|Closure $variable,
    ?string $operator = null,
    ?string $value = null,
    bool $wrapper = true
)

x-if hides a field by removing it from the DOM

Div::make([
    Select::make('Type')->native()->options([1 => 1, 2 => 2])->xModel(),
    Text::make('Title')->xModel()->xIf('type', 1)
])->xData(['title' => 'Hello world', 'type' => 1])
 
// or
 
Div::make([
    Select::make('Type')->options([1 => 1, 2 => 2])->xModel(),
    Text::make('Title')->xModel()->xIf(fn() => 'type==2||type.value==2')
])->xData(['title' => 'Hello world', 'type' => 1])
 
// if you need to hide the field without a container
 
Div::make([
    Select::make('Type')->native()->options([1 => 1, 2 => 2])->xModel(),
    Text::make('Title')->xModel()->xIf('type', '=', 2, wrapper: false)
])->xData(['title' => 'Hello world', 'type' => 1])

x-show

xShow(
    string|Closure $variable,
    ?string $operator = null,
    ?string $value = null,
    bool $wrapper = true
)

x-show is the same as x-if, but it does not remove the element from the DOM; it only hides it.

xDisplay(string $value, bool $html = true)

x-html

x-html outputs the value

Div::make([
    Select::make('Type')
        ->native()
        ->options([
            1 => 'Paid',
            2 => 'Free',
        ])
        ->xModel(),
 
    Number::make('Cost', 'price')
        ->xModel()
        ->xIf('type', '1'),
 
    Number::make('Rate', 'rate')
        ->xModel()
        ->xIf('type', '1')
        ->setValue(90),
 
    LineBreak::make(),
 
    Div::make()
        ->xShow('type', '1')
        ->xDisplay('"Result:" + (price * rate)')
    ,
])->xData([
    'price' => 0,
    'rate' => 90,
    'type' => '2',
]),