Storyclip

用於將故事或故事的一部分擷取為影像的 Storybook 外掛。

1. 按下 c 鍵，或點擊「相機」按鈕以啟用此外掛。

2. 將滑鼠游標懸停在故事畫布中的任何 DOM 元素上。

3. 當您懸停時，Storybook 將會反白顯示元素，讓您知道正在擷取哪個元素。

4. 點擊所需的元素。

5. 等待右下角的通知。

6. 將剪貼簿的內容貼到您想要貼上擷取故事的任何應用程式中。

使用方式

此外掛需要 Storybook 6.3 或更新版本。

它也在底層使用 html2canvas。

npm i -D storybook-addon-storyclip

將 "storybook-addon-storyclip" 加入您 .storybook/main.js 中的 addons 陣列

module.exports = {
  addons: ['storybook-addon-storyclip'],
};