Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
docs: 优化组件文档,可以在storybook上直接编辑属性
  • Loading branch information
Summer-andy committed Dec 1, 2019
1 parent 2f7ec98 commit 8f4cb81
Show file tree
Hide file tree
Showing 16 changed files with 76 additions and 30 deletions.
2 changes: 1 addition & 1 deletion .storybook/addons.js
@@ -1,4 +1,4 @@
import '@storybook/addon-actions/register';
// import '@storybook/addon-actions/register';
import '@storybook/addon-knobs/register';
import '@storybook/addon-notes/register';
import '@storybook/addon-storysource/register';
2 changes: 1 addition & 1 deletion README.md
Expand Up @@ -39,7 +39,7 @@ import { BoxLoading } from 'react-loadingg'
| 组件 | color | speed | style |
| -------------------- | ----- | ----- | ----- |
| BabelLoading ||||
| BlockLoading || ||
| BlockLoading || 🚧 ||
| BoxLoading ||||
| BlockReserveLoading ||||
| CircleLoading ||||
Expand Down
9 changes: 7 additions & 2 deletions src/stories/BabelLoading.stories.js
@@ -1,16 +1,21 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { withKnobs, number, text } from '@storybook/addon-knobs';
import { BabelLoading } from '~/components';
import Container from './compoment/Container';
storiesOf('BabelLoading', module)
.addDecorator(withKnobs)
.add(
'BabelLoading',
() => {

let speed = 1;
let color = '';
speed = number('动画速度(s)')
color = text('颜色')
return (
<Container>
<BabelLoading speed={2}></BabelLoading>
<BabelLoading speed={speed} color={color}></BabelLoading>
</Container>
);
}
Expand Down
7 changes: 5 additions & 2 deletions src/stories/BlockLoading.stories.js
@@ -1,16 +1,19 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { withKnobs, number } from '@storybook/addon-knobs';
import { BlockLoading } from '~/components';
import Container from './compoment/Container';
storiesOf('BlockLoading', module)
.addDecorator(withKnobs)
.add(
'BlockLoading',
() => {
let speed = 1;
let color = '';
speed = number('动画速度(s)')
return (
<Container>
<BlockLoading speed={8}></BlockLoading>
<BlockLoading speed={speed}></BlockLoading>
</Container>
);
}
Expand Down
8 changes: 6 additions & 2 deletions src/stories/BlockReserveLoading.stories.js
@@ -1,16 +1,20 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { withKnobs, number, text } from '@storybook/addon-knobs';
import { BlockReserveLoading } from '~/components';
import Container from './compoment/Container';
storiesOf('BlockReserveLoading', module)
.addDecorator(withKnobs)
.add(
'BlockReserveLoading',
() => {
let speed = 1;
let color = '';
speed = number('动画速度(s)')
color = text('颜色')
return (
<Container>
<BlockReserveLoading></BlockReserveLoading>
<BlockReserveLoading speed={speed} color={color}></BlockReserveLoading>
</Container>
);
}
Expand Down
8 changes: 6 additions & 2 deletions src/stories/BoxLoading.stories.js
@@ -1,16 +1,20 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { withKnobs, number, text } from '@storybook/addon-knobs';
import { BoxLoading } from '~/components';
import Container from './compoment/Container';
storiesOf('BoxLoading', module)
.addDecorator(withKnobs)
.add(
'BoxLoading',
() => {
let speed = 1;
let color = '';
speed = number('动画速度(s)')
color = text('颜色')
return (
<Container>
<BoxLoading></BoxLoading>
<BoxLoading speed={speed} color={color}></BoxLoading>
</Container>
);
}
Expand Down
8 changes: 6 additions & 2 deletions src/stories/CircleLoading.stories.js
@@ -1,16 +1,20 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { withKnobs, number, text } from '@storybook/addon-knobs';
import { CircleLoading } from '~/components';
import Container from './compoment/Container';
storiesOf('CircleLoading', module)
.addDecorator(withKnobs)
.add(
'CircleLoading',
() => {
let speed = 1;
let color = '';
speed = number('动画速度(s)')
color = text('颜色')
return (
<Container>
<CircleLoading></CircleLoading>
<CircleLoading speed={speed} color={color}></CircleLoading>
</Container>
);
}
Expand Down
6 changes: 4 additions & 2 deletions src/stories/CircleToBlockLoading.stories.js
@@ -1,16 +1,18 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { withKnobs, text } from '@storybook/addon-knobs';
import { CircleToBlockLoading } from '~/components';
import Container from './compoment/Container';
storiesOf('CircleToBlock', module)
.addDecorator(withKnobs)
.add(
'CircleToBlock',
() => {
let color = '';
color = text('颜色')
return (
<Container>
<CircleToBlockLoading></CircleToBlockLoading>
<CircleToBlockLoading color={color}></CircleToBlockLoading>
</Container>
);
}
Expand Down
6 changes: 4 additions & 2 deletions src/stories/CommonLoading.stories.js
@@ -1,14 +1,16 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { withKnobs , text } from '@storybook/addon-knobs';
import { CommonLoading } from '~/components';
import Container from './compoment/Container';
storiesOf('CommonLoading', module)
.addDecorator(withKnobs)
.add('CommonLoading', () => {
let color = '';
color = text('颜色')
return (
<Container>
<CommonLoading style={{ margin: "100px 60px" }}></CommonLoading>
<CommonLoading color={color} style={{ margin: "100px 60px" }}></CommonLoading>
</Container>
);
});
8 changes: 6 additions & 2 deletions src/stories/DisappearedLoading.stories.js
@@ -1,14 +1,18 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { withKnobs, number, text } from '@storybook/addon-knobs';
import { DisappearedLoading } from '~/components';
import Container from './compoment/Container';
storiesOf('DisappearedLoading', module)
.addDecorator(withKnobs)
.add('DisappearedLoading', () => {
let speed = 1;
let color = '';
speed = number('动画速度(s)')
color = text('颜色')
return (
<Container>
<DisappearedLoading style={{ margin: "100px 60px" }}></DisappearedLoading>
<DisappearedLoading speed={speed} color={color} style={{ margin: "100px 60px" }}></DisappearedLoading>
</Container>
);
});
6 changes: 4 additions & 2 deletions src/stories/LoopCircleLoading.stories.js
@@ -1,14 +1,16 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { withKnobs, text } from '@storybook/addon-knobs';
import { LoopCircleLoading } from '~/components';
import Container from './compoment/Container';
storiesOf('LoopCircleLoading', module)
.addDecorator(withKnobs)
.add('LoopCircleLoading', () => {
let color = '';
color = text('颜色')
return (
<Container>
<LoopCircleLoading style={{ margin: "100px 60px" }}></LoopCircleLoading>
<LoopCircleLoading color={color} style={{ margin: "100px 60px" }}></LoopCircleLoading>
</Container>
);
});
8 changes: 6 additions & 2 deletions src/stories/TouchBallLoading.stories.js
@@ -1,14 +1,18 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { withKnobs, number, text } from '@storybook/addon-knobs';
import { TouchBallLoading } from '~/components';
import Container from './compoment/Container';
storiesOf('TouchBallLoading', module)
.addDecorator(withKnobs)
.add('TouchBallLoading', () => {
let speed = 1;
let color = '';
speed = number('动画速度(s)')
color = text('颜色')
return (
<Container>
<TouchBallLoading style={{ width: 100, height: 100 }} speed={1}></TouchBallLoading>
<TouchBallLoading speed={speed} color={color} style={{ width: 100, height: 100 }} speed={1}></TouchBallLoading>
</Container>
);
});
6 changes: 4 additions & 2 deletions src/stories/TransverseLoading.stories.js
@@ -1,14 +1,16 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { withKnobs, text } from '@storybook/addon-knobs';
import { TransverseLoading } from '~/components';
import Container from './compoment/Container';
storiesOf('TransverseLoading', module)
.addDecorator(withKnobs)
.add('TransverseLoading', () => {
let color = '';
color = text('颜色')
return (
<Container>
<TransverseLoading style={{ margin: "100px 60px" }}></TransverseLoading>
<TransverseLoading color={color} style={{ margin: "100px 60px" }}></TransverseLoading>
</Container>
);
});
6 changes: 4 additions & 2 deletions src/stories/WaveLoading.stories.js
@@ -1,14 +1,16 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { withKnobs, text } from '@storybook/addon-knobs';
import { WaveLoading } from '~/components';
import Container from './compoment/Container';
storiesOf('WaveLoading', module)
.addDecorator(withKnobs)
.add('WaveLoading', () => {
let color = '';
color = text('颜色')
return (
<Container>
<WaveLoading style={{ margin: "100px 60px" }}></WaveLoading>
<WaveLoading color={color} style={{ margin: "100px 60px" }}></WaveLoading>
</Container>
);
});
8 changes: 6 additions & 2 deletions src/stories/WaveTopBottomLoading.stories.js
@@ -1,14 +1,18 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { withKnobs, text, number } from '@storybook/addon-knobs';
import { WaveTopBottomLoading } from '~/components';
import Container from './compoment/Container';
storiesOf('WaveTopBottomLoading', module)
.addDecorator(withKnobs)
.add('WaveTopBottomLoading', () => {
let speed = 1;
let color = '';
speed = number('动画速度(s)')
color = text('颜色')
return (
<Container>
<WaveTopBottomLoading style={{ margin: "100px 60px" }}></WaveTopBottomLoading>
<WaveTopBottomLoading speed={speed} color={color} style={{ margin: "100px 60px" }}></WaveTopBottomLoading>
</Container>
);
});
8 changes: 6 additions & 2 deletions src/stories/WindMillLoading.stories.js
@@ -1,14 +1,18 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { withKnobs, text, number } from '@storybook/addon-knobs';
import { WindMillLoading } from '~/components';
import Container from './compoment/Container';
storiesOf('WindMillLoading', module)
.addDecorator(withKnobs)
.add('WindMillLoading', () => {
let speed = 1;
let color = '';
speed = number('动画速度(s)')
color = text('颜色')
return (
<Container>
<WindMillLoading></WindMillLoading>
<WindMillLoading speed={speed} color={color}></WindMillLoading>
</Container>
);
});

0 comments on commit 8f4cb81

Please sign in to comment.