vuecasts.com - "Named Slots in a Nutshell" source code.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>My App</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css"> | |
| </head> | |
| <body> | |
| <div id="root" class="container"> | |
| <modal> | |
| <template slot="header"> | |
| My Title | |
| </template> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore cum, delectus quas possimus sint quisquam et, quam quia omnis, autem quae ipsa qui ex earum facilis sequi quidem mollitia culpa? | |
| <template slot="footer"> | |
| <a class="button is-primary">Save changes</a> | |
| <a class="button">Cancel</a> | |
| </template> | |
| </modal> | |
| </div> | |
| <script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> |
| Vue.component('modal', { | |
| template: ` | |
| <div class="modal is-active"> | |
| <div class="modal-background"></div> | |
| <div class="modal-card"> | |
| <header class="modal-card-head"> | |
| <p class="modal-card-title"> | |
| <slot name="header"></slot> | |
| </p> | |
| <button class="delete"></button> | |
| </header> | |
| <section class="modal-card-body"> | |
| <slot></slot> | |
| </section> | |
| <footer class="modal-card-foot"> | |
| <slot name="footer"> | |
| <a class="button is-primary">Okay</a> | |
| </slot> | |
| </footer> | |
| </div> | |
| </div> | |
| ` | |
| }) | |
| new Vue({ | |
| el: '#root', | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment