Nebucatnetzer/vuejs_course
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

lesson 109: adding slots

Browse Source
This commit is contained in:
Andreas Zweili 2021-02-06 17:24:16 +01:00
parent b19561ab39
commit 69e590ea13
4 changed files with 33 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
2021-02-06 cmp-adv-01-starting-setup/src/components/BadgeList.vue
View File

@ -1,26 +1,20 @@
<template> <template>
<section> <section>
<h2>Available Badges</h2> <base-card>
<ul> <h2>Available Badges</h2>
<li> <ul>
<base-badge type="admin" caption="ADMIN"></base-badge> <li>
</li> <base-badge type="admin" caption="ADMIN"></base-badge>
<li> </li>
<base-badge type="author" caption="AUTHOR"></base-badge> <li>
</li> <base-badge type="author" caption="AUTHOR"></base-badge>
</ul> </li>
</ul>
</base-card>
</section> </section>
</template> </template>
<style scoped> <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 h2 { section h2 {
margin: 0.5rem 0; margin: 0.5rem 0;
color: #3a3a3a; color: #3a3a3a;

17
2021-02-06 cmp-adv-01-starting-setup/src/components/BaseCard.vue Normal file
View File

@ -0,0 +1,17 @@
<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>

14
2021-02-06 cmp-adv-01-starting-setup/src/components/UserInfo.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<section> <section>
<div> <base-card>
<h3>{{ fullName }}</h3> <h3>{{ fullName }}</h3>
<base-badge :type="role" :caption="role.toUpperCase()"></base-badge> <base-badge :type="role" :caption="role.toUpperCase()"></base-badge>
</div> <p>{{ infoText }}</p>
<p>{{ infoText }}</p> </base-card>
</section> </section>
</template> </template>
@ -15,14 +15,6 @@ export default {
</script> </script>
<style> <style>
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 { section header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

2
2021-02-06 cmp-adv-01-starting-setup/src/main.js
View File

@ -2,9 +2,11 @@ import { createApp } from "vue";
import App from "./App.vue"; import App from "./App.vue";
import BaseBadge from "./components/BaseBadge.vue"; import BaseBadge from "./components/BaseBadge.vue";
import BaseCard from "./components/BaseCard.vue";
const app = createApp(App); const app = createApp(App);
app.component("base-badge", BaseBadge); app.component("base-badge", BaseBadge);
app.component("base-card", BaseCard);
app.mount("#app"); app.mount("#app");