kylefang/react-content-loader
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-content-loader.git synced 2026-04-22 19:48:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added traditional list with bullets (#25)

Browse Source 
* Added traditional list with bullets

* Updated bullet-list cicle radius

* Updated bullet-list rect radius
This commit is contained in:
reck
2017-10-25 17:51:30 +05:30
committed by Danilo Woznica
parent 4ce1aced41
commit 8537af8e01
3 changed files with 22 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/index.js
View File

@@ -7,6 +7,7 @@ import FacebookStyle from './stylized/FacebookStyle'
import InstagramStyle from './stylized/InstagramStyle'
import CodeStyle from './stylized/CodeStyle'
import ListStyle from './stylized/ListStyle'
import BulletListStyle from './stylized/BulletListStyle'
// Custom
import Rect from './custom/Rect'
import Circle from './custom/Circle'
@@ -71,6 +72,9 @@ class ContentLoader extends React.Component<Props, State> {
case 'list':
return <ListStyle {...this.state} />
case 'bullet-list':
return <BulletListStyle {...this.state} />
default:
case 'facebook':
return <FacebookStyle {...this.state} />

17
src/stylized/BulletListStyle.js Normal file
View File

@@ -0,0 +1,17 @@
//@flow
import * as React from 'react'
import Wrap from '../Wrap'
import type { WrapProps } from '../Wrap';
const BulletListStyle = (props: WrapProps): React.Element<*> => {
return (
<Wrap {...props}>
<circle cx="10" cy="20" r="8" /><rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
<circle cx="10" cy="50" r="8" /><rect x="25" y="45" rx="5" ry="5" width="220" height="10" />
<circle cx="10" cy="80" r="8" /><rect x="25" y="75" rx="5" ry="5" width="220" height="10" />
<circle cx="10" cy="110" r="8" /><rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
</Wrap>
)
}
export default BulletListStyle

1
stories/index.js
View File

@@ -29,4 +29,5 @@ storiesOf('ContentLoader', module)
.add('instagram style', () => <Container><ContentLoader type='instagram' /></Container>)
.add('code style', () => <Container><ContentLoader type='code' /></Container>)
.add('list style', () => <Container><ContentLoader type='list' /></Container>)
.add('bullet list style', () => <Container><ContentLoader type='bullet-list' /></Container>)
.add('custom style', () => <Container><MyLoader /></Container>)