用户代理

功能

• 根据 UserAgent 不同显示的屏幕也可以在 Storybook 中配置。
• 除了简单地分析手机是否基于屏幕尺寸，页面本身也可以被识别为手机。
• 您可以使用它，无需安装额外的库。

支持

Storybook 版本	附加组件版本
v8	npm i -D storybook-addon-useragent@8
v7	npm i -D storybook-addon-useragent@7
v6	npm i -D storybook-addon-useragent@6

安装和设置

npm

npm i storybook-addon-useragent -D

yarn

yarn add storybook-addon-useragent -D

在 .storybook/main.js 中将其添加到附加组件中。

module.exports = {
  ...
  addons: [..., "storybook-addon-useragent"],
  ...
};

用法

自定义列表

您可以将列表项更改为任何您想要的数据。

.storybook/userAgent.js

export const customUserAgents = [
  {
    name: "Windows_7-IE_11",
    userAgent:
      "Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko",
  },
];

.storybook/preview.js

import { customUserAgents } from "./userAgent";

export const parameters = {
  ...
  userAgent: customUserAgents,
};

在 stories 中设置为默认值

您可以为故事指定默认 UserAgent 值。

列表中不存在的项目也可以指定。

import React from "react";
import { UserAgentExample } from "./UserAgentExample";

export default {
  title: "Example/UserAgentExample",
  component: UserAgentExample,
  argTypes: {
    useragent: { control: "text" },
  },
};

const Template = (args) => <UserAgentExample {...args} />;

export const IOS = Template.bind({});
IOS.args = {
  useragent:
    "Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1 Mobile/15E148 Safari/604.1",
};