x-app

by

以前に記録した<x-app-layout>は結局、layoutsのapp.blade.phpのこと。

ページの外郭を簡単に定義するには、viewsフォルダーにcomponentsフォルダーを作り、
その中に、app.blade.phpを作る。
すると、その後のページは<x-app>と</x-app>内に書けば良い。

<!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 rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
  {{ $slot }}
  <footer class="text-center w-full border-emerald-600 border-t mt-4 pt-2"><a href="/sl_admin"><button class="btnlist">Menu</button></a></footer>
</body>
</html>

この例だと、タイトルのSLOTと、固定のフッターを用意している。

作成するページでは、

<x-app>
    <x-slot name="title">
        ロッカー設置場所登録
    </x-slot>

内容を書いて、</x-app>で閉じる。

ap2.blade.phpを作ったら、<x-ap2>として、少し変えることができる。
参考するjavascriptがある場合など。