Frontend for Miracle TV
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
 
 
 
 

89 lignes
2.5 KiB

  1. <template>
  2. <article>
  3. <my-header
  4. :user="user"
  5. @onLogin="onLogin"
  6. @onLogout="onLogout"
  7. @onCreateAccount="onCreateAccount"
  8. />
  9. <section>
  10. <h2>Pages in Storybook</h2>
  11. <p>
  12. We recommend building UIs with a
  13. <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
  14. <strong>component-driven</strong>
  15. </a>
  16. process starting with atomic components and ending with pages.
  17. </p>
  18. <p>
  19. Render pages with mock data. This makes it easy to build and review page states without
  20. needing to navigate to them in your app. Here are some handy patterns for managing page data
  21. in Storybook:
  22. </p>
  23. <ul>
  24. <li>
  25. Use a higher-level connected component. Storybook helps you compose such data from the
  26. "args" of child component stories
  27. </li>
  28. <li>
  29. Assemble data in the page component from your services. You can mock these services out
  30. using Storybook.
  31. </li>
  32. </ul>
  33. <p>
  34. Get a guided tutorial on component-driven development at
  35. <a href="https://www.learnstorybook.com" target="_blank" rel="noopener noreferrer"
  36. >Learn Storybook</a
  37. >
  38. . Read more in the
  39. <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
  40. .
  41. </p>
  42. <div class="tip-wrapper">
  43. <span class="tip">Tip</span>
  44. Adjust the width of the canvas with the
  45. <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
  46. <g fill="none" fill-rule="evenodd">
  47. <path
  48. d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
  49. id="a"
  50. fill="#999"
  51. />
  52. </g>
  53. </svg>
  54. Viewports addon in the toolbar
  55. </div>
  56. </section>
  57. </article>
  58. </template>
  59. <script>
  60. import './page.css';
  61. import MyHeader from './Header.vue';
  62. export default {
  63. name: 'my-page',
  64. components: { MyHeader },
  65. props: {
  66. user: {
  67. type: Object,
  68. },
  69. },
  70. methods: {
  71. onLogin() {
  72. this.$emit('onLogin');
  73. },
  74. onLogout() {
  75. this.$emit('onLogout');
  76. },
  77. onCreateAccount() {
  78. this.$emit('onCreateAccount');
  79. },
  80. },
  81. };
  82. </script>