Skip to content

Instantly share code, notes, and snippets.

@jacurtis
Created February 16, 2017 16:37
Show Gist options
  • Star 13 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save jacurtis/09354df671e2c48eafe7a5cb91bb0f41 to your computer and use it in GitHub Desktop.
Save jacurtis/09354df671e2c48eafe7a5cb91bb0f41 to your computer and use it in GitHub Desktop.
Laravel 5.4 Components & Slots
<!-- This is the main Blade file that you want your components to show up in -->
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="{{mix('css/app.css')}}" rel="stylesheet" type="text/css">
<!-- Styles -->
</head>
<body>
<div class="container">
@component('components.jumbotron')
@slot('title')
Welcome DevMarketers!
@endslot
This is an awesome tutorial about all the new features that have arrived in Laravel 5.4. I recommend leaving a like if you enjoyed this video and a comment about what you want to learn next! Thanks so much for your support. Go DevMarketers!
@slot('button')
Click Like!
@endslot
@endcomponent
@component('components.alert')
@slot('type')
danger
@endslot --}}
@slot('title')
Error!
@endslot
We could not process your request...
@endcomponent
</div>
</body>
</html>
<div class="jumbotron">
<h1>{{$title}}</h1>
<p>{{$slot}}</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">{{$button or "Learn More"}}</a></p>
</div>
<div class="alert alert-{{$type or 'success'}}" role="alert">
@if (isset($title))
<h2>{{$title}}</h2>
@endif
{{$slot}}
</div>
@kreativjamesz
Copy link

Thank You for this. Gist.

@anbu369
Copy link

anbu369 commented Oct 27, 2017

Way better to understand than the official doc :) thanks man

@arthurtaras
Copy link

Perfect example, thank you very much! I wish the original documentation included examples of file names so I don't have to guess how to name and where to place components

@gausam
Copy link

gausam commented Jul 16, 2018

🥇 🙏

@luckytuvshee
Copy link

Thanks, Helped me a lot :))

@luis-bardales
Copy link

absolutely helpful. You're great!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment