我如何在 Laravel 中模板化部分内容?
How can i template a partial in Laravel?
我正在尝试弄清楚如何使用 laravel 的 blade 实现我的想法。我想制作一个可以扩展的可重用 table 模板(例如,不同页面的 header 和 body 不同)。根据我所做的研究,我认为模板仅用于整体页面结构,而不是部分组件。那么我该如何实现呢?下面的例子
假设我已经定义了一个带有一些样式和可拖动事件等的 table,我不想将此 table 复制并粘贴到每个具有不同 [=24] 的页面=] body 和 header.
<table class="table-selectable table table-hover bg-white">
<thead class="thead-dark">
<th>Image</th>
<th>Title</th>
<th>Tags</th>
**{{SOME APPENDED HEADERS DEPENDING ON PAGE}}**
</thead>
<tbody>
@if(!empty($objects))
@foreach($objects as $object)
<tr onclick="someFunction()">
<td class="align-middle"><img class="list-image" src="some-image.jpg"></td>
<td class="align-middle"><h5>Title</h5></td>
<td class="align-middle">
Tags
</td>
**{{SOME APPENDED BODY FIELDS DEPENDING ON PAGE}}**
</tr>
@endforeach
@endif
</tbody>
</table>
似乎是一项相当简单的任务,但我找不到解决方案。
Blade 允许开箱即用。
布局 ( Docs )
<!-- Stored in resources/views/layouts/app.blade.php -->
<html>
<head>
<title>App Name - @yield('title')</title>
</head>
<body>
@section('sidebar')
This is the master sidebar.
@show
<div class="container">
@yield('content')
</div>
</body>
</html>
包括 (Docs)
然后您可以使用 includes
将较小的模板添加到布局中
@include('view.name', ['some' => 'data'])
组件 (Docs)
最后,如果您想拥有更多控制权,请尝试使用组件。
注意:组件现在比以前复杂一点,但仍然向后兼容。所以你仍然可以像这样定义组件:
modal.blade(组件)
<!-- Modal -->
<div
class="modal fade {{ $class ?? '' }}"
id="{{ $id }}"
tabindex="-1"
role="dialog"
aria-labelledby="{{ $id }}Title"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered {{ $size ?? '' }}" role="document">
<div class="modal-content shadow">
<div class="modal-header">
<h5 class="modal-title font-weight-normal" id="{{ $id }}Title">
{{ $title }}
</h5>
<button type="button" class="close close-icon" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
@if ($form) {{ $action }} @endif
<div class="modal-body">
{{ $body }}
</div>
<div class="modal-footer">
{{ $footer }}
</div>
@if ($form) {!! Form::close() !!} @endif
</div>
</div>
</div>
用法
@component('components.modal', [
'id' => 'myModalID',
'class' => 'modal-info',
'form' => true
])
@slot('title')
My Modal
@endslot
@slot('action')
{!! Form::open([]) !!}
@endslot
@slot('body')
Some content
@endslot
@slot('footer')
<button type="submit" class="btn">
Submit
</button>
@endslot
@endcomponent
我正在尝试弄清楚如何使用 laravel 的 blade 实现我的想法。我想制作一个可以扩展的可重用 table 模板(例如,不同页面的 header 和 body 不同)。根据我所做的研究,我认为模板仅用于整体页面结构,而不是部分组件。那么我该如何实现呢?下面的例子
假设我已经定义了一个带有一些样式和可拖动事件等的 table,我不想将此 table 复制并粘贴到每个具有不同 [=24] 的页面=] body 和 header.
<table class="table-selectable table table-hover bg-white">
<thead class="thead-dark">
<th>Image</th>
<th>Title</th>
<th>Tags</th>
**{{SOME APPENDED HEADERS DEPENDING ON PAGE}}**
</thead>
<tbody>
@if(!empty($objects))
@foreach($objects as $object)
<tr onclick="someFunction()">
<td class="align-middle"><img class="list-image" src="some-image.jpg"></td>
<td class="align-middle"><h5>Title</h5></td>
<td class="align-middle">
Tags
</td>
**{{SOME APPENDED BODY FIELDS DEPENDING ON PAGE}}**
</tr>
@endforeach
@endif
</tbody>
</table>
似乎是一项相当简单的任务,但我找不到解决方案。
Blade 允许开箱即用。
布局 ( Docs )
<!-- Stored in resources/views/layouts/app.blade.php -->
<html>
<head>
<title>App Name - @yield('title')</title>
</head>
<body>
@section('sidebar')
This is the master sidebar.
@show
<div class="container">
@yield('content')
</div>
</body>
</html>
包括 (Docs)
然后您可以使用 includes
将较小的模板添加到布局中@include('view.name', ['some' => 'data'])
组件 (Docs)
最后,如果您想拥有更多控制权,请尝试使用组件。
注意:组件现在比以前复杂一点,但仍然向后兼容。所以你仍然可以像这样定义组件:
modal.blade(组件)
<!-- Modal -->
<div
class="modal fade {{ $class ?? '' }}"
id="{{ $id }}"
tabindex="-1"
role="dialog"
aria-labelledby="{{ $id }}Title"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered {{ $size ?? '' }}" role="document">
<div class="modal-content shadow">
<div class="modal-header">
<h5 class="modal-title font-weight-normal" id="{{ $id }}Title">
{{ $title }}
</h5>
<button type="button" class="close close-icon" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
@if ($form) {{ $action }} @endif
<div class="modal-body">
{{ $body }}
</div>
<div class="modal-footer">
{{ $footer }}
</div>
@if ($form) {!! Form::close() !!} @endif
</div>
</div>
</div>
用法
@component('components.modal', [
'id' => 'myModalID',
'class' => 'modal-info',
'form' => true
])
@slot('title')
My Modal
@endslot
@slot('action')
{!! Form::open([]) !!}
@endslot
@slot('body')
Some content
@endslot
@slot('footer')
<button type="submit" class="btn">
Submit
</button>
@endslot
@endcomponent