mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 07:01:27 +08:00
Vue stories
This commit is contained in:
tooppaaa
parent
b67c65f197
commit
0f943279b3
@ -1,43 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { linkTo } from '@storybook/addon-links';
|
||||
|
||||
import MyButton from './Button.vue';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
component: MyButton,
|
||||
};
|
||||
|
||||
const Template = (args) => ({
|
||||
props: Object.keys(args),
|
||||
components: { MyButton },
|
||||
template: '<my-button @click="onClick">{{children}}</my-button>',
|
||||
});
|
||||
|
||||
export const Text = Template.bind({});
|
||||
Text.args = {
|
||||
children: 'Button',
|
||||
onClick: action('onClick'),
|
||||
};
|
||||
|
||||
export const Emoji = Template.bind({});
|
||||
Emoji.args = {
|
||||
children: '😀 😎 👍 💯',
|
||||
};
|
||||
|
||||
export const TextWithAction = () => ({
|
||||
components: { MyButton },
|
||||
template: '<my-button @click="action">Trigger Action</my-button>',
|
||||
methods: { action: () => action('This was clicked')() },
|
||||
});
|
||||
|
||||
TextWithAction.storyName = 'With an action';
|
||||
TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
|
||||
|
||||
export const ButtonWithLinkToAnotherStory = () => ({
|
||||
components: { MyButton },
|
||||
template: '<my-button @click="action">Go to Welcome Story</my-button>',
|
||||
methods: { action: linkTo('example-introduction--page') },
|
||||
});
|
||||
|
||||
ButtonWithLinkToAnotherStory.storyName = 'button with link to another story';
|
||||
39
lib/cli/src/frameworks/vue/Button.stories.js
Normal file
39
lib/cli/src/frameworks/vue/Button.stories.js
Normal file
@ -0,0 +1,39 @@
|
||||
import MyButton from './Button.vue';
|
||||
|
||||
export default {
|
||||
title: 'Example/Button',
|
||||
component: MyButton,
|
||||
argTypes: {
|
||||
backgroundColor: { control: 'color' },
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args) => ({
|
||||
props: Object.keys(args),
|
||||
components: { MyButton },
|
||||
template:
|
||||
'<my-button @onClick="onClick" :label="label" :primary="primary" :size="size" :backgroundColor="backgroundColor" />',
|
||||
});
|
||||
|
||||
export const Primary = Template.bind({});
|
||||
Primary.args = {
|
||||
primary: true,
|
||||
label: 'Button',
|
||||
};
|
||||
|
||||
export const Secondary = Template.bind({});
|
||||
Secondary.args = {
|
||||
label: 'Button',
|
||||
};
|
||||
|
||||
export const Large = Template.bind({});
|
||||
Large.args = {
|
||||
size: 'large',
|
||||
label: 'Button',
|
||||
};
|
||||
|
||||
export const Small = Template.bind({});
|
||||
Small.args = {
|
||||
size: 'small',
|
||||
label: 'Button',
|
||||
};
|
||||
@ -1,29 +1,54 @@
|
||||
<template>
|
||||
<button class="button-styles" @click="onClick">
|
||||
<slot></slot>
|
||||
</button>
|
||||
<button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'my-button',
|
||||
import "./button.css";
|
||||
|
||||
methods: {
|
||||
onClick () {
|
||||
this.$emit('click');
|
||||
export default {
|
||||
name: "my-button",
|
||||
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
primary: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: "medium",
|
||||
validator: function(value) {
|
||||
return ["small", "medium", "marge"].indexOf(value) !== -1;
|
||||
}
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
classes() {
|
||||
return {
|
||||
"storybook-button": true,
|
||||
"storybook-button--primary": this.primary,
|
||||
"storybook-button--secondary": !this.primary,
|
||||
[`storybook-button--${this.size}`]: true
|
||||
};
|
||||
},
|
||||
style() {
|
||||
return {
|
||||
backgroundColor: this.backgroundColor
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick() {
|
||||
this.$emit("onClick");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.button-styles {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 3px;
|
||||
background-color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
font-size: 15pt;
|
||||
padding: 3px 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
21
lib/cli/src/frameworks/vue/Header.stories.js
Normal file
21
lib/cli/src/frameworks/vue/Header.stories.js
Normal file
@ -0,0 +1,21 @@
|
||||
import MyHeader from './Header';
|
||||
|
||||
export default {
|
||||
title: 'Example/Header',
|
||||
component: MyHeader,
|
||||
};
|
||||
|
||||
const Template = (args) => ({
|
||||
props: Object.keys(args),
|
||||
components: { MyHeader },
|
||||
template:
|
||||
'<my-header :user="user" @onLogin="onLogin" @onLogout="onLogout" @onCreateAccount="onCreateAccount" />',
|
||||
});
|
||||
|
||||
export const LoggedIn = Template.bind({});
|
||||
LoggedIn.args = {
|
||||
user: {},
|
||||
};
|
||||
|
||||
export const LoggedOut = Template.bind({});
|
||||
LoggedOut.args = {};
|
||||
59
lib/cli/src/frameworks/vue/Header.vue
Normal file
59
lib/cli/src/frameworks/vue/Header.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<header>
|
||||
<div class="wrapper">
|
||||
<div>
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path
|
||||
d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
|
||||
fill="#FFF"
|
||||
/>
|
||||
<path
|
||||
d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
|
||||
fill="#555AB9"
|
||||
/>
|
||||
<path
|
||||
d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
|
||||
fill="#91BAF8"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<h1>Acme</h1>
|
||||
</div>
|
||||
<div>
|
||||
<my-button size="small" @onClick="onLogout" label="Log out" v-if="user" />
|
||||
<my-button size="small" @onClick="onLogin" label="Log in" v-if="!user" />
|
||||
<my-button primary size="small" @onClick="onCreateAccount" label="Sign up" v-if="!user" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import "./header.css";
|
||||
import MyButton from "./Button.vue";
|
||||
|
||||
export default {
|
||||
name: "my-header",
|
||||
|
||||
components: { MyButton },
|
||||
|
||||
props: {
|
||||
user: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onLogin() {
|
||||
this.$emit("onLogin");
|
||||
},
|
||||
onLogout() {
|
||||
this.$emit("onLogout");
|
||||
},
|
||||
onCreateAccount() {
|
||||
this.$emit("onCreateAccount");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
24
lib/cli/src/frameworks/vue/Page.stories.js
Normal file
24
lib/cli/src/frameworks/vue/Page.stories.js
Normal file
@ -0,0 +1,24 @@
|
||||
import MyPage from './Page';
|
||||
import * as HeaderStories from './Header.stories';
|
||||
|
||||
export default {
|
||||
title: 'Example/Page',
|
||||
component: MyPage,
|
||||
};
|
||||
|
||||
const Template = (args) => ({
|
||||
props: Object.keys(args),
|
||||
components: { MyPage },
|
||||
template:
|
||||
'<my-page :user="user" @onLogin="onLogin" @onLogout="onLogout" @onCreateAccount="onCreateAccount" />',
|
||||
});
|
||||
|
||||
export const LoggedIn = Template.bind({});
|
||||
LoggedIn.args = {
|
||||
...HeaderStories.LoggedIn.args,
|
||||
};
|
||||
|
||||
export const LoggedOut = Template.bind({});
|
||||
LoggedOut.args = {
|
||||
...HeaderStories.LoggedOut.args,
|
||||
};
|
||||
104
lib/cli/src/frameworks/vue/Page.vue
Normal file
104
lib/cli/src/frameworks/vue/Page.vue
Normal file
@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<article>
|
||||
<my-header
|
||||
:user="user"
|
||||
@onLogin="onLogin"
|
||||
@onLogout="onLogout"
|
||||
@onCreateAccount="onCreateAccount"
|
||||
/>
|
||||
|
||||
<section>
|
||||
<h2>Pages in Storybook</h2>
|
||||
<p>
|
||||
We recommend building UIs with a
|
||||
<a
|
||||
href="https://blog.hichroma.com/component-driven-development-ce1109d56c8e"
|
||||
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://www.learnstorybook.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>Learn Storybook</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>
|
||||
import "./page.css";
|
||||
import MyHeader from "./Header.vue";
|
||||
|
||||
export default {
|
||||
name: "my-page",
|
||||
|
||||
components: { MyHeader },
|
||||
|
||||
props: {
|
||||
user: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onLogin() {
|
||||
this.$emit("onLogin");
|
||||
},
|
||||
onLogout() {
|
||||
this.$emit("onLogout");
|
||||
},
|
||||
onCreateAccount() {
|
||||
this.$emit("onCreateAccount");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user