Атрибут attributes

Атрибут attributes класса Component предоставляет доступ к коллекции HTML-атрибутов, переданных компоненту в Blade-шаблоне. Он доступен внутри класса компонента через свойство $attributes и возвращает экземпляр класса IlluminateViewComponentAttributeBag. Атрибут позволяет выполнять различные операции с переданными атрибутами, такие как проверка наличия, добавление новых, объединение и преобразование в строку. При рендеринге компонента все атрибуты автоматически выводятся в корневой элемент, что упрощает работу с классами CSS, идентификаторами, data-атрибутами и другими HTML-атрибутами.

Синтаксис

<?php
	// В классе компонента
	$this->attributes
?>

Пример

Давайте создадим компонент для кнопки, который будет принимать атрибуты извне:

<?php
	namespace AppViewComponents;
	
	use IlluminateViewComponent;
	
	class Button extends Component
	{
		public $type;
		
		public function __construct($type = 'button')
		{
			$this->type = $type;
		}
		
		public function render()
		{
			return view('components.button');
		}
	}
?>

<button type="{{ $type }}" {{ $attributes->merge(['class' => 'btn']) }}>
	{{ $slot }}
</button>

<x-button class="btn-primary" id="submit-btn">
	Submit
</x-button>

Результат выполнения кода:

<button type="button" class="btn btn-primary" id="submit-btn">
	Submit
</button>

Пример

Проверим наличие атрибута и получим его значение внутри класса компонента:

<?php
	namespace AppViewComponents;
	
	use IlluminateViewComponent;
	
	class Alert extends Component
	{
		public $type;
		public $dismissible;
		
		public function __construct($type = 'info')
		{
			$this->type = $type;
		}
		
		public function render()
		{
			$this->dismissible = $this->attributes->has('data-dismissible');
			
			return view('components.alert');
		}
	}
?>

<div {{ $attributes->merge(['class' => "alert alert-{$type}"]) }}>
	@if ($dismissible)
		<button class="close">×</button>
	@endif
	{{ $slot }}
</div>

<x-alert class="custom-alert" data-dismissible="true">
	This is an alert message.
</x-alert>

Результат выполнения кода:

<div class="alert alert-info custom-alert" data-dismissible="true">
	<button class="close">×</button>
	This is an alert message.
</div>

Пример

Объединим атрибуты с условным добавлением класса:

<?php
	namespace AppViewComponents;
	
	use IlluminateViewComponent;
	
	class Card extends Component
	{
		public $header;
		public $footer;
		public $shadow;
		
		public function __construct($header = null, $footer = null, $shadow = false)
		{
			$this->header = $header;
			$this->footer = $footer;
			$this->shadow = $shadow;
		}
		
		public function render()
		{
			$classes = ['card'];
			
			if ($this->shadow) {
				$classes[] = 'shadow-lg';
			}
			
			$this->attributes = $this->attributes->merge([
				'class' => implode(' ', $classes)
			]);
			
			return view('components.card');
		}
	}
?>

<div {{ $attributes }}>
	@if ($header)
		<div class="card-header">
			{{ $header }}
		</div>
	@endif
	<div class="card-body">
		{{ $slot }}
	</div>
	@if ($footer)
		<div class="card-footer">
			{{ $footer }}
		</div>
	@endif
</div>

<x-card header="Card Title" :shadow="true" class="border-primary">
	Card content goes here.
</x-card>

Результат выполнения кода:

<div class="card shadow-lg border-primary">
	<div class="card-header">
		Card Title
	</div>
	<div class="card-body">
		Card content goes here.
	</div>
</div>

Смотрите также

класс Component,
от которого наследуются все компоненты
атрибут slot,
для передачи содержимого в компонент
метод render,
определяет представление компонента
метод shouldRender,
условно отключает рендеринг компонента