-
-
Save martinandersen3d/706fe65c0d24d2d2f1020fc4cd63e0b2 to your computer and use it in GitHub Desktop.
Laravel 5.4 Components & Slots
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="alert alert-{{$type or 'success'}}" role="alert"> | |
@if (isset($title)) | |
<h2>{{$title}}</h2> | |
@endif | |
{{$slot}} | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment