UserAgent

功能

• 在 Storybook 中，也可以設定根據 UserAgent 顯示不同畫面的情況。
• 除了單純分析是否為行動裝置（依據螢幕尺寸），頁面本身也可以被識別為行動裝置。
• 您無需安裝額外的函式庫即可使用。

支援

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 中的 addons。

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 中設定為預設值

您可以為 story 指定預設的 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",
};