index.html 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <link rel="stylesheet" href="../lib/bulma-0.2.3.css" />
  7. <!-- https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css" -->
  8. <link rel="stylesheet" href="../styles.css" />
  9. <link rel="stylesheet" href="styles.css" />
  10. </head>
  11. <body>
  12. <nav>
  13. <h1><span class="index">14</span>Named slots in a nutshell</h1>
  14. <ul>
  15. <li><a href="../lesson13">Prev</a></li>
  16. <li><a href="../lesson15">Next</a></li>
  17. </ul>
  18. </nav>
  19. <div id="root" class="container">
  20. <modal>
  21. <template slot="header">Modal title</template>
  22. <!-- Default slot can use a default value. Comments don't count. -->
  23. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  24. <!-- To use default content on a non-default slot, just don't emit it -->
  25. <template slot="footer">
  26. <a class="button is-primary">Save changes</a>
  27. <a class="button">Cancel</a>
  28. </template>
  29. </modal>
  30. </div>
  31. <script src="../lib/vue-2.1.3.js"></script>
  32. <script src="code.js"></script>
  33. </body>
  34. </html>