Merge pull request #83 from Gummibeer/patch-1

add comments and result
spatie · Aug 16, 2019 · 7f604eb · 7f604eb
2 parents ccf2847 + 987fdef
commit 7f604eb
Showing 1 changed file with 27 additions and 2 deletions.
diff --git a/docs/basic-usage/using-slots.md b/docs/basic-usage/using-slots.md
@@ -16,7 +16,7 @@ BladeX support slots too. This layout component
             {{ $sidebar }}
         </div>
         <div class="w-2/3">
-            {{ $slot }}
+            {!! $slot !!}
         </div>
     </div>
     <footer>
@@ -29,15 +29,40 @@ can be used in your views like this:
 
 ```html
 <layout title="Zed's chopper">
+    <!-- is available as $sidebar - the name is used as variable name -->
     <slot name="sidebar">
         <ul>
             <li>Home</li>
             <li>Contact</li>
         </ul>
     </slot>
 
+    <!-- everything else inside a component is available as $slot -->
     <main class="content">Whose motorcycle is this?</main>
 
+    <!-- is available as $footer - the name is used as variable name -->
     <slot name="footer">It's not a motorcycle honey, it's a chopper.</slot>
 </layout>
-```
+```
+
+and will result in:
+
+```html
+<div>
+    <h1>Zed's chopper</h1>
+    <div class="flex">
+        <div class="w-1/3">
+            <ul>
+                <li>Home</li>
+                <li>Contact</li>
+            </ul>
+        </div>
+        <div class="w-2/3">
+            <main class="content">Whose motorcycle is this?</main>
+        </div>
+    </div>
+    <footer>
+        It's not a motorcycle honey, it's a chopper.
+    </footer>
+</div>
+```