StorybookのINITIAL_VIEWPORTSをストーリに指定する

概要

StoryBookのテストを作っているときに、画面サイズをIphone13 miniにしたいなと思った。 その時にどうやって画面サイズって調べるんだ?と思ったのでメモ

指定方法

StorybookのINITIAL_VIEWPORTSのVIEWをストーリ事に指定する方法について調査した。

StorybookのINITIAL_VIEWPORTSのVIEWをストーリ事に指定する方法について調査

以下のようにviewportを追加すれば良いらしい

export const SidebarOnLargeMobile = Template.bind({})
SidebarOnLargeMobile.parameters = { 
    viewport: { defaultViewport: 'ipad12p',
    }, 
}

ためしにIpadPro12.9-inで指定したら適用できなかったが、ipad12pなら良かった。

備考

一覧を探してみたところ以下の公式で定義されていた

storybook/code/addons/viewport/src/defaults.ts at next · storybookjs/storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation - storyboo...

github.com