Storybook 为单个故事预定义的视口/参数

Question

I have one story including multiple stories. For one story ( mobile ) I want to predefine its viewport - how can I do so?

That's what I tried:

import React from "react";
import {Navigation, NavigationProps} from "./navigation";
import {boolean} from "@storybook/addon-knobs";

export default
{
    component: Navigation,
    title: "Molecule/Navigation",
};

export const responsive = () => {
    const props: NavigationProps = {
        isLoggedIn: true,
    }

    return <Navigation {...props} />;
};

export const mobile = () => {
    const props: NavigationProps = {
        isLoggedIn: boolean("Angemeldet", false),
    }

    return <Navigation {...props} />;
};

mobile.paramters = {
    viewport: {
        defaultViewport: "Small mobile"
    }
}

Answer 1

It`s not possible today. If it's important for you, you should create a feature request into the storybook github repository.

However, you can create a decorator which will change the viewport addon properties (honestly, I didn't test it)

import { useAddonState } from '@storybook/api';

mobile.decorators = [() => {
  const [state, setState] = useAddonState("storybook/viewport");
  if (state?.selected !== 'mobile') {
    setState({ selected: 'mobile', isRotated: false });
  }

  return { template: '<story/>' };
}];

Answer 2

Storybook documented this feature on their site using the vieport addon .

Assuming you already have the viewport addon installed in your project, you can use the default viewports , or a custom one, and set it as default.

Example default viewports for mobile1 height: 568px, width: 320px

export const mobile = () => {
    const props: NavigationProps = {
        isLoggedIn: boolean("Angemeldet", false),
    }

    return <Navigation {...props} />;
};

mobile.paramters = {
    viewport: {
        defaultViewport: "mobile1"
    }
}

Example custom viewports

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

export const mobile = () => {
    const props: NavigationProps = {
        isLoggedIn: boolean("Angemeldet", false),
    }

    return <Navigation {...props} />;
};

mobile.paramters = {
    viewport: {
        viewports: customViewports,
        defaultViewport: "kindleFireHD"
    }
}