Permalink
Browse files

improve grid, fix #403

  • Loading branch information...
warmhug committed Nov 4, 2016
1 parent 523f7d5 commit 839fe3518497406dc2bf9c3db82ee89d0e0e5c8f
@@ -0,0 +1,21 @@
import React from 'react';

export interface DataItem {
icon?: any;
text?: any;
[key: string]: any;
}

export interface GridProps {
data?: Array<DataItem | undefined>;
hasLine?: boolean;
columnNum?: number;
isCarousel?: boolean;
carouselMaxRow?: number;
onClick?: (dataItem: DataItem | undefined, itemIndex: number) => void;
/** web only */
renderItem?: (dataItem: DataItem | undefined, itemIndex: number) => React.ReactElement<any>;
prefixCls?: string;
className?: string;
style?: React.CSSProperties;
}
@@ -1,59 +1,43 @@
---
order: 0
title: 基本
title: 示例
---

````jsx
import { Grid } from 'antd-mobile';
const data1 = [
{
icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
text: '名字',
link: 'hehe',
}, {
icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
text: '名字',
link: 'hehe',
}, {
icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
text: '名字',
link: 'hehe',
}, {
icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
text: '名字',
link: 'hehe',
}, {
icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
text: '名字',
link: 'hehe',
}, {
icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
text: '名字',
link: 'hehe',
}, {
icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
text: '名字',
link: 'hehe',
}, {
icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
text: '名字',
link: 'hehe',
}, {
icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
text: '名字',
link: 'hehe',
}, {
icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
text: '名字',
link: 'hehe',
},
];
const data = Array.from(new Array(9)).map((_val, i) => ({
icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
text: `名字${i}`,
}));
const data1 = Array.from(new Array(5)).map((_val, i) => ({
img: 'https://zos.alipayobjects.com/rmsportal/wIjMDnsrDoPPcIV.png',
text: `名字${i}`,
}));
const GridExample = React.createClass({
render() {
return (<div>
<Grid data={data1} />
<Grid data={data} />
<p style={{ margin: 10, color: '#999' }}>无边线</p>
<Grid data={data} columnNum={3} hasLine={false} />
<p style={{ margin: 10, color: '#999' }}>走马灯</p>
<Grid data={data} columnNum={3} isCarousel onClick={(_el, index) => alert(index)} />
<p style={{ margin: 10, color: '#999' }}>自定义格子内容</p>
<Grid data={data1} columnNum={3} hasLine={false}
renderItem={(dataItem, index) => (
<div style={{ margin: '16px', background: '#f7f7f7', textAlign: 'center' }}>
<div style={{ background: 'rgba(0, 0, 0, 0.1)', padding: '8px' }}>
<span>{index + 1}.{dataItem.text}</span>
</div>
<img src={dataItem.img} style={{ width: '80%', margin: '12px' }} />
</div>
)}
/>
</div>);
},
});
@@ -1,54 +1,22 @@
import React from 'react';
import { View, Text } from 'react-native';
import { Grid } from 'antd-mobile';

const data1 = [
{
icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
text: '名字',
link: 'hehe',
}, {
icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
text: '名字',
link: 'hehe',
}, {
icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
text: '名字',
link: 'hehe',
}, {
icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
text: '名字',
link: 'hehe',
}, {
icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
text: '名字',
link: 'hehe',
}, {
icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
text: '名字',
link: 'hehe',
}, {
icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
text: '名字',
link: 'hehe',
}, {
icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
text: '名字',
link: 'hehe',
}, {
icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
text: '名字',
link: 'hehe',
}, {
icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
text: '名字',
link: 'hehe',
},
];
const data = Array.from(new Array(9)).map((_val, i) => ({
icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
text: `名字${i}`,
}));

export default class BasicGridExample extends React.Component<any, any> {
render() {
return (
<Grid data={data1} />
);
return (<View>
<View style={[{ margin: 10 }]}><Text>简单示例</Text></View>
<View style={[{ padding: 10 }]}>
<Grid data={data} hasLine={false} />
</View>

<View style={[{ margin: 10 }]}><Text>走马灯</Text></View>
<Grid data={data} columnNum={3} isCarousel onClick={(_el, index) => alert(index)} />
</View>);
}
}

This file was deleted.

Oops, something went wrong.

This file was deleted.

Oops, something went wrong.

This file was deleted.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit 839fe35

Please sign in to comment.