Viewport

Viewportstorybookjs

StoryBook에서 작업을 할 때, 사용자 정의 중단점을 만들고 싶다면 preview.js 파일에 등록하여 만들 수 있다.

// .storybook/preview.js

const customViewports = {
  kindleFire2: {
    name: 'Kindle Fire 2',
    styles: {
      width: '600px',
      height: '963px',
    },
  },
  kindleFireHD: {
    name: 'Kindle Fire HD',
    styles: {
      width: '533px',
      height: '801px',
    },
  },
};

// .storybook/preview.js

export const parameters = {
  viewport: { viewports: customViewports },
};