mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 10:51:05 +08:00
543fbbacb6
Expand the Vue3 Webpack5 Storybook template with comprehensive component support: - Add Button, Header, and Page components for JavaScript and TypeScript (4.9) - Include stories, components, and CSS files - Implement Storybook best practices with autodocs and component testing
74 lines
2.4 KiB
Vue
74 lines
2.4 KiB
Vue
<template>
|
|
<article>
|
|
<my-header :user="user" @login="onLogin" @logout="onLogout" @create-account="onCreateAccount" />
|
|
|
|
<section class="storybook-page">
|
|
<h2>Pages in Storybook</h2>
|
|
<p>
|
|
We recommend building UIs with a
|
|
<a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
|
|
<strong>component-driven</strong>
|
|
</a>
|
|
process starting with atomic components and ending with pages.
|
|
</p>
|
|
<p>
|
|
Render pages with mock data. This makes it easy to build and review page states without
|
|
needing to navigate to them in your app. Here are some handy patterns for managing page data
|
|
in Storybook:
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
Use a higher-level connected component. Storybook helps you compose such data from the
|
|
"args" of child component stories
|
|
</li>
|
|
<li>
|
|
Assemble data in the page component from your services. You can mock these services out
|
|
using Storybook.
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
Get a guided tutorial on component-driven development at
|
|
<a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer"
|
|
>Storybook tutorials</a
|
|
>
|
|
. Read more in the
|
|
<a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
|
|
.
|
|
</p>
|
|
<div class="tip-wrapper">
|
|
<span class="tip">Tip</span>
|
|
Adjust the width of the canvas with the
|
|
<svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
|
|
<g fill="none" fill-rule="evenodd">
|
|
<path
|
|
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"
|
|
id="a"
|
|
fill="#999"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
Viewports addon in the toolbar
|
|
</div>
|
|
</section>
|
|
</article>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import './page.css';
|
|
import MyHeader from './Header.vue';
|
|
|
|
import { ref } from 'vue';
|
|
|
|
const user = ref<{ name: string } | null>(null);
|
|
|
|
const onLogin = () => {
|
|
user.value = { name: 'Jane Doe' };
|
|
};
|
|
const onLogout = () => {
|
|
user.value = null;
|
|
};
|
|
const onCreateAccount = () => {
|
|
user.value = { name: 'Jane Doe' };
|
|
};
|
|
</script>
|