Skip to content

Commit

Permalink
translate grid (#1228)
Browse files Browse the repository at this point in the history 
* translate grid

* update snapshot

* update translation
  • Loading branch information
@liqi07 @paranoidjk
liqi07 authored and paranoidjk committed Apr 28, 2017
1 parent 3996e2b commit 3a827a1
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 44 deletions.
54 changes: 27 additions & 27 deletions components/grid/__tests__/__snapshots__/demo.test.web.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
<div
class="sub-title"
>
基本使用
basic usage
</div>
<div
class="am-grid am-grid-line"
Expand All @@ -30,7 +30,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
<div
class="am-grid-text"
>
名字0
name0
</div>
</div>
</div>
Expand All @@ -52,7 +52,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
<div
class="am-grid-text"
>
名字1
name1
</div>
</div>
</div>
Expand All @@ -74,7 +74,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
<div
class="am-grid-text"
>
名字2
name2
</div>
</div>
</div>
Expand All @@ -96,7 +96,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
<div
class="am-grid-text"
>
名字3
name3
</div>
</div>
</div>
Expand All @@ -122,7 +122,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
<div
class="am-grid-text"
>
名字4
name4
</div>
</div>
</div>
Expand All @@ -144,7 +144,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
<div
class="am-grid-text"
>
名字5
name5
</div>
</div>
</div>
Expand All @@ -166,7 +166,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
<div
class="am-grid-text"
>
名字6
name6
</div>
</div>
</div>
Expand All @@ -188,7 +188,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
<div
class="am-grid-text"
>
名字7
name7
</div>
</div>
</div>
Expand All @@ -214,7 +214,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
<div
class="am-grid-text"
>
名字8
name8
</div>
</div>
</div>
Expand All @@ -236,7 +236,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
<div
class="sub-title"
>
无边线
no border
</div>
<div
class="am-grid"
Expand All @@ -261,7 +261,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
<div
class="am-grid-text"
>
名字0
name0
</div>
</div>
</div>
Expand All @@ -283,7 +283,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
<div
class="am-grid-text"
>
名字1
name1
</div>
</div>
</div>
Expand All @@ -305,7 +305,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
<div
class="am-grid-text"
>
名字2
name2
</div>
</div>
</div>
Expand All @@ -331,7 +331,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
<div
class="am-grid-text"
>
名字3
name3
</div>
</div>
</div>
Expand All @@ -353,7 +353,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
<div
class="am-grid-text"
>
名字4
name4
</div>
</div>
</div>
Expand All @@ -375,7 +375,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
<div
class="am-grid-text"
>
名字5
name5
</div>
</div>
</div>
Expand All @@ -401,7 +401,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
<div
class="am-grid-text"
>
名字6
name6
</div>
</div>
</div>
Expand All @@ -423,7 +423,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
<div
class="am-grid-text"
>
名字7
name7
</div>
</div>
</div>
Expand All @@ -445,7 +445,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
<div
class="am-grid-text"
>
名字8
name8
</div>
</div>
</div>
Expand All @@ -455,15 +455,15 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
<div
class="sub-title"
>
走马灯
carousel
</div>
<div
class="am-grid am-grid-line"
/>
<div
class="sub-title"
>
自定义格子内容
custom content
</div>
<div
class="am-grid"
Expand All @@ -485,7 +485,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
style="background:rgba(0, 0, 0, 0.1);padding:0.08rem;"
>
<span>
1.名字0
1.name0
</span>
</div>
<img
Expand All @@ -509,7 +509,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
style="background:rgba(0, 0, 0, 0.1);padding:0.08rem;"
>
<span>
2.名字1
2.name1
</span>
</div>
<img
Expand All @@ -533,7 +533,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
style="background:rgba(0, 0, 0, 0.1);padding:0.08rem;"
>
<span>
3.名字2
3.name2
</span>
</div>
<img
Expand Down Expand Up @@ -561,7 +561,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
style="background:rgba(0, 0, 0, 0.1);padding:0.08rem;"
>
<span>
4.名字3
4.name3
</span>
</div>
<img
Expand All @@ -585,7 +585,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
style="background:rgba(0, 0, 0, 0.1);padding:0.08rem;"
>
<span>
5.名字4
5.name4
</span>
</div>
<img
Expand Down
12 changes: 6 additions & 6 deletions components/grid/demo/basic.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,26 +10,26 @@ import { Grid } from 'antd-mobile';

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

const data1 = Array.from(new Array(5)).map((_val, i) => ({
img: 'https://zos.alipayobjects.com/rmsportal/wIjMDnsrDoPPcIV.png',
text: `名字${i}`,
text: `name${i}`,
}));

const GridExample = () => (
<div>
<div className="sub-title">基本使用</div>
<div className="sub-title">basic usage</div>
<Grid data={data} />

<div className="sub-title">无边线</div>
<div className="sub-title">no border</div>
<Grid data={data} columnNum={3} hasLine={false} />

<div className="sub-title">走马灯</div>
<div className="sub-title">carousel</div>
<Grid data={data} columnNum={3} isCarousel onClick={(_el, index) => alert(index)} />

<div className="sub-title">自定义格子内容</div>
<div className="sub-title">custom content</div>
<Grid data={data1} columnNum={3} hasLine={false}
renderItem={(dataItem, index) => (
<div style={{ margin: '0.16rem', background: '#f7f7f7', textAlign: 'center' }}>
Expand Down
22 changes: 11 additions & 11 deletions components/grid/index.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ type: Data Display
title: Grid
---

在水平和垂直方向，将布局切分成若干等大的区块。
We divided the design area into a number of aliquots in horizontal and vertical.

### 规则
- 区块中的内容应该是同类元素，eg：都是图片，或者都是图标+文字。
### Rules
- The contents of the blocks should have the same type. eg: they are all pictures or icons with text.


## API
Expand All @@ -16,12 +16,12 @@ Support WEB, React-Native.

Properties | Descrition | Type | Default
-----------|------------|------|--------
| data | 传入的菜单数据 | `Array<{icon, text}>` | [] |
| onClick | 点击每个菜单的回调函数 | (el: Object, index: number): void | - |
| columnNum | 列数 | number | `4` |
| hasLine | 是否有边框 | boolean | `true` |
| isCarousel | 是否跑马灯, | boolean | `false` |
| carouselMaxRow | 如果是跑马灯, 一页跑马灯需要展示的行数 | number | `2` |
| renderItem | 自定义每个 grid 条目的创建函数 | (el, index) => React.Node | - |
| data | data record array to be rendered | `Array<{icon, text}>` | [] |
| onClick | Handler to be called when the user taps the grid | (el: Object, index: number): void | - |
| columnNum | the number of columns | number | `4` |
| hasLine | whether to show border | boolean | `true` |
| isCarousel | whether to be played as a Carousel | boolean | `false` |
| carouselMaxRow | the max number of rows to be showed each page of the Carousel | number | `2` |
| renderItem | custom function to create each grid item | (el, index) => React.Node | - |

`isCarousel = true` 模式时，还可以传递 [carousel](https://mobile.ant.design/components/carousel) 相关的 API。
When `isCarousel = true`, the APIs of [carousel](https://mobile.ant.design/components/carousel) also can be delivered.

0 comments on commit 3a827a1

Please sign in to comment.