From 30949bb4a4b22fef5119f04c3e3276c42aaab085 Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Sun, 05 Jan 2025 17:22:15 +0100
Subject: [PATCH] named slot
---
09 - deeper into components/cmp-adv-01-starting-setup/src/components/BadgeList.vue | 28 ++++++++++++++++------------
09 - deeper into components/cmp-adv-01-starting-setup/src/components/BaseCard.vue | 3 +++
09 - deeper into components/cmp-adv-01-starting-setup/src/components/UserInfo.vue | 9 +++++----
3 files changed, 24 insertions(+), 16 deletions(-)
diff --git a/09 - deeper into components/cmp-adv-01-starting-setup/src/components/BadgeList.vue b/09 - deeper into components/cmp-adv-01-starting-setup/src/components/BadgeList.vue
index ae4c2af..7668882 100644
--- a/09 - deeper into components/cmp-adv-01-starting-setup/src/components/BadgeList.vue
+++ b/09 - deeper into components/cmp-adv-01-starting-setup/src/components/BadgeList.vue
@@ -1,25 +1,29 @@
<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>
- </base-card>
+ <base-card>
+ <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>
<style scoped>
-
section h2 {
margin: 0.5rem 0;
color: #3a3a3a;
}
+
ul {
list-style: none;
margin: 0;
diff --git a/09 - deeper into components/cmp-adv-01-starting-setup/src/components/BaseCard.vue b/09 - deeper into components/cmp-adv-01-starting-setup/src/components/BaseCard.vue
index 2a09d2b..6b5531d 100644
--- a/09 - deeper into components/cmp-adv-01-starting-setup/src/components/BaseCard.vue
+++ b/09 - deeper into components/cmp-adv-01-starting-setup/src/components/BaseCard.vue
@@ -1,5 +1,8 @@
<template>
<div>
+ <header>
+ <slot name="header"></slot>
+ </header>
<slot></slot>
</div>
</template>
diff --git a/09 - deeper into components/cmp-adv-01-starting-setup/src/components/UserInfo.vue b/09 - deeper into components/cmp-adv-01-starting-setup/src/components/UserInfo.vue
index 061b6ca..93be93e 100644
--- a/09 - deeper into components/cmp-adv-01-starting-setup/src/components/UserInfo.vue
+++ b/09 - deeper into components/cmp-adv-01-starting-setup/src/components/UserInfo.vue
@@ -1,11 +1,13 @@
<template>
<section>
<base-card>
- <header>
+ <template v-slot:header>
<h3>{{ fullName }}</h3>
<base-badge :type="role" :caption="role.toUpperCase()"></base-badge>
- </header>
- <p>{{ infoText }}</p>
+ </template>
+ <template v-slot:default>
+ <p>{{ infoText }}</p>
+ </template>
</base-card>
</section>
</template>
@@ -17,7 +19,6 @@
</script>
<style scoped>
-
section header {
display: flex;
justify-content: space-between;
--
Gitblit v1.8.0