1.0.3 • Published 4 years ago
mt-ad-space v1.0.3
mt-ad-space
A light-weight React mt-ad-space component with extremely easy API(只适用于移动端项目). Online Demo, welcome code review
Installation
npm install mt-ad-space --save
Usage
import React, { PureComponent } from 'react';
import img1 from './static/images/11.jpg';
import img2 from './static/images/12.jpg';
import img3 from './static/images/13.jpg';
import img4 from './static/images/14.jpg';
import img5 from './static/images/15.jpg';
import img6 from './static/images/16.png';
import AdSpace from 'mt-ad-space';
import './app.css';
const source = [img1, img2, img3, ];
const source_2 = [[img1, img2], [img3, img4], [img5, img6]];
export default class App extends PureComponent {
constructor() {
super();
this.state = {
indicator: 0,
};
}
render() {
return (
<div className="container">
<div style={{ height: 200 }}></div>
<AdSpace
width={320}
spacing={10}
onChange={(indicator) => {
this.setState({ indicator })
}}
>
{
source.map((item, key) =>
<div key={key} className="item">
<img src={item} />
</div>
)
}
</AdSpace>
<h1>{this.state.indicator}</h1>
<AdSpace
width={320}
spacing={10}
>
{
source_2.map((item, key) =>
<ul key={key} className="ad-space">
{
item.map(it =>
<li className="ad-space-item" key={it}>
<img src={it} />
</li>
)
}
</ul>
)
}
</AdSpace>
</div>
);
}
}
props
param | detail | type | default |
---|---|---|---|
width | component width | number | isRequired |
spacing | spacing between each element | number | isRequired |
children | child node of component | array | [] |
onChange | callback function when channel changes | function | empty |