Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui-react
提交
d65d71f5
N
nutui-react
项目概览
京东前端
/
nutui-react
通知
0
Star
2
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui-react
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
d65d71f5
编写于
2月 20, 2023
作者:
E
eiinu
提交者:
GitHub
2月 20, 2023
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: 多个组件 demo 完善国际化 (#710)
上级
04bf82c6
变更
10
隐藏空白更改
内联
并排
Showing
10 changed file
with
158 addition
and
45 deletion
+158
-45
src/packages/cell/demo.taro.tsx
src/packages/cell/demo.taro.tsx
+2
-2
src/packages/cell/demo.tsx
src/packages/cell/demo.tsx
+2
-2
src/packages/ellipsis/demo.taro.tsx
src/packages/ellipsis/demo.taro.tsx
+15
-9
src/packages/ellipsis/demo.tsx
src/packages/ellipsis/demo.tsx
+15
-9
src/packages/fixednav/demo.taro.tsx
src/packages/fixednav/demo.taro.tsx
+62
-9
src/packages/fixednav/demo.tsx
src/packages/fixednav/demo.tsx
+20
-4
src/packages/image/demo.taro.tsx
src/packages/image/demo.taro.tsx
+8
-4
src/packages/image/demo.tsx
src/packages/image/demo.tsx
+8
-4
src/packages/pulltorefresh/demo.taro.tsx
src/packages/pulltorefresh/demo.taro.tsx
+13
-1
src/packages/pulltorefresh/demo.tsx
src/packages/pulltorefresh/demo.tsx
+13
-1
未找到文件。
src/packages/cell/demo.taro.tsx
浏览文件 @
d65d71f5
...
...
@@ -128,7 +128,7 @@ const CellDemo = () => {
)
=>
testClick
(
event
)
}
/>
<
Cell
title
=
{
translated
.
title4
}
roundRadius
=
"0"
/>
<
h2
>
尺寸设置large
</
h2
>
<
h2
>
{
translated
.
title9
}
</
h2
>
<
Cell
size
=
"large"
title
=
{
translated
.
title
}
desc
=
{
translated
.
desc
}
/>
<
Cell
size
=
"large"
...
...
@@ -177,7 +177,7 @@ const CellDemo = () => {
<
Cell
title
=
{
translated
.
name
}
icon
=
"my"
desc
=
{
translated
.
desc
}
isLink
/>
<
h2
>
{
translated
.
title6
}
</
h2
>
<
Cell
descTextAlign
=
"left"
desc
=
{
translated
.
desc
}
/>
<
h2
>
垂直居中
</
h2
>
<
h2
>
{
translated
.
title7
}
</
h2
>
<
Cell
center
title
=
{
translated
.
title
}
...
...
src/packages/cell/demo.tsx
浏览文件 @
d65d71f5
...
...
@@ -127,7 +127,7 @@ const CellDemo = () => {
)
=>
testClick
(
event
)
}
/>
<
Cell
title
=
{
translated
.
title4
}
roundRadius
=
"0"
/>
<
h2
>
尺寸设置large
</
h2
>
<
h2
>
{
translated
.
title9
}
</
h2
>
<
Cell
size
=
"large"
title
=
{
translated
.
title
}
desc
=
{
translated
.
desc
}
/>
<
Cell
size
=
"large"
...
...
@@ -176,7 +176,7 @@ const CellDemo = () => {
<
Cell
title
=
{
translated
.
name
}
icon
=
"my"
desc
=
{
translated
.
desc
}
isLink
/>
<
h2
>
{
translated
.
title6
}
</
h2
>
<
Cell
descTextAlign
=
"left"
desc
=
{
translated
.
desc
}
/>
<
h2
>
垂直居中
</
h2
>
<
h2
>
{
translated
.
title7
}
</
h2
>
<
Cell
center
title
=
{
translated
.
title
}
...
...
src/packages/ellipsis/demo.taro.tsx
浏览文件 @
d65d71f5
...
...
@@ -10,7 +10,9 @@ interface T {
end
:
string
middle
:
string
rows
:
string
expandCollapse
:
string
expand
:
string
collapse
:
string
}
const
EllipsisDemo
=
()
=>
{
const
[
translated
]
=
useTranslate
<
T
>
({
...
...
@@ -20,7 +22,9 @@ const EllipsisDemo = () => {
end
:
'
尾部省略
'
,
middle
:
'
中间省略
'
,
rows
:
'
多行省略
'
,
expand
:
'
展开收起
'
,
expandCollapse
:
'
展开收起
'
,
expand
:
'
展开
'
,
collapse
:
'
收起
'
,
},
'
en-US
'
:
{
basic
:
'
Basic Usage
'
,
...
...
@@ -28,7 +32,9 @@ const EllipsisDemo = () => {
end
:
'
Tailing
'
,
middle
:
'
Middle
'
,
rows
:
'
Multi-line
'
,
expand
:
'
Expand & Collapse
'
,
expandCollapse
:
'
Expand & Collapse
'
,
expand
:
'
expand
'
,
collapse
:
'
collapse
'
,
},
})
const
content
=
...
...
@@ -54,21 +60,21 @@ const EllipsisDemo = () => {
<
Cell
>
<
Ellipsis
content
=
{
content
}
direction
=
"start"
rows
=
"3"
/>
</
Cell
>
<
h2
>
{
translated
.
expand
}
</
h2
>
<
h2
>
{
translated
.
expand
Collapse
}
</
h2
>
<
Cell
>
<
Ellipsis
content
=
{
content
}
direction
=
"start"
expandText
=
"展开"
collapseText
=
"收起"
expandText
=
{
translated
.
expand
}
collapseText
=
{
translated
.
collapse
}
/>
</
Cell
>
<
Cell
>
<
Ellipsis
content
=
{
content
}
direction
=
"middle"
expandText
=
"展开"
collapseText
=
"收起"
expandText
=
{
translated
.
expand
}
collapseText
=
{
translated
.
collapse
}
/>
</
Cell
>
<
Cell
>
...
...
@@ -76,8 +82,8 @@ const EllipsisDemo = () => {
content
=
{
content
}
direction
=
"end"
rows
=
"3"
expandText
=
"展开"
collapseText
=
"收起"
expandText
=
{
translated
.
expand
}
collapseText
=
{
translated
.
collapse
}
/>
</
Cell
>
</
div
>
...
...
src/packages/ellipsis/demo.tsx
浏览文件 @
d65d71f5
...
...
@@ -9,7 +9,9 @@ interface T {
end
:
string
middle
:
string
rows
:
string
expandCollapse
:
string
expand
:
string
collapse
:
string
}
const
EllipsisDemo
=
()
=>
{
const
[
translated
]
=
useTranslate
<
T
>
({
...
...
@@ -19,7 +21,9 @@ const EllipsisDemo = () => {
end
:
'
尾部省略
'
,
middle
:
'
中间省略
'
,
rows
:
'
多行省略
'
,
expand
:
'
展开收起
'
,
expandCollapse
:
'
展开收起
'
,
expand
:
'
展开
'
,
collapse
:
'
收起
'
,
},
'
en-US
'
:
{
basic
:
'
Basic Usage
'
,
...
...
@@ -27,7 +31,9 @@ const EllipsisDemo = () => {
end
:
'
Tailing
'
,
middle
:
'
Middle
'
,
rows
:
'
Multi-line
'
,
expand
:
'
Expand & Collapse
'
,
expandCollapse
:
'
Expand & Collapse
'
,
expand
:
'
expand
'
,
collapse
:
'
collapse
'
,
},
})
const
content
=
...
...
@@ -52,21 +58,21 @@ const EllipsisDemo = () => {
<
Cell
>
<
Ellipsis
content
=
{
content
}
direction
=
"start"
rows
=
"3"
/>
</
Cell
>
<
h2
>
{
translated
.
expand
}
</
h2
>
<
h2
>
{
translated
.
expand
Collapse
}
</
h2
>
<
Cell
>
<
Ellipsis
content
=
{
content
}
direction
=
"start"
expandText
=
"展开"
collapseText
=
"收起"
expandText
=
{
translated
.
expand
}
collapseText
=
{
translated
.
collapse
}
/>
</
Cell
>
<
Cell
>
<
Ellipsis
content
=
{
content
}
direction
=
"middle"
expandText
=
"展开"
collapseText
=
"收起"
expandText
=
{
translated
.
expand
}
collapseText
=
{
translated
.
collapse
}
/>
</
Cell
>
<
Cell
>
...
...
@@ -74,8 +80,8 @@ const EllipsisDemo = () => {
content
=
{
content
}
direction
=
"end"
rows
=
"3"
expandText
=
"展开"
collapseText
=
"收起"
expandText
=
{
translated
.
expand
}
collapseText
=
{
translated
.
collapse
}
/>
</
Cell
>
</
div
>
...
...
src/packages/fixednav/demo.taro.tsx
浏览文件 @
d65d71f5
...
...
@@ -2,28 +2,79 @@ import React, { useState, MouseEvent } from 'react'
import
{
FixedNav
,
Drag
,
Icon
}
from
'
@/packages/nutui.react.taro
'
import
Header
from
'
@/sites/components/header
'
import
Taro
from
'
@tarojs/taro
'
import
{
useTranslate
}
from
'
@/sites/assets/locale/taro
'
type
TFixedNavDemo
=
{
title1
:
string
title2
:
string
title3
:
string
title4
:
string
title5
:
string
title6
:
string
home
:
string
category
:
string
cart
:
string
mine
:
string
}
const
FixedNavDemo
=
()
=>
{
const
[
translated
]
=
useTranslate
<
TFixedNavDemo
>
({
'
zh-CN
'
:
{
title1
:
'
基础用法
'
,
title2
:
'
左侧收起
'
,
title3
:
'
左侧展开
'
,
title4
:
'
自定义开
'
,
title5
:
'
自定义关
'
,
title6
:
'
支持拖拽
'
,
home
:
'
首页
'
,
category
:
'
分类
'
,
cart
:
'
购物车
'
,
mine
:
'
我的
'
,
},
'
zh-TW
'
:
{
title1
:
'
基礎用法
'
,
title2
:
'
左側收起
'
,
title3
:
'
左側展開
'
,
title4
:
'
自定義開
'
,
title5
:
'
自定義關
'
,
title6
:
'
支持拖拽
'
,
home
:
'
首頁
'
,
category
:
'
分類
'
,
cart
:
'
購物車
'
,
mine
:
'
我的
'
,
},
'
en-US
'
:
{
title1
:
'
Basic usage
'
,
title2
:
'
Left collapsed
'
,
title3
:
'
Left expansion
'
,
title4
:
'
Custom On
'
,
title5
:
'
Custom Off
'
,
title6
:
'
Support drag and drop
'
,
home
:
'
Home
'
,
category
:
'
Category
'
,
cart
:
'
Cart
'
,
mine
:
'
Mine
'
,
},
})
const
navList
=
[
{
id
:
1
,
text
:
'
首页
'
,
text
:
translated
.
home
,
icon
:
'
https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png
'
,
},
{
id
:
2
,
text
:
'
分类
'
,
text
:
translated
.
category
,
icon
:
'
https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png
'
,
},
{
id
:
3
,
text
:
'
购物车
'
,
text
:
translated
.
cart
,
num
:
2
,
icon
:
'
https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png
'
,
},
{
id
:
4
,
text
:
'
我的
'
,
text
:
translated
.
mine
,
icon
:
'
https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png
'
,
},
]
...
...
@@ -75,7 +126,7 @@ const FixedNavDemo = () => {
<
div
className
=
{
`demo
${
Taro
.
getEnv
()
===
'
WEB
'
?
'
web
'
:
''
}
`
}
>
<
FixedNav
navList
=
{
navList
}
activeText
=
"基础用法"
activeText
=
{
translated
.
title1
}
overlay
position
=
{
{
top
:
'
70px
'
}
}
onChange
=
{
change1
}
...
...
@@ -87,8 +138,8 @@ const FixedNavDemo = () => {
type
=
"left"
position
=
{
{
top
:
'
140px
'
}
}
visible
=
{
visible2
}
activeText
=
"左侧收起"
unActiveText
=
"左侧展开"
activeText
=
{
translated
.
title2
}
unActiveText
=
{
translated
.
title3
}
onChange
=
{
change2
}
onSelected
=
{
selected2
}
/>
...
...
@@ -120,7 +171,9 @@ const FixedNavDemo = () => {
<
Icon
name
=
"retweet"
color
=
"#fff"
>
{
'
'
}
</
Icon
>
<
span
className
=
"text"
>
{
visible4
?
'
自定义开
'
:
'
自定义关
'
}
</
span
>
<
span
className
=
"text"
>
{
visible4
?
translated
.
title4
:
translated
.
title5
}
</
span
>
</>
}
/>
...
...
@@ -128,7 +181,7 @@ const FixedNavDemo = () => {
<
Drag
direction
=
"y"
style
=
{
{
right
:
'
0px
'
,
bottom
:
'
240px
'
}
}
>
<
FixedNav
navList
=
{
navList
}
unActiveText
=
"支持拖拽"
unActiveText
=
{
translated
.
title6
}
visible
=
{
visible5
}
onChange
=
{
change5
}
onSelected
=
{
selected5
}
...
...
src/packages/fixednav/demo.tsx
浏览文件 @
d65d71f5
...
...
@@ -11,6 +11,10 @@ type TFixedNavDemo = {
title4
:
string
title5
:
string
title6
:
string
home
:
string
category
:
string
cart
:
string
mine
:
string
}
const
FixedNavDemo
=
()
=>
{
...
...
@@ -22,6 +26,10 @@ const FixedNavDemo = () => {
title4
:
'
自定义开
'
,
title5
:
'
自定义关
'
,
title6
:
'
支持拖拽
'
,
home
:
'
首页
'
,
category
:
'
分类
'
,
cart
:
'
购物车
'
,
mine
:
'
我的
'
,
},
'
zh-TW
'
:
{
title1
:
'
基礎用法
'
,
...
...
@@ -30,6 +38,10 @@ const FixedNavDemo = () => {
title4
:
'
自定義開
'
,
title5
:
'
自定義關
'
,
title6
:
'
支持拖拽
'
,
home
:
'
首頁
'
,
category
:
'
分類
'
,
cart
:
'
購物車
'
,
mine
:
'
我的
'
,
},
'
en-US
'
:
{
title1
:
'
Basic usage
'
,
...
...
@@ -38,28 +50,32 @@ const FixedNavDemo = () => {
title4
:
'
Custom On
'
,
title5
:
'
Custom Off
'
,
title6
:
'
Support drag and drop
'
,
home
:
'
Home
'
,
category
:
'
Category
'
,
cart
:
'
Cart
'
,
mine
:
'
Mine
'
,
},
})
const
navList
=
[
{
id
:
1
,
text
:
'
首页
'
,
text
:
translated
.
home
,
icon
:
'
https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png
'
,
},
{
id
:
2
,
text
:
'
分类
'
,
text
:
translated
.
category
,
icon
:
'
https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png
'
,
},
{
id
:
3
,
text
:
'
购物车
'
,
text
:
translated
.
cart
,
num
:
2
,
icon
:
'
https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png
'
,
},
{
id
:
4
,
text
:
'
我的
'
,
text
:
translated
.
mine
,
icon
:
'
https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png
'
,
},
]
...
...
src/packages/image/demo.taro.tsx
浏览文件 @
d65d71f5
...
...
@@ -14,6 +14,8 @@ const ImageDemo = () => {
circle
:
'
圆形图片
'
,
loading
:
'
加载中提示
'
,
error
:
'
加载失败
'
,
default
:
'
默认
'
,
custom
:
'
自定义
'
,
},
'
en-US
'
:
{
basic
:
'
Basic Usage
'
,
...
...
@@ -22,6 +24,8 @@ const ImageDemo = () => {
circle
:
'
Round
'
,
loading
:
'
Loading
'
,
error
:
'
Error
'
,
default
:
'
Default
'
,
custom
:
'
Custom
'
,
},
})
const
src
=
...
...
@@ -41,7 +45,7 @@ const ImageDemo = () => {
<
Row
gutter
=
{
10
}
>
<
Col
span
=
"8"
>
<
Image
width
=
"80"
height
=
"80"
showLoading
/>
<
div
className
=
"image-text"
>
默认
</
div
>
<
div
className
=
"image-text"
>
{
translated
.
default
}
</
div
>
</
Col
>
<
Col
span
=
"8"
>
<
Image
...
...
@@ -53,7 +57,7 @@ const ImageDemo = () => {
</>
}
/>
<
div
className
=
"image-text"
>
自定义
</
div
>
<
div
className
=
"image-text"
>
{
translated
.
custom
}
</
div
>
</
Col
>
</
Row
>
</
Cell
>
...
...
@@ -63,13 +67,13 @@ const ImageDemo = () => {
<
Row
gutter
=
{
10
}
>
<
Col
span
=
"8"
>
<
Image
src
=
"#"
width
=
"80"
height
=
"80"
showError
/>
<
div
className
=
"image-text"
>
默认
</
div
>
<
div
className
=
"image-text"
>
{
translated
.
default
}
</
div
>
</
Col
>
<
Col
span
=
"8"
>
<
Image
src
=
"#"
width
=
"80"
height
=
"80"
showError
>
<
Icon
name
=
"circle-close"
/>
</
Image
>
<
div
className
=
"image-text"
>
自定义
</
div
>
<
div
className
=
"image-text"
>
{
translated
.
custom
}
</
div
>
</
Col
>
</
Row
>
</
Cell
>
...
...
src/packages/image/demo.tsx
浏览文件 @
d65d71f5
...
...
@@ -16,6 +16,8 @@ const ImageDemo = () => {
loading
:
'
加载中提示
'
,
error
:
'
加载失败
'
,
lazyload
:
'
图片懒加载
'
,
default
:
'
默认
'
,
custom
:
'
自定义
'
,
},
'
en-US
'
:
{
basic
:
'
Basic Usage
'
,
...
...
@@ -25,6 +27,8 @@ const ImageDemo = () => {
loading
:
'
Loading
'
,
error
:
'
Error
'
,
lazyload
:
'
Lazyload
'
,
default
:
'
Default
'
,
custom
:
'
Custom
'
,
},
})
const
src
=
...
...
@@ -155,7 +159,7 @@ const ImageDemo = () => {
console
.
log
(
'
image onload
'
)
}
}
/>
<
div
className
=
"image-text"
>
默认
</
div
>
<
div
className
=
"image-text"
>
{
translated
.
default
}
</
div
>
</
Col
>
<
Col
span
=
"8"
>
<
Image
...
...
@@ -168,7 +172,7 @@ const ImageDemo = () => {
</>
}
/>
<
div
className
=
"image-text"
>
自定义
</
div
>
<
div
className
=
"image-text"
>
{
translated
.
custom
}
</
div
>
</
Col
>
</
Row
>
</
Cell
>
...
...
@@ -186,13 +190,13 @@ const ImageDemo = () => {
console
.
log
(
'
image error
'
)
}
}
/>
<
div
className
=
"image-text"
>
默认
</
div
>
<
div
className
=
"image-text"
>
{
translated
.
default
}
</
div
>
</
Col
>
<
Col
span
=
"8"
>
<
Image
src
=
"https://x"
width
=
"100"
height
=
"100"
showError
>
<
Icon
name
=
"circle-close"
/>
</
Image
>
<
div
className
=
"image-text"
>
自定义
</
div
>
<
div
className
=
"image-text"
>
{
translated
.
custom
}
</
div
>
</
Col
>
</
Row
>
</
Cell
>
...
...
src/packages/pulltorefresh/demo.taro.tsx
浏览文件 @
d65d71f5
...
...
@@ -2,8 +2,20 @@ import React, { useState } from 'react'
import
{
PullToRefresh
,
Cell
,
Toast
}
from
'
@/packages/nutui.react.taro
'
import
Header
from
'
@/sites/components/header
'
import
Taro
from
'
@tarojs/taro
'
import
{
useTranslate
}
from
'
@/sites/assets/locale/taro
'
const
PullToRefreshDemo
=
()
=>
{
const
[
translated
]
=
useTranslate
<
TSideNavBarDemo
>
({
'
zh-CN
'
:
{
basic
:
'
基础用法
'
,
},
'
zh-TW
'
:
{
basic
:
'
基礎用法
'
,
},
'
en-US
'
:
{
basic
:
'
Basic Usage
'
,
},
})
const
[
list
]
=
useState
([
1
,
2
,
3
,
4
,
5
,
6
,
7
])
const
[
show
,
SetShow
]
=
useState
(
false
)
const
[
toastMsg
,
SetToastMsg
]
=
useState
(
''
)
...
...
@@ -15,7 +27,7 @@ const PullToRefreshDemo = () => {
<>
<
Header
/>
<
div
className
=
{
`demo
${
Taro
.
getEnv
()
===
'
WEB
'
?
'
web
'
:
''
}
`
}
>
<
h2
>
基础用法
</
h2
>
<
h2
>
{
translated
.
basic
}
</
h2
>
<
PullToRefresh
onRefresh
=
{
()
=>
new
Promise
((
resolve
)
=>
{
...
...
src/packages/pulltorefresh/demo.tsx
浏览文件 @
d65d71f5
...
...
@@ -2,13 +2,25 @@ import React, { useState } from 'react'
import
{
PullToRefresh
}
from
'
./pulltorefresh
'
import
Cell
from
'
@/packages/cell
'
import
Toast
from
'
@/packages/toast
'
import
{
useTranslate
}
from
'
@/sites/assets/locale
'
const
PullToRefreshDemo
=
()
=>
{
const
[
translated
]
=
useTranslate
<
TSideNavBarDemo
>
({
'
zh-CN
'
:
{
basic
:
'
基础用法
'
,
},
'
zh-TW
'
:
{
basic
:
'
基礎用法
'
,
},
'
en-US
'
:
{
basic
:
'
Basic Usage
'
,
},
})
const
[
list
]
=
useState
([
1
,
2
,
3
,
4
,
5
,
6
,
7
])
return
(
<>
<
div
className
=
"demo"
>
<
h2
>
基础用法
</
h2
>
<
h2
>
{
translated
.
basic
}
</
h2
>
<
PullToRefresh
onRefresh
=
{
()
=>
new
Promise
((
resolve
)
=>
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录