Layouts and sections

Lead: This lead text is the default, because the page does not fill the lead section.

Sidebar: Default sidebar links + one link from this page

Note: This page fills the note section, so the note appears.

@extends and @section make a page use a layout, and @yield marks where each section appears. The layout on this page is itself a layout: it extends the app layout, and this page extends it. Propel follows the chain from the page up to the app.

@yield with a default

A default prints when no section fills the name. The heading above, the lead text and the sidebar all come from that.

<title>@yield('title', 'Propel')</title>

The lead text below is the default from the demo layout, because this page does not fill the lead section.

@parent

Inside a section, @parent prints what the same section contains one level up. The sidebar on this page adds to the demo layout's default links, instead of replacing them.

@section('sidebar')
  @parent
  <span>Extra link from this page</span>
@endsection

@show

In a layout, @section with @show defines a section and renders it where it stands. A page that fills the section replaces the default, and @parent keeps the default inside the page's version. Rendering the layout alone shows the default.

@section('sidebar')
  Default links
@show

@hasSection and @sectionMissing

Check whether a page filled a section. The note on this page appears because the page fills the note section.

@hasSection('note')
  <p>@yield('note')</p>
@endif

@sectionMissing is the opposite. It renders when the page did not fill the section.

@sectionMissing('note')
  <p>This page has no note.</p>
@endif

@include

Renders another view in place. The partial sees the same data as the page, and the loop variables of the loop it is in.

@include('partials.badge')

Live example

Included partial for: Layouts and sections

@push, @prepend and @stack

A page pushes content into a named stack, and the layout prints the stack. Scripts are the usual case. Pushes from the page are printed even when the layout renders them before the page's own content. @prepend puts content at the start of the stack.

@push('scripts')
  <script src="/chart.js"></script>
@endpush

The layout prints the stack with @stack:

<footer>@stack('scripts')</footer>

A page can also prepend:

@prepend('scripts')
  <script src="/first.js"></script>
@endprepend

Live example

The footer of this demo layout prints the script this page pushed. It is a text footer here, so the script does not run.

Views from a package: name::view

A package can ship its own views and layout. It registers them under a name, and the app refers to them with that name and two colons, as Laravel does with loadViewsFrom. Ignite does this for its admin panel.

propel_rocket::register_namespace("ignite", "vendor/ignite/views");

Then a view can extend the package's layout:

@extends('ignite::layouts.app')

@section('content')
  <p>The panel's content.</p>
@endsection

A name with no namespace still reads from resources/views/. The part before :: may only contain letters, digits, _ and -, and the view part follows the same rules as any name. A namespace that was never registered is a render error, and the error page names it.

Scripts pushed to this page: pushed from this page