javascript - Storybook 为一个故事预定义视口(viewport)/参数

Question

我有一个包含多个故事的故事。对于一个故事 (mobile)，我想预定义它的视口(viewport) - 我该怎么做？

这就是我的尝试:

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

Storybook 在其网站上使用 vieport addon 记录了此功能.

假设您已经在项目中安装了视口(viewport)插件，您可以使用默认的 viewports ，或自定义一个，并将其设置为默认值。

mobile1 高度:568px，宽度:320px 的示例默认视口(viewport)

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

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

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

示例自定义视口(viewport)

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"
    }
}