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']);

You can also remove a class or a set of classes previously added using a specific pattern.

$component->removeClass('btn-success');
$component->removeClass('btn-(success|primary)');

Adding Style

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

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

Attributes for Alpine.js

For convenient integration with the JavaScript framework Alpine.js, you can use methods for setting corresponding attributes.

x-data

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.

xData(null|array|string $data = null)
// title is a reactive variable inside
Div::make([])
    ->xData(['title' => 'Hello world'])

x-data specifying the component and its parameters:

xDataMethod(
    string $method,
    ...$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'])

x-if

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

xIf(
    string|Closure $variable,
    ?string $operator = null,
    ?string $value = null,
    bool $wrapper = true
)
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

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

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

x-html

x-html outputs the value.

xDisplay(
    string $value,
    bool $html = true
)
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),
 
    Div::make()
        ->xShow('type', '1')
        ->xDisplay('"Result:" + (price * rate)'),
])->xData([
    'price' => 0,
    'rate' => 90,
    'type' => '2',
]),