Skip to content

Commit bf0e1ce

Browse files
xiaoyatongxiaoyatong
authored
fix: space harmony (#2817)
* fix: space harmony * fix: 改用 space 标签
1 parent b635275 commit bf0e1ce

File tree

15 files changed

+185
-202
lines changed

15 files changed

+185
-202
lines changed

‎packages/nutui-taro-demo/src/pages/index/index.tsx‎

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
11
import Taro from '@tarojs/taro'
2-
import { View, Image, Swiper, SwiperItem, Text, ScrollView, Button, Input, Video } from '@tarojs/components'
2+
import {
3+
View,
4+
Image,
5+
Swiper,
6+
SwiperItem,
7+
Text,
8+
ScrollView,
9+
Button,
10+
Input,
11+
Video,
12+
Textarea,
13+
} from '@tarojs/components'
314
import pkg from '@/packages/../config.json'
415
import packageJson from '@/packages/../../package.json'
516
import './index.scss'
@@ -8,9 +19,8 @@ import './index.scss'
819
const navs = pkg.nav
920
// console.log(navs)
1021

11-
1222
// hack taro load button xml
13-
console.log(Button, Input, Video,Image, Swiper, SwiperItem, )
23+
console.log(Button, Input, Video, Image, Swiper, SwiperItem, Textarea)
1424

1525
// try {
1626
// console.log('xxx', Schema)
@@ -39,37 +49,39 @@ const Index = () => {
3949
}
4050

4151
return (
42-
<ScrollView className='index'>
43-
<View className='index-header'>
52+
<ScrollView className="index">
53+
<View className="index-header">
4454
<Image
45-
className='index-header-img'
46-
src='https://img14.360buyimg.com/imagetools/jfs/t1/117879/25/28831/6279/6329723bE66715a2f/5f099b8feca9e8cc.png'
55+
className="index-header-img"
56+
src="https://img14.360buyimg.com/imagetools/jfs/t1/117879/25/28831/6279/6329723bE66715a2f/5f099b8feca9e8cc.png"
4757
/>
48-
<View className='index-header-info'>
49-
<View className='index-header-info-h1'>NutUI React</View>
50-
<View className='index-header-info-p'>
58+
<View className="index-header-info">
59+
<View className="index-header-info-h1">NutUI React</View>
60+
<View className="index-header-info-p">
5161
京东风格的轻量级小程序组件库 React 版
5262
</View>
53-
<View className='index-header-info-p'>
54-
<Text className='index-header-info-text'>v{packageJson?.version}</Text>
63+
<View className="index-header-info-p">
64+
<Text className="index-header-info-text">
65+
v{packageJson?.version}
66+
</Text>
5567
</View>
5668
</View>
5769
</View>
58-
<View className='index-components'>
70+
<View className="index-components">
5971
{navs.map((nav) => (
60-
<View key={nav.enName} className='index-components-item'>
72+
<View key={nav.enName} className="index-components-item">
6173
{nav.enName === 'dataentry' ? null : (
62-
<View className='index-components-item-title'>{nav.name}</View>
74+
<View className="index-components-item-title">{nav.name}</View>
6375
)}
64-
<View className='index-components-sublist'>
76+
<View className="index-components-sublist">
6577
{nav.packages.map((com) =>
6678
com.show && com.taro && com.version === '3.0.0' ? (
6779
<View
6880
key={com.name}
69-
className='index-components-sublist-item'
81+
className="index-components-sublist-item"
7082
>
7183
<View
72-
className='index-components-sublist-item-content'
84+
className="index-components-sublist-item-content"
7385
key={com.name}
7486
onClick={() => gotoNext(com.name, nav.enName)}
7587
>

‎src/packages/space/demo.taro.tsx‎

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import React from 'react'
22
import Taro from '@tarojs/taro'
33
import { ScrollView, View } from '@tarojs/components'
4-
import { Cell } from '@nutui/nutui-react-taro'
54
import { useTranslate } from '@/sites/assets/locale/taro'
65
import Header from '@/sites/components/header'
76
import Demo1 from './demos/taro/demo1'
87
import Demo2 from './demos/taro/demo2'
98
import Demo3 from './demos/taro/demo3'
10-
// import Demo4 from './demos/taro/demo4'
9+
import Demo4 from './demos/taro/demo4'
1110
import Demo5 from './demos/taro/demo5'
1211
import Demo6 from './demos/taro/demo6'
1312

@@ -44,30 +43,17 @@ const SpaceDemo = () => {
4443
<Header />
4544
<ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
4645
<View className="h2">{translated.basic}</View>
47-
<Cell>
48-
<Demo1 />
49-
</Cell>
46+
<Demo1 />
5047
<View className="h2">{translated.wrap}</View>
51-
<Cell>
52-
<Demo2 />
53-
</Cell>
48+
<Demo2 />
5449
<View className="h2">{translated.direction}</View>
55-
<Cell>
56-
<Demo3 />
57-
</Cell>
50+
<Demo3 />
5851
<View className="h2">{translated.spaceGap}</View>
59-
{/* @TODO ConfigProvider 暂不支持 */}
60-
{/* <Cell>
61-
<Demo4 />
62-
</Cell> */}
52+
<Demo4 />
6353
<View className="h2">{translated.mainAxisAlign}</View>
64-
<Cell style={{ display: 'block' }}>
65-
<Demo5 />
66-
</Cell>
54+
<Demo5 />
6755
<View className="h2">{translated.crossAxisAlign}</View>
68-
<Cell>
69-
<Demo6 />
70-
</Cell>
56+
<Demo6 />
7157
</ScrollView>
7258
</>
7359
)

‎src/packages/space/demo.tsx‎

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react'
2-
import Cell from '@/packages/cell'
32
import { useTranslate } from '@/sites/assets/locale'
43
import Demo1 from './demos/h5/demo1'
54
import Demo2 from './demos/h5/demo2'
@@ -40,29 +39,17 @@ const SpaceDemo = () => {
4039
<>
4140
<div className="demo">
4241
<h2>{translated.basic}</h2>
43-
<Cell>
44-
<Demo1 />
45-
</Cell>
42+
<Demo1 />
4643
<h2>{translated.wrap}</h2>
47-
<Cell>
48-
<Demo2 />
49-
</Cell>
44+
<Demo2 />
5045
<h2>{translated.direction}</h2>
51-
<Cell>
52-
<Demo3 />
53-
</Cell>
46+
<Demo3 />
5447
<h2>{translated.spaceGap}</h2>
55-
<Cell>
56-
<Demo4 />
57-
</Cell>
48+
<Demo4 />
5849
<h2>{translated.mainAxisAlign}</h2>
59-
<Cell style={{ display: 'block' }}>
60-
<Demo5 />
61-
</Cell>
50+
<Demo5 />
6251
<h2>{translated.crossAxisAlign}</h2>
63-
<Cell>
64-
<Demo6 />
65-
</Cell>
52+
<Demo6 />
6653
</div>
6754
</>
6855
)

‎src/packages/space/demos/h5/demo1.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import React from 'react'
2-
import { Space, Button } from '@nutui/nutui-react'
2+
import { Space, Button, Cell } from '@nutui/nutui-react'
33

44
const Demo1 = () => {
55
return (
6-
<Space>
7-
<Button>按钮1</Button>
8-
<Button>按钮2</Button>
9-
<Button>按钮3</Button>
10-
</Space>
6+
<Cell>
7+
<Space>
8+
<Button>按钮1</Button>
9+
<Button>按钮2</Button>
10+
<Button>按钮3</Button>
11+
</Space>
12+
</Cell>
1113
)
1214
}
1315
export default Demo1

‎src/packages/space/demos/h5/demo2.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
import React from 'react'
2-
import { Space, Button } from '@nutui/nutui-react'
2+
import { Space, Button, Cell } from '@nutui/nutui-react'
33

44
const Demo2 = () => {
55
return (
6-
<Space wrap>
7-
<Button>按钮1</Button>
8-
<Button>按钮2</Button>
9-
<Button>按钮3</Button>
10-
<Button>按钮4</Button>
11-
<Button>按钮5</Button>
12-
<Button>按钮6</Button>
13-
</Space>
6+
<Cell>
7+
<Space wrap>
8+
<Button>按钮1</Button>
9+
<Button>按钮2</Button>
10+
<Button>按钮3</Button>
11+
<Button>按钮4</Button>
12+
<Button>按钮5</Button>
13+
<Button>按钮6</Button>
14+
</Space>
15+
</Cell>
1416
)
1517
}
1618
export default Demo2

‎src/packages/space/demos/h5/demo3.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import React from 'react'
2-
import { Space, Button } from '@nutui/nutui-react'
2+
import { Space, Button, Cell } from '@nutui/nutui-react'
33

44
const Demo3 = () => {
55
return (
6-
<Space direction="vertical">
7-
<Button>按钮1</Button>
8-
<Button>按钮2</Button>
9-
<Button>按钮3</Button>
10-
</Space>
6+
<Cell>
7+
<Space direction="vertical">
8+
<Button>按钮1</Button>
9+
<Button>按钮2</Button>
10+
<Button>按钮3</Button>
11+
</Space>
12+
</Cell>
1113
)
1214
}
1315
export default Demo3

‎src/packages/space/demos/h5/demo4.tsx‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11
import React from 'react'
2-
import { Space, Button, ConfigProvider } from '@nutui/nutui-react'
2+
import { Space, Button, ConfigProvider, Cell } from '@nutui/nutui-react'
33

44
const Demo4 = () => {
55
return (
6-
<ConfigProvider
7-
theme={{
8-
nutuiSpaceGap: '20px',
9-
}}
10-
>
11-
<Space direction="vertical">
12-
<Button>按钮1</Button>
13-
<Button>按钮2</Button>
14-
<Button>按钮3</Button>
15-
</Space>
16-
</ConfigProvider>
6+
<Cell>
7+
<ConfigProvider
8+
theme={{
9+
nutuiSpaceGap: '20px',
10+
}}
11+
>
12+
<Space direction="vertical">
13+
<Button>按钮1</Button>
14+
<Button>按钮2</Button>
15+
<Button>按钮3</Button>
16+
</Space>
17+
</ConfigProvider>
18+
</Cell>
1719
)
1820
}
1921
export default Demo4

‎src/packages/space/demos/h5/demo5.tsx‎

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,22 @@
11
import React from 'react'
2-
import { Space, Button } from '@nutui/nutui-react'
2+
import { Space, Button, Cell } from '@nutui/nutui-react'
33

44
const Demo5 = () => {
55
return (
6-
<Space justify="start" wrap>
7-
<Button>按钮1</Button>
8-
<div>
9-
<Button block style={{ marginBottom: 5 }}>
10-
按钮2
11-
</Button>
12-
<Button block>按钮2</Button>
13-
</div>
14-
<div>
15-
<Button block style={{ marginBottom: 5 }}>
16-
按钮3
17-
</Button>
18-
<Button block style={{ marginBottom: 5 }}>
19-
按钮3
20-
</Button>
21-
<Button block>按钮3</Button>
22-
</div>
23-
</Space>
6+
<Cell>
7+
<Space justify="start" wrap>
8+
<Button>按钮1</Button>
9+
<Space direction="vertical">
10+
<Button>按钮2</Button>
11+
<Button>按钮2</Button>
12+
</Space>
13+
<Space direction="vertical">
14+
<Button>按钮3</Button>
15+
<Button>按钮3</Button>
16+
<Button>按钮3</Button>
17+
</Space>
18+
</Space>
19+
</Cell>
2420
)
2521
}
2622
export default Demo5

‎src/packages/space/demos/h5/demo6.tsx‎

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,22 @@
11
import React from 'react'
2-
import { Space, Button } from '@nutui/nutui-react'
2+
import { Space, Button, Cell } from '@nutui/nutui-react'
33

44
const Demo6 = () => {
55
return (
6-
<Space align="end" wrap>
7-
<Button>按钮1</Button>
8-
<div>
9-
<Button block style={{ marginBottom: 5 }}>
10-
按钮2
11-
</Button>
12-
<Button block>按钮2</Button>
13-
</div>
14-
<div>
15-
<Button block style={{ marginBottom: 5 }}>
16-
按钮3
17-
</Button>
18-
<Button block style={{ marginBottom: 5 }}>
19-
按钮3
20-
</Button>
21-
<Button block>按钮3</Button>
22-
</div>
23-
</Space>
6+
<Cell>
7+
<Space align="end" wrap>
8+
<Button>按钮1</Button>
9+
<Space direction="vertical">
10+
<Button>按钮2</Button>
11+
<Button>按钮2</Button>
12+
</Space>
13+
<Space direction="vertical">
14+
<Button>按钮3</Button>
15+
<Button>按钮3</Button>
16+
<Button>按钮3</Button>
17+
</Space>
18+
</Space>
19+
</Cell>
2420
)
2521
}
2622
export default Demo6

‎src/packages/space/demos/taro/demo1.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import React from 'react'
2-
import { Space, Button } from '@nutui/nutui-react-taro'
2+
import { Cell, Space, Button } from '@nutui/nutui-react-taro'
33

44
const Demo1 = () => {
55
return (
6-
<Space>
7-
<Button>按钮1</Button>
8-
<Button>按钮2</Button>
9-
<Button>按钮3</Button>
10-
</Space>
6+
<Cell>
7+
<Space>
8+
<Button>按钮1</Button>
9+
<Button>按钮2</Button>
10+
<Button>按钮3</Button>
11+
</Space>
12+
</Cell>
1113
)
1214
}
1315
export default Demo1

0 commit comments

Comments
 (0)