How can i template a partial in Laravel?

user_6668871 0
Viewed 1463

I am trying to figure out how to achieve what I have in mind using laravel's blade. I want to make a reusable table template that I can extend (for example different header and body for different pages). From the research I did, I figured that templates are only for overall page structure, not partial components. So how could I achieve this? Example below

Let's say I have defined a table with some styling and draggable events and so on, I don't wat to copy and paste this table to every page just with different table body and 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>

Seems like a fairly simple task but I could not find a solution for this.

laravel-blade laravel templating
1 Answers

Blade does allow for this out of the box.

Layouts ( 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>

includes (Docs)

You can then add smaller templates to your layout using includes

@include('view.name', ['some' => 'data'])

Components (Docs)

And finally, if you want you have even more control, try components.

Note: Components are now a little more complicated than they were but are still backward compatible. So you can still define components like so:

modal.blade (Component)

<!-- 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">&times;</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>

Usage

@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
user_51516860
Related