用於 Abstract 整合的 Storybook 擴充套件

一個用於 Storybook 的擴充套件，讓您可以在 Storybook 面板中連結到 Abstract 圖層和集合！

範例

• Storybook: https://storybook-addons-abstract.now.sh/
• 原始碼: https://github.com/amccloud/storybook-addons-abstract/tree/master/examples

安裝

需要 storybook@^6.0.0

npm install storybook-addons-abstract

用法

在 main.js 中

module.exports = {
  stories: ['../src/**/*.stories.@(tsx|mdx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
+   'storybook-addons-abstract/register'
  ]
};

或使用舊的 addons.js

import "storybook-addons-abstract/register";

使用新的 Component Story Format API

import React from "react";
import { BlogIndex, BlogGallery, BlogPost } from "../";

export default {
  parameters: {
    abstract: {
      // Copy a collection or layer share url from Abstract
      url: "https://share.goabstract.com/733ca894-a4bb-43e3-a2b1-dd27ff6d00c4"
    }
  }
};

// Name your stories after layers in the collection
export const blogIndex = () => (
  <BlogIndex />
);

export const blogGallery = () => (
  <BlogGallery />
);

export const blogPost = () => (
  <BlogPost />
);

或使用舊的 stories

import React from "react";
import { storiesOf } from "@storybook/react";

storiesOf("Blog", module)
  .addParameters({
    abstract: {
      // Copy a collection or layer share url from Abstract
      url: "https://share.goabstract.com/733ca894-a4bb-43e3-a2b1-dd27ff6d00c4"
    }
  })
   // Name your stories after layers in the collection
  .add("Blog Index", () => <BlogIndex />)
  .add("Blog Gallery", () => <BlogGallery />)
  .add("Blog Post", () => <BlogPost />);

選項

選項	值	預設值	描述
主題	"light" | "dark" | "system"	"light"	控制嵌入的外觀
無邊框	布林值	false	隱藏嵌入介面，僅顯示預覽直到滑鼠懸停

更改嵌入背景顏色

{
  abstract: {
    url: "https://share.goabstract.com/733ca894-a4bb-43e3-a2b1-dd27ff6d00c4",
    options: {
      theme: "dark"
    }
  }
}

隱藏嵌入介面

{
  abstract: {
    url: "https://share.goabstract.com/733ca894-a4bb-43e3-a2b1-dd27ff6d00c4",
    options: {
      chromeless: true
    }
  }
}