👻

【laravel初心者】Blade Componentsを知る 1

2024/04/18に公開

Laravel

tech

Blade Components と Blade Templates の違い

参考記事

LaravelのBlade Componentsを使いこなすための基礎

基本

テンプレート側

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ $title }}</title>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>

<body>
  <p>サイドバーです。</p>
  {{ $sidebar }}

  {{ $slot }}
</body>

</html>

view側

// 継承したいテンプレートを`<x-テンプレートのファイル名></x-テンプレートのファイル名>`で指定する
<x-app>
</x-app>  

// 継承したテンプレートの{{ $slot }}に記述を流し込む
<x-app>
  $slotに流し込む記述
</x-app>

// 継承したテンプレートの{{ $変数名 }}に記述を流し込む
<x-app>
  <x-slot name="変数名1">
    $変数名に流し込む記述
  </x-slot>

  <x-slot name="変数名2">
    $変数名に流し込む記述
  </x-slot>
</x-app>

その他のコンテンツの渡し方

view側

// タグの属性名に変数名、値に渡すコンテンツを指定する
<x-app>
  <h1 class="text-2xl">Laravel Components</h1>
  <x-alert message="これはアラートメッセージです。" />
</x-app>

// Laravel上で定義されている変数を利用する場合は属性値の前に:を付ける
<x-app>
  <h1 class="text-2xl">Laravel Components</h1>
  <x-alert :message="$message" />
</x-app>

// テンプレート側
// @propsディレクティブでデフォルト値を設定できる
@props(['message' => 'このメッセージはデフォルトです。' ])
<div class="flex justify-between p-4 items-center bg-red-500 text-white">
  <div>{{ $message }}</div>
  <button>×</button>
</div>

// テンプレート側
// {{}}で動的に変化させる
@props([
  'message' => 'このメッセージはデフォルトです。',
  'type' => 'success' 
  ])

<div class="flex justify-between p-4 items-center {{ $type=='success' ? 'bg-green-500' : 'bg-red-500' }} text-white">
  <div>{{ $message }}</div>
  <button>×</button>
</div>

// テンプレート側
// @phpディレクティブで動的に変化させる
@props([
  'message' => 'このメッセージはデフォルトです。',
  'type' => 'success' 
  ])

@php
 $addClass = 'bg-yellow-500';
@endphp

<div class="flex justify-between p-4 items-center {{ $addClass }} text-white">
  <div>{{ $message }}</div>
  <button>×</button>
</div>

Blade Components と Blade Templates の違い

参考記事

基本

その他のコンテンツの渡し方

Discussion