lesson 109: adding slots
This commit is contained in:
parent
b19561ab39
commit
69e590ea13
|
@ -1,26 +1,20 @@
|
|||
<template>
|
||||
<section>
|
||||
<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>
|
||||
<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>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<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 {
|
||||
margin: 0.5rem 0;
|
||||
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>
|
||||
<section>
|
||||
<div>
|
||||
<base-card>
|
||||
<h3>{{ fullName }}</h3>
|
||||
<base-badge :type="role" :caption="role.toUpperCase()"></base-badge>
|
||||
</div>
|
||||
<p>{{ infoText }}</p>
|
||||
<p>{{ infoText }}</p>
|
||||
</base-card>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
@ -15,14 +15,6 @@ export default {
|
|||
</script>
|
||||
|
||||
<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 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
|
@ -2,9 +2,11 @@ import { createApp } from "vue";
|
|||
|
||||
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");
|
||||
|
|
Reference in New Issue