storybook/docs/snippets/vue/list-story-template.3.ts-4-9.mdx
Kyle Gach 975ad7604b Update TOC to use heading type
- Rename `introduction.md`, `overview.md`, `how-to-contribute.md` pages -> `index.md` pages
- Add all-new `index.md` pages for Sharing and API
- Find/replace `introduction.md`/`overview.md` -> `index.md`
- Find/replace `/introduction`/`/overview` -> `/`
- Add `hideRendererSelector: true` to frontmatter of (some) pages that aren't conditional on renderer
2023-11-27 20:57:51 -07:00

58 lines
1.1 KiB
Plaintext

```ts
// List.stories.ts
import type { Meta, StoryObj } from '@storybook/vue3';
import List from './List.vue';
import ListItem from './ListItem.vue';
//👇 Imports a specific story from ListItem stories
import { Unchecked } from './ListItem.stories';
const meta = {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
} satisfies Meta<typeof List>;
export default meta;
type Story = StoryObj<typeof meta>;
//👇 The ListTemplate construct will be spread to the existing stories.
export const ListTemplate: Story = {
render: (args) => ({
components: { List, ListItem },
setup() {
return { ...args };
},
template: `
<List v-bind="args">
<div v-for="item in items" :key="item.title">
<ListItem :item="item"/>
</div>
</List>
`,
}),
};
export const Empty: Story = {
...ListTemplate,
args: {
items: [],
},
};
export const OneItem: Story = {
...ListTemplate,
args: {
items: [
{
...Unchecked.args,
},
],
},
};
```