Story 連結擴充功能

Storybook 連結擴充功能可用於建立在 Storybook 中故事之間導航的連結。

框架支援

開始使用

透過新增 @storybook/addon-links 依賴項來安裝此擴充功能

yarn add -D @storybook/addon-links

在 .storybook/main.js 內

export default {
  addons: ['@storybook/addon-links'],
};

然後您可以在您的 stories 中導入 linkTo 並像這樣使用

import { linkTo } from '@storybook/addon-links';

export default {
  title: 'Button',
};

export const first = () => <button onClick={linkTo('Button', 'second')}>Go to "Second"</button>;
export const second = () => <button onClick={linkTo('Button', 'first')}>Go to "First"</button>;

請看一下 linkTo 函式

import { linkTo } from '@storybook/addon-links';

linkTo('Toggle', 'off');
linkTo(
  () => 'Toggle',
  () => 'off'
);
linkTo('Toggle'); // Links to the first story in the 'Toggle' kind

有了這個，您可以將元件中的事件連結到 Storybook 中的任何故事。

• 第一個參數是 story kind 名稱（您使用 title 命名的名稱）。
• 第二個（可選）參數是 story 名稱（您使用 exported name 命名的名稱）。如果省略第二個參數，連結將指向給定 kind 中的第一個故事。

您也可以為上述任何參數傳遞函式。該函式接受由事件發出的參數，並且應返回一個字串

import { linkTo } from '@storybook/addon-links';
import LinkTo from '@storybook/addon-links/react';

export default {
  title: 'Select',
};

export const index = () => (
  <select value="Index" onChange={linkTo('Select', (e) => e.currentTarget.value)}>
    <option>index</option>
    <option>first</option>
    <option>second</option>
    <option>third</option>
  </select>
);
export const first = () => <LinkTo story="index">Go back</LinkTo>;
export const second = () => <LinkTo story="index">Go back</LinkTo>;
export const third = () => <LinkTo story="index">Go back</LinkTo>;

hrefTo 函式

如果您想要取得特定 story 的 URL，可以使用 hrefTo 函式。它返回一個 promise，該 promise 解析為包含相對 URL 的字串

import { action } from '@storybook/addon-actions';
import { hrefTo } from '@storybook/addon-links';

export default {
  title: 'Href',
};

export const log = () => {
  hrefTo('Href', 'log').then(action('URL of this story'));

  return <span>See action logger</span>;
};

withLinks 裝飾器

withLinks 裝飾器啟用了一種使用資料屬性定義 story 連結的宣告式方法。以下是 React 中的範例，但它適用於任何框架

import { withLinks } from '@storybook/addon-links';

export default {
  title: 'Button',
  decorators: [withLinks],
};

export const first = () => (
  <button data-sb-kind="OtherKind" data-sb-story="otherStory">
    Go to "OtherStory"
  </button>
);

LinkTo 元件（僅限 React）

使用 hrefTo 的一種可能方式是建立一個使用原生 a 元素的元件，但會防止在普通的滑鼠左鍵點擊時重新載入頁面，以便仍然可以使用預設的瀏覽器方法在新分頁中開啟連結。可以從 @storybook/addon-links 套件導入此類元件的 React 實作

import LinkTo from '@storybook/addon-links/react';

export default {
  title: 'Link',
};

export const first = () => <LinkTo story="second">Go to Second</LinkTo>;
export const second = () => <LinkTo story="first">Go to First</LinkTo>;

它接受 a 元素的所有 props，以及 story 和 kind。如果省略 kind prop，將會保留目前的 kind。

<LinkTo
  kind="Toggle"
  story="off"
  target="_blank"
  title="link to second story"
  style={{ color: '#1474f3' }}
>
  Go to Second
</LinkTo>

若要為另一個框架實作此類元件，您需要在原生 a 元素上新增對 click 事件的特殊處理。請參閱 RoutedLink 原始碼 以供參考。