lesson 109: adding slots
This commit is contained in:
parent
b19561ab39
commit
69e590ea13
|
@ -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;
|
||||||
|
|
|
@ -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>
|
|
@ -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,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");
|
||||||
|
|
Reference in New Issue