storybook/docs/snippets/svelte/my-component-story-configure-viewports.native-format.mdx
2021-11-04 21:07:00 +00:00

38 lines
734 B
Plaintext

```html
<!-- MyComponent.stories.svelte -->
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
import MyComponent from "./MyComponent.svelte";
</script>
<Meta
title="MyComponent"
component={MyComponent}
parameters={{
//👇 The viewports object from the Essentials addon
viewport: {
//👇 The viewports you want to use
viewports: INITIAL_VIEWPORTS,
//👇 Your own default viewport
defaultViewport: 'iphone6',
},
}}
/>
<Template let:args>
<MyComponent {...args} />
</Template>
<Story
name="MyStory"
parameters={{
viewport: {
defaultViewport: 'iphonex',
},
}}
/>
```