Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 d65d71f5 编写于 作者: E eiinu 提交者： GitHub
浏览文件
操作

feat: 多个组件 demo 完善国际化 (#710)

上级 04bf82c6
隐藏空白更改
内联 并排
Showing with 158 addition and 45 deletion
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.expandCollapse}</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.expandCollapse}</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.
先完成此消息的编辑！
想要评论请 注册 或