Директива @livewireStyles

Директива @livewireStyles подключает CSS-стили, необходимые для работы Livewire. Она генерирует тег <style> со служебными стилями, которые обеспечивают корректное отображение компонентов и их анимацию.

Синтаксис

@livewireStyles

Пример

Разместим директиву @livewireStyles в разделе <head> основного макета:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Мое приложение</title>
		@livewireStyles
	</head>
	<body>
		{{ $slot }}
		
		@livewireScripts
	</body>
</html>

Пример

Создадим компонент для отображения списка задач. Директиву @livewireStyles разместим в макете, а сам компонент вставим в представление через @livewire:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class TaskList extends Component
	{
		public $tasks = ['Задача 1', 'Задача 2', 'Задача 3'];
		
		public function render()
		{
			return view('livewire.task-list');
		}
	}
?>

<div>
	<ul>
		@foreach ($tasks as $task)
			<li>{{ $task }}</li>
		@endforeach
	</ul>
</div>

@extends('layouts.app')

@section('content')
	<div>
		<h1>Список задач</h1>
		@livewire('task-list')
	</div>
@endsection

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

<!DOCTYPE html>
<html>
	<head>
		<!-- Стили Livewire -->
		<style>
			/* служебные стили */
		</style>
	</head>
	<body>
		<div>
			<h1>Список задач</h1>
			<div>
				<ul>
					<li>Задача 1</li>
					<li>Задача 2</li>
					<li>Задача 3</li>
				</ul>
			</div>
		</div>
	</body>
</html>

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

директиву @livewireScripts,
которая подключает JavaScript-скрипты для работы Livewire
директиву @assets,
которая подключает ассеты Livewire
директиву @livewire,
которая выводит компонент на странице
директиву @this,
которая ссылается на текущий экземпляр компонента в JavaScript