Skip to content

Commit

Permalink
fix(space): demo拆解与规范 (#2021)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Alex-huxiyang
Alex-huxiyang authored Mar 14, 2024
1 parent 885ea21 commit f848fcb
Show file tree
Hide file tree
Showing 20 changed files with 281 additions and 801 deletions.
52 changes: 1 addition & 51 deletions src/packages/cell/demo.taro.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,84 +10,34 @@ import Demo5 from './demos/taro/demo5'
import Demo6 from './demos/taro/demo6'
import Demo7 from './demos/taro/demo7'

interface T {
basic: string
extra: string
description: string
title: string
title1: string
title2: string
title3: string
title4: string
title5: string
title6: string
title7: string
description1: string
link: string
urlJump: string
content: string
customRight: string
clickEventToast: string
}

const CellDemo = () => {
const [translated] = useTranslate<T>({
const [translated] = useTranslate({
'zh-CN': {
basic: '基础用法',
extra: '描述文字',
description: '使用 nut-cell-group 支持 title description',
title: '我是标题',
title1: '我是描述',
title2: '点击测试',
title3: '圆角设置为0',
title4: '链接 | 分组用法',
title5: '垂直居中',
title6: '自定义标题区域',
title7: '分组用法',
description1: '单元格之间不显示下边线',
link: '链接',
urlJump: 'URL 跳转',
content: '自定义内容',
customRight: '自定义右侧区域',
clickEventToast: '点击事件',
},
'zh-TW': {
basic: '基础用法',
extra: '描述文字',
description: '使用 nut-cell-group 支持 title description',
title: '我是標題',
title1: '我是描述',
title2: '點擊測試',
title3: '圓角設置為0',
title4: '鏈接 | 分組用法',
title5: '垂直居中',
title6: '自定義標題區域',
title7: '分組用法',
description1: '單元格之間不顯示下邊線',
link: '鏈接',
urlJump: 'URL 跳轉',
content: '自定義內容',
customRight: '自定義右側區域',
clickEventToast: '点击事件',
},
'en-US': {
basic: 'Basic Usage',
extra: 'extra',
description: 'Usage nut-cell-group support title description',
title: 'Title',
title1: 'Description',
title2: 'Click Test',
title3: 'Round Radius 0',
title4: 'Link | Cell.Group Usage',
title5: 'Vertical Center',
title6: 'Customize the title area',
title7: 'Grouping usage',
description1: 'The bottom edge is not displayed between cells',
link: 'Link',
urlJump: 'URL Jump',
content: 'Customize Content',
customRight: 'Customize the right area',
clickEventToast: 'Click Test',
},
})

Expand Down
52 changes: 1 addition & 51 deletions src/packages/cell/demo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,84 +8,34 @@ import Demo5 from './demos/h5/demo5'
import Demo6 from './demos/h5/demo6'
import Demo7 from './demos/h5/demo7'

interface T {
basic: string
extra: string
description: string
title: string
title1: string
title2: string
title3: string
title4: string
title5: string
title6: string
title7: string
description1: string
link: string
urlJump: string
content: string
customRight: string
clickEventToast: string
}

const CellDemo = () => {
const [translated] = useTranslate<T>({
const [translated] = useTranslate({
'zh-CN': {
basic: '基础用法',
extra: '描述文字',
description: '使用 nut-cell-group 支持 title description',
title: '我是标题',
title1: '我是描述',
title2: '点击测试',
title3: '圆角设置为0',
title4: '链接 | 分组用法',
title5: '垂直居中',
title6: '自定义标题区域',
title7: '分组用法',
description1: '单元格之间不显示下边线',
link: '链接',
urlJump: 'URL 跳转',
content: '自定义内容',
customRight: '自定义右侧区域',
clickEventToast: '点击事件',
},
'zh-TW': {
basic: '基础用法',
extra: '描述文字',
description: '使用 nut-cell-group 支持 title description',
title: '我是標題',
title1: '我是描述',
title2: '點擊測試',
title3: '圓角設置為0',
title4: '鏈接 | 分組用法',
title5: '垂直居中',
title6: '自定義標題區域',
title7: '分組用法',
description1: '單元格之間不顯示下邊線',
link: '鏈接',
urlJump: 'URL 跳轉',
content: '自定義內容',
customRight: '自定義右側區域',
clickEventToast: '点击事件',
},
'en-US': {
basic: 'Basic Usage',
extra: 'extra',
description: 'Usage nut-cell-group support title description',
title: 'Title',
title1: 'Description',
title2: 'Click Test',
title3: 'Round Radius 0',
title4: 'Link | Cell.Group Usage',
title5: 'Vertical Center',
title6: 'Customize the title area',
title7: 'Grouping usage',
description1: 'The bottom edge is not displayed between cells',
link: 'Link',
urlJump: 'URL Jump',
content: 'Customize Content',
customRight: 'Customize the right area',
clickEventToast: 'Click Test',
},
})

Expand Down
126 changes: 14 additions & 112 deletions src/packages/space/demo.taro.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,22 @@
import React from 'react'
import Taro from '@tarojs/taro'
import {
Space,
Button,
Cell,
ConfigProvider,
} from '@/packages/nutui.react.taro'
import { Cell } from '@/packages/nutui.react.taro'
import { useTranslate } from '@/sites/assets/locale/taro'
import Header from '@/sites/components/header'

interface Button {
button1: string
button2: string
button3: string
button4: string
button5: string
button6: string
}
interface T extends Button {
basic: string
wrap: string
direction: string
spaceGap: string
mainAxisAlign: string
crossAxisAlign: string
}
import Demo1 from './demos/taro/demo1'
import Demo2 from './demos/taro/demo2'
import Demo3 from './demos/taro/demo3'
import Demo4 from './demos/taro/demo4'
import Demo5 from './demos/taro/demo5'
import Demo6 from './demos/taro/demo6'

const SpaceDemo = () => {
const [translated] = useTranslate<T>({
const [translated] = useTranslate({
'zh-CN': {
basic: '基本用法',
wrap: '换行',
direction: '垂直',
spaceGap: '间距大小',
button1: '按钮1',
button2: '按钮2',
button3: '按钮3',
button4: '按钮4',
button5: '按钮5',
button6: '按钮6',
mainAxisAlign: '主轴对齐方式',
crossAxisAlign: '交叉轴对齐方式',
},
Expand All @@ -47,12 +25,6 @@ const SpaceDemo = () => {
wrap: '換行',
direction: '垂直',
spaceGap: '間距大小',
button1: '按钮1',
button2: '按钮2',
button3: '按钮3',
button4: '按钮4',
button5: '按钮5',
button6: '按钮6',
mainAxisAlign: '主軸對齊方式',
crossAxisAlign: '交叉軸對齊方式',
},
Expand All @@ -61,12 +33,6 @@ const SpaceDemo = () => {
wrap: 'wrap',
direction: 'Direction',
spaceGap: 'SpaceGap',
button1: 'button1',
button2: 'button2',
button3: 'button3',
button4: 'button4',
button5: 'button5',
button6: 'button6',
mainAxisAlign: 'MainAxis Alignment',
crossAxisAlign: 'CrossAxis Alignment',
},
Expand All @@ -78,91 +44,27 @@ const SpaceDemo = () => {
<div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
<h2>{translated.basic}</h2>
<Cell>
<Space>
<Button>{translated.button1}</Button>
<Button>{translated.button2}</Button>
<Button>{translated.button3}</Button>
</Space>
<Demo1 />
</Cell>

<h2>{translated.wrap}</h2>
<Cell>
<Space wrap>
<Button>{translated.button1}</Button>
<Button>{translated.button2}</Button>
<Button>{translated.button3}</Button>
<Button>{translated.button4}</Button>
<Button>{translated.button5}</Button>
<Button>{translated.button6}</Button>
</Space>
<Demo2 />
</Cell>

<h2>{translated.direction}</h2>
<Cell>
<Space direction="vertical">
<Button>{translated.button1}</Button>
<Button>{translated.button2}</Button>
<Button>{translated.button3}</Button>
</Space>
<Demo3 />
</Cell>

<h2>{translated.spaceGap}</h2>
<Cell>
<ConfigProvider
theme={{
nutuiSpaceGap: '20px',
}}
>
<Space>
<Button>{translated.button1}</Button>
<Button>{translated.button2}</Button>
<Button>{translated.button3}</Button>
</Space>
</ConfigProvider>
<Demo4 />
</Cell>

<h2>{translated.mainAxisAlign}</h2>
<Cell style={{ display: 'block' }}>
<Space justify="start" wrap>
<Button>{translated.button1}</Button>
<div>
<Button block style={{ marginBottom: 5 }}>
{translated.button2}
</Button>
<Button block>{translated.button2}</Button>
</div>
<div>
<Button block style={{ marginBottom: 5 }}>
{translated.button3}
</Button>
<Button block style={{ marginBottom: 5 }}>
{translated.button3}
</Button>
<Button block>{translated.button3}</Button>
</div>
</Space>
<Demo5 />
</Cell>

<h2>{translated.crossAxisAlign}</h2>
<Cell>
<Space align="end" wrap>
<Button>{translated.button1}</Button>
<div>
<Button block style={{ marginBottom: 5 }}>
{translated.button2}
</Button>
<Button block>{translated.button2}</Button>
</div>
<div>
<Button block style={{ marginBottom: 5 }}>
{translated.button3}
</Button>
<Button block style={{ marginBottom: 5 }}>
{translated.button3}
</Button>
<Button block>{translated.button3}</Button>
</div>
</Space>
<Demo6 />
</Cell>
</div>
</>
Expand Down
Loading

0 comments on commit f848fcb

Please sign in to comment.