From 394e8ddcebc1c1affa7f23bf51ae927ed07125ea Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Sun, 05 Jan 2025 17:13:01 +0100
Subject: [PATCH] introducing slot
---
09 - deeper into components/cmp-adv-01-starting-setup/src/components/BaseCard.vue | 21 +++++++++++++++++++++
09 - deeper into components/cmp-adv-01-starting-setup/src/main.js | 2 ++
09 - deeper into components/cmp-adv-01-starting-setup/src/components/UserInfo.vue | 19 +++++++------------
3 files changed, 30 insertions(+), 12 deletions(-)
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
new file mode 100644
index 0000000..2a09d2b
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-01-starting-setup/src/components/BaseCard.vue
@@ -0,0 +1,21 @@
+<template>
+ <div>
+ <slot></slot>
+ </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped>
+div {
+ margin: 2rem auto;
+ max-width: 30rem;
+ border-radius: 12px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ padding: 1rem;
+}
+</style>
\ No newline at end of file
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 04dcf0f..061b6ca 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,10 +1,12 @@
<template>
<section>
- <header>
- <h3>{{ fullName }}</h3>
- <base-badge :type="role" :caption="role.toUpperCase()"></base-badge>
- </header>
- <p>{{ infoText }}</p>
+ <base-card>
+ <header>
+ <h3>{{ fullName }}</h3>
+ <base-badge :type="role" :caption="role.toUpperCase()"></base-badge>
+ </header>
+ <p>{{ infoText }}</p>
+ </base-card>
</section>
</template>
@@ -15,13 +17,6 @@
</script>
<style scoped>
-section {
- margin: 2rem auto;
- max-width: 30rem;
- border-radius: 12px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
- padding: 1rem;
-}
section header {
display: flex;
diff --git a/09 - deeper into components/cmp-adv-01-starting-setup/src/main.js b/09 - deeper into components/cmp-adv-01-starting-setup/src/main.js
index fd9f70c..8baa16e 100644
--- a/09 - deeper into components/cmp-adv-01-starting-setup/src/main.js
+++ b/09 - deeper into components/cmp-adv-01-starting-setup/src/main.js
@@ -2,10 +2,12 @@
import App from './App.vue';
import BaseBadge from './components/BaseBadge.vue';
+import BaseCard from './components/BaseCard.vue';
const app = createApp(App);
app.component('base-badge', BaseBadge);
+app.component('base-card', BaseCard);
app.mount('#app');
--
Gitblit v1.8.0