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

lesson 110: add named slots

This commit is contained in:
Andreas Zweili 2021-02-06 17:38:58 +01:00
parent 69e590ea13
commit 2aead5518b
3 changed files with 29 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,15 +1,18 @@
<template> <template>
<section> <section>
<base-card> <base-card>
<h2>Available Badges</h2> <template v-slot:header> <h2>Available Badges</h2> </template>
<ul>
<li> <template v-slot:default>
<base-badge type="admin" caption="ADMIN"></base-badge> <ul>
</li> <li>
<li> <base-badge type="admin" caption="ADMIN"></base-badge>
<base-badge type="author" caption="AUTHOR"></base-badge> </li>
</li> <li>
</ul> <base-badge type="author" caption="AUTHOR"></base-badge>
</li>
</ul>
</template>
</base-card> </base-card>
</section> </section>
</template> </template>

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

@ -1,5 +1,10 @@
<template> <template>
<div><slot></slot></div> <div>
<header>
<slot name="header"></slot>
</header>
<slot></slot>
</div>
</template> </template>
<script> <script>

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

@ -1,9 +1,17 @@
<template> <template>
<section> <section>
<base-card> <base-card>
<h3>{{ fullName }}</h3> <template v-slot:header>
<base-badge :type="role" :caption="role.toUpperCase()"></base-badge> <h3>{{ fullName }}</h3>
<p>{{ infoText }}</p> <base-badge
:type="role"
:caption="role.toUpperCase()"
></base-badge>
</template>
<template v-slot:default>
<p>{{ infoText }}</p>
</template>
</base-card> </base-card>
</section> </section>
</template> </template>