故事連結擴充功能

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

框架支援

開始使用

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

yarn add -D @storybook/addon-links

在 .storybook/main.js 中

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

然後您可以在您的故事中匯入 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 中的任何故事。

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

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

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 函式

如果您想取得特定故事的 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 修飾器能夠使用資料屬性以宣告方式定義故事連結。以下是一個 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，則將保留目前的種類。

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

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