Skip to content

Commit

Permalink
fix(indicator): demo拆解与规范 (jdf2e#2090)
Browse files Browse the repository at this point in the history
  • Loading branch information
@eiinu
eiinu authored Mar 20, 2024
1 parent 73c6ae3 commit 36c785b
Show file tree
Hide file tree
Showing 14 changed files with 328 additions and 670 deletions.
121 changes: 25 additions & 96 deletions src/packages/indicator/demo.taro.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,120 +1,49 @@
import React from 'react'
import Taro from '@tarojs/taro'
import { useTranslate } from '@/sites/assets/locale/taro'
import { Cell, Indicator, ConfigProvider } from '@/packages/nutui.react.taro'
import Header from '@/sites/components/header'
import Demo1 from './demos/taro/demo1'
import Demo2 from './demos/taro/demo2'
import Demo3 from './demos/taro/demo3'
import Demo4 from './demos/taro/demo4'

interface T {
ce5c5446: string
c38a08ef: string
c123sda1: string
c38a08e4: string
}
const IndicatorDemo = () => {
const [translated] = useTranslate<T>({
const [translated] = useTranslate({
'zh-CN': {
ce5c5446: '基础用法',
c38a08ef: '自定义节点',
c38a08e4: '自定义',
c123sda1: '竖向展示',
basic: '基础用法',
customNode: '自定义节点',
custom: '自定义',
vertical: '竖向展示',
},
'zh-TW': {
ce5c5446: '基礎用法',
c38a08ef: '自定义节点',
c38a08e4: '自定义',
c123sda1: '豎向展示',
basic: '基礎用法',
customNode: '自定义节点',
custom: '自定义',
vertical: '豎向展示',
},
'en-US': {
ce5c5446: 'Basic usage',
c38a08ef: 'Custom Node',
c38a08e4: 'Custom',
c123sda1: 'Vertical display',
basic: 'Basic usage',
customNode: 'Custom Node',
custom: 'Custom',
vertical: 'Vertical display',
},
})

const customTheme = {
nutuiIndicatorColor: '#3768fa',
nutuiIndicatorDotColor: '#ddd',
nutuiIndicatorDotSize: '6px',
nutuiIndicatorDotActiveSize: '24px',
}
return (
<>
<Header />
<div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
<h2>{translated.ce5c5446}</h2>
<Cell>
<Indicator total={3} current={0} />
</Cell>
<Cell>
<Indicator total={3} current={1} />
</Cell>
<Cell>
<Indicator total={3} current={2} />
</Cell>
<h2>{translated.basic}</h2>
<Demo1 />

<h2>{translated.c38a08ef}</h2>
<Cell>
<Indicator total={6} current={5}>
<div
style={{
display: 'inline-block',
width: '14px',
height: '14px',
lineHeight: '14px',
textAlign: 'center',
fontSize: '12px',
color: '#FFFFFF',
border: '1px solid #FFFFFF',
borderRadius: '50%',
margin: '4px',
background: `var(--nutui-color-primary)`,
boxShadow: `0 0 1px 1px var(--nutui-color-primary)`,
}}
>
{5}
</div>
</Indicator>
</Cell>
<h2>{translated.customNode}</h2>
<Demo2 />

<h2>{translated.c38a08e4}</h2>
<Cell>
<ConfigProvider theme={customTheme}>
<Indicator total={6} current={5} />
</ConfigProvider>
</Cell>
<h2>{translated.custom}</h2>
<Demo3 />

<h2>{translated.c123sda1}</h2>
<Cell>
<Indicator total={6} current={5} direction="vertical">
<div
style={{
display: 'inline-block',
width: '14px',
height: '14px',
lineHeight: '14px',
textAlign: 'center',
fontSize: '12px',
color: '#FFFFFF',
border: '1px solid #FFFFFF',
borderRadius: '50%',
margin: '4px',
background: `var(--nutui-color-primary)`,
boxShadow: `0 0 1px 1px var(--nutui-color-primary)`,
}}
>
{5}
</div>
</Indicator>
<Indicator
total={6}
current={2}
direction="vertical"
style={{
marginInlineStart: '50px',
}}
/>
</Cell>
<h2>{translated.vertical}</h2>
<Demo4 />
</div>
</>
)
Expand Down
123 changes: 25 additions & 98 deletions src/packages/indicator/demo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,119 +1,46 @@
import React from 'react'
import { Indicator } from './indicator'
import Cell from '@/packages/cell'
import { useTranslate } from '../../sites/assets/locale'
import ConfigProvider from '@/packages/configprovider'
import Demo1 from './demos/h5/demo1'
import Demo2 from './demos/h5/demo2'
import Demo3 from './demos/h5/demo3'
import Demo4 from './demos/h5/demo4'

interface T {
ce5c5446: string
c38a08ef: string
c123sda1: string
c38a08e4: string
}
const IndicatorDemo = () => {
const [translated] = useTranslate<T>({
const [translated] = useTranslate({
'zh-CN': {
ce5c5446: '基础用法',
c38a08ef: '自定义节点',
c38a08e4: '自定义',
c123sda1: '竖向展示',
basic: '基础用法',
customNode: '自定义节点',
custom: '自定义',
vertical: '竖向展示',
},
'zh-TW': {
ce5c5446: '基礎用法',
c38a08ef: '自定义节点',
c38a08e4: '自定义',
c123sda1: '豎向展示',
basic: '基礎用法',
customNode: '自定义节点',
custom: '自定义',
vertical: '豎向展示',
},
'en-US': {
ce5c5446: 'Basic usage',
c38a08ef: 'Custom Node',
c38a08e4: 'Custom',
c123sda1: 'Vertical display',
basic: 'Basic usage',
customNode: 'Custom Node',
custom: 'Custom',
vertical: 'Vertical display',
},
})

const customTheme = {
nutuiIndicatorColor: '#3768fa',
nutuiIndicatorDotColor: '#ddd',
nutuiIndicatorDotSize: '6px',
nutuiIndicatorDotActiveSize: '24px',
}
return (
<>
<div className="demo">
<h2>{translated.ce5c5446}</h2>
<Cell>
<Indicator total={3} current={0} />
</Cell>
<Cell>
<Indicator total={3} current={1} />
</Cell>
<Cell>
<Indicator total={3} current={2} />
</Cell>
<h2>{translated.basic}</h2>
<Demo1 />

<h2>{translated.c38a08ef}</h2>
<Cell>
<Indicator total={6} current={5}>
<div
style={{
display: 'inline-block',
width: '14px',
height: '14px',
lineHeight: '14px',
textAlign: 'center',
fontSize: '12px',
color: '#FFFFFF',
border: '1px solid #FFFFFF',
borderRadius: '50%',
margin: '4px',
background: `var(--nutui-color-primary)`,
boxShadow: `0 0 1px 1px var(--nutui-color-primary)`,
}}
>
{5}
</div>
</Indicator>
</Cell>
<h2>{translated.customNode}</h2>
<Demo2 />

<h2>{translated.c38a08e4}</h2>
<Cell>
<ConfigProvider theme={customTheme}>
<Indicator total={6} current={5} />
</ConfigProvider>
</Cell>
<h2>{translated.custom}</h2>
<Demo3 />

<h2>{translated.c123sda1}</h2>
<Cell>
<Indicator total={6} current={5} direction="vertical">
<div
style={{
display: 'inline-block',
width: '14px',
height: '14px',
lineHeight: '14px',
textAlign: 'center',
fontSize: '12px',
color: '#FFFFFF',
border: '1px solid #FFFFFF',
borderRadius: '50%',
margin: '4px',
background: `var(--nutui-color-primary)`,
boxShadow: `0 0 1px 1px var(--nutui-color-primary)`,
}}
>
{5}
</div>
</Indicator>
<Indicator
total={6}
current={2}
direction="vertical"
style={{
marginInlineStart: '50px',
}}
/>
</Cell>
<h2>{translated.vertical}</h2>
<Demo4 />
</div>
</>
)
Expand Down
19 changes: 19 additions & 0 deletions src/packages/indicator/demos/h5/demo1.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from 'react'
import { Indicator, Cell } from '@nutui/nutui-react'

const Demo1 = () => {
return (
<>
<Cell>
<Indicator total={3} current={0} />
</Cell>
<Cell>
<Indicator total={3} current={1} />
</Cell>
<Cell>
<Indicator total={3} current={2} />
</Cell>
</>
)
}
export default Demo1
30 changes: 30 additions & 0 deletions src/packages/indicator/demos/h5/demo2.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from 'react'
import { Indicator, Cell } from '@nutui/nutui-react'

const Demo2 = () => {
return (
<Cell>
<Indicator total={6} current={5}>
<div
style={{
display: 'inline-block',
width: '14px',
height: '14px',
lineHeight: '14px',
textAlign: 'center',
fontSize: '12px',
color: '#FFFFFF',
border: '1px solid #FFFFFF',
borderRadius: '50%',
margin: '4px',
background: `var(--nutui-color-primary)`,
boxShadow: `0 0 1px 1px var(--nutui-color-primary)`,
}}
>
{5}
</div>
</Indicator>
</Cell>
)
}
export default Demo2
20 changes: 20 additions & 0 deletions src/packages/indicator/demos/h5/demo3.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React from 'react'
import { Indicator, Cell, ConfigProvider } from '@nutui/nutui-react'

const customTheme = {
nutuiIndicatorColor: '#3768fa',
nutuiIndicatorDotColor: '#ddd',
nutuiIndicatorDotSize: '8px',
nutuiIndicatorDotActiveSize: '24px',
}

const Demo3 = () => {
return (
<Cell>
<ConfigProvider theme={customTheme}>
<Indicator total={6} current={5} />
</ConfigProvider>
</Cell>
)
}
export default Demo3
Loading

0 comments on commit 36c785b

Please sign in to comment.