@stormid/storybook-html-addon-markup

此 Storybook 插件添加了一个面板，显示故事渲染的静态 HTML 标记。

用法

安装

$ npm i @stormid/storybook-html-addon-markup --dev

将此行添加到您的 addons.js 文件中（如果需要，在您的 Storybook 配置目录中创建此文件）。

import '@stormid/storybook-html-addon-markup';

导入 withMarkup 装饰器以将静态标记添加到您的故事中。

适用于所有故事

import React from 'react';
import { storiesOf, addDecorator } from '@storybook/html';
import { withMarkup } from '@storybook/addon-a11y';

// should only be added once
// best place is in config.js
addDecorator(withMarkup);
configure(require.context('../src', true, /\.stories\.js$/), module);

或每个故事

import { h, Fragment } from 'preact';
import render from 'preact-render-to-string/jsx';
import MyComponent from '../../src/templates/components/my-component';
import { withMarkup } from '@storybook/addon-a11y';

export default { 
    title: 'My component',
    decorators: [withMarkup]
};

export const Default = () => render(<MyComponent />);