2017-12-28 21 views
1

내 문제는 여기에 readme addon으로 내 이야기를 표시하려하지만 원하는 순서대로 표시되지 않으며 실제 코드가 다른지 확인하지 못합니다. github에서 나온 것보다 어떤 식 으로든.동화책 addon readme 잘못된 표시 순서

하는 index.js

import React from 'react' 
import { storiesOf, configure } from '@storybook/react' 
import { action } from '@storybook/addon-actions' 
import { withDocs } from 'storybook-readme' 

import ActionButton from 'action-button' 

import actionButtonReadme from './documentation/ActionButton.md' 

storiesOf('Components', module) 
    .add('ActionButton', withDocs(actionButtonReadme,() => { 
     return <ActionButton btnClass='btn btn-trans btn-info mgt-10 mgr-5' 
      iconClass='fa fa-info' 
      tooltipText='Info button' 
      clickAction={action('transparent info button')} 
     /> 
    })) 

을 ActionButton.md

# ActionButton 

### Usage 
```javascript 
import ActionButton from 'action-button' 
``` 

### Exemple 

addon.js

import '@storybook/addon-actions/register' 
import '@storybook/addon-options/register' 
import 'storybook-readme/register' 

내가 내 코드에서 잘못된 거지 어디 궁금

import { withDocs } from 'storybook-readme'; import ButtonREADME from '../components/components/button/README.md'; storiesOf('Button', module) // add only one README (also supports multiple as array) .add('Default', withDocs(ButtonREADME,() => { return <Button onClick={action('clicked')} label="Hello Button"/>; })); 

GitHub의
에서 What I want

데모

What I get

import { 
    configure 
} from '@storybook/react' 
import { setOptions } from '@storybook/addon-options' 

function loadStories() { 
    require('./index.js') 
} 

configure(loadStories, module) 

setOptions({ 
    name: 'b2-common-components' 
}) 
을 config.js.

답변

0

나는 결국 이런 이유 때문에 피해야했던 widthDocs을 포기하고 사용합니다. https://github.com/tuchk4/storybook-readme/issues/43. widthDocs 방법과 .md 파일 내부의 <!-- SCRIPT --> 태그를 사용

나 스타일에 관한 몇 가지 문제와 .md 파일의 한 부분에서 이야기하고 내 사용자 지정 구성 요소를 추가의 가능성이 문제를 해결하는 데 도움이.