ベースレイアウトの作成
helloapp.php
<html>
<head>
<title>@yield('tit;e')</title>
<style>
body {
font-size: 16pt;
color: #999;
margin: 5px;
}
h1 {
font-size: 50pt;
text-align: right;
color: #f6f6f6;
margin: -20px 0px -30px 0px;
letter-spacing: -4pt;
}
ul {
font-size: 12pt;
}
hr {
margin: 25px 100px ;
border-top: 1px dashed #ddd;
}
.menutitle {
font-size: 14pt;
font-weight: bold;
mergin: 0px;
}
.content {
margin: 10px;
}
.footer {
text-align: right;
font-size: 10pt;
margin: 10px;
border-bottom: solid 1px #ccc;
color: #ccc;
}
</style>
</head>
<body>
<h1>@yield('title')</h1>
@section('menubar')
<h2 class="menutitle">*メニュー</h2>
<ul>
<li>@show</li>
</ul>
<hr size="1">
<div class="content">
@yield('content')
</div>
<div class="footer">
@yield('footer')
</div>
</body>
</html>
継承レイアウトの作成
index.php
@extends('layouts.helloapp')
@section('title','Index')
@section('menubar')
@parent
インデックスページ
@endsection
@section('content')
<p>ここが本文のコンテンツです。</p>
<p>必要なだけ記述できます。</p>
@endsection
@section('footer')
copyright 2020 tuyano.
@endsection
コンポーネントを組み込む
index.php
@extends('layouts.helloapp')
@section('title','Index')
@section('menubar')
@parent
インデックスページ
@endsection
@section('content')
<p>ここが本文のコンテンツです。</p>
<p>必要なだけ記述できます。</p>
@component('components.message')
@slot('msg_title')
CAUTION
@endslot
@slot('msg_content')
これはメッセージの表示です。
@endslot
@endcomponent
@endsection
@section('footer')
copyright 2020 tuyano.
@endsection
message.php
<style>
.message {
border: double 4px #ccc;
margin: 10px;
padding: 10px;
background-color: #fafafa;
}
.msg_title {
margin: 10px 20px;
color: #999;
font-size: 16pt;
font-weght: bold;
}
.msg_content {
margin: 10px 20px;
color: #aaa;
font-size: 12pt;
}
</style>
<div class="message">
<p class="msg_title">{{$msg_title}}</p>
<p class="msg_content">{{$msg_content}}</p>
</div>
サブビューについて
index.php
@extends('layouts.helloapp')
@section('title','Index')
@section('menubar')
@parent
インデックスページ
@endsection
@section('content')
<p>ここが本文のコンテンツです。</p>
<p>必要なだけ記述できます。</p>
@include('components.message',['msg_title'=>'ok','msg_content'=>'サブビュー'])
@endsection
@section('footer')
copyright 2020 tuyano.
@endsection
@eachによるコレクションビュー
item.phpに繰り返し表示したいリストを記述する
item.php
<li>{{$item['name']}}[{{$item['mail']}}]</li>
@eachにて繰り返しビューを表示するように、
@section('content')の中を修正する。
index.php
**省略**
@section('content')
<p>ここが本文のコンテンツです。</p>
<p>必要なだけ記述できます。</p>
<ul>
@each('components.item',$data,'item')
</ul>
@endsection
**省略**
コントローラーに繰り返し表示したいデータを
Hello.indexに連想配列にて引き渡す。
HelloController.php
class HelloController extends Controller
{
public function index() {
$data = [
['name'=>'山田太郎','mail'=>'taro@yamada'],
['name'=>'田中はなこ','mail'=>'thanako@flower'],
['name'=>'鈴木さちこ','mail'=>'sachiko@happy']
];
return view('hello.index',['data'=>$data]);
}
}