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