From 2aead5518ba041ac20c278b3b815ba0c4139631f Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Sat, 6 Feb 2021 17:38:58 +0100
Subject: [PATCH] lesson 110: add named slots

---
 .../src/components/BadgeList.vue              | 21 +++++++++++--------
 .../src/components/BaseCard.vue               |  7 ++++++-
 .../src/components/UserInfo.vue               | 14 ++++++++++---
 3 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/2021-02-06 cmp-adv-01-starting-setup/src/components/BadgeList.vue b/2021-02-06 cmp-adv-01-starting-setup/src/components/BadgeList.vue
index 910c4f6..870a90b 100644
--- a/2021-02-06 cmp-adv-01-starting-setup/src/components/BadgeList.vue	
+++ b/2021-02-06 cmp-adv-01-starting-setup/src/components/BadgeList.vue	
@@ -1,15 +1,18 @@
 <template>
     <section>
         <base-card>
-            <h2>Available Badges</h2>
-            <ul>
-                <li>
-                    <base-badge type="admin" caption="ADMIN"></base-badge>
-                </li>
-                <li>
-                    <base-badge type="author" caption="AUTHOR"></base-badge>
-                </li>
-            </ul>
+            <template v-slot:header> <h2>Available Badges</h2> </template>
+
+            <template v-slot:default>
+                <ul>
+                    <li>
+                        <base-badge type="admin" caption="ADMIN"></base-badge>
+                    </li>
+                    <li>
+                        <base-badge type="author" caption="AUTHOR"></base-badge>
+                    </li>
+                </ul>
+            </template>
         </base-card>
     </section>
 </template>
diff --git a/2021-02-06 cmp-adv-01-starting-setup/src/components/BaseCard.vue b/2021-02-06 cmp-adv-01-starting-setup/src/components/BaseCard.vue
index c1d1b2f..a13c894 100644
--- a/2021-02-06 cmp-adv-01-starting-setup/src/components/BaseCard.vue	
+++ b/2021-02-06 cmp-adv-01-starting-setup/src/components/BaseCard.vue	
@@ -1,5 +1,10 @@
 <template>
-    <div><slot></slot></div>
+    <div>
+        <header>
+            <slot name="header"></slot>
+        </header>
+        <slot></slot>
+    </div>
 </template>
 
 <script>
diff --git a/2021-02-06 cmp-adv-01-starting-setup/src/components/UserInfo.vue b/2021-02-06 cmp-adv-01-starting-setup/src/components/UserInfo.vue
index f00ec32..db9c060 100644
--- a/2021-02-06 cmp-adv-01-starting-setup/src/components/UserInfo.vue	
+++ b/2021-02-06 cmp-adv-01-starting-setup/src/components/UserInfo.vue	
@@ -1,9 +1,17 @@
 <template>
     <section>
         <base-card>
-            <h3>{{ fullName }}</h3>
-            <base-badge :type="role" :caption="role.toUpperCase()"></base-badge>
-            <p>{{ infoText }}</p>
+            <template v-slot:header>
+                <h3>{{ fullName }}</h3>
+                <base-badge
+                    :type="role"
+                    :caption="role.toUpperCase()"
+                ></base-badge>
+            </template>
+
+            <template v-slot:default>
+                <p>{{ infoText }}</p>
+            </template>
         </base-card>
     </section>
 </template>