Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(v15): indicator adaptation #2746

Merged
merged 12 commits into from
Dec 27, 2024
Merged

feat(v15): indicator adaptation #2746

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
ea770d1
feat(v14): indicator adaptation
oasis-cloud Nov 12, 2024
68fad76
feat(v14): indicator adaptation
oasis-cloud Nov 13, 2024
6cddb63
feat: 增加视觉限制最大宽度
oasis-cloud Nov 22, 2024
b9ce36e
Merge branch 'feat_v3.x' into v14/indicator
oasis-cloud Dec 23, 2024
a6bd87e
fix: review
oasis-cloud Dec 23, 2024
9915970
fix: update test
oasis-cloud Dec 23, 2024
d35a0be
Merge branch 'feat_v3.x' into v14/indicator
oasis-cloud Dec 24, 2024
9559885
fix: 覆盖率
oasis-cloud Dec 24, 2024
854b67a
Merge branch 'feat_v3.x' into v14/indicator
xiaoyatong Dec 25, 2024
f30567f
fix: review
oasis-cloud Dec 26, 2024
a5818bc
Merge branch 'feat_v3.x' into v14/indicator
oasis-cloud Dec 26, 2024
e925231
fix: review
oasis-cloud Dec 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1020,6 +1020,7 @@
"sort": 16,
"show": true,
"taro": true,
"v14": true,
"author": "liukun"
},
{
Expand Down
14 changes: 14 additions & 0 deletions src/packages/indicator/demo.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,31 @@ 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 IndicatorDemo = () => {
const [translated] = useTranslate({
'zh-CN': {
basic: '基础用法',
white: '白色',
type: '类型',
customNode: '自定义节点',
custom: '自定义',
vertical: '竖向展示',
},
'zh-TW': {
basic: '基礎用法',
white: '白色',
type: '类型',
customNode: '自定义节点',
custom: '自定义',
vertical: '豎向展示',
},
'en-US': {
basic: 'Basic usage',
white: 'White',
type: 'Type',
customNode: 'Custom Node',
custom: 'Custom',
vertical: 'Vertical display',
Expand All @@ -37,6 +45,12 @@ const IndicatorDemo = () => {
<View className="h2">{translated.basic}</View>
<Demo1 />

<View className="h2">{translated.white}</View>
<Demo5 />

<View className="h2">{translated.type}</View>
<Demo6 />

<View className="h2">{translated.customNode}</View>
<Demo2 />

Expand Down
14 changes: 14 additions & 0 deletions src/packages/indicator/demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,31 @@ import Demo1 from './demos/h5/demo1'
import Demo2 from './demos/h5/demo2'
import Demo3 from './demos/h5/demo3'
import Demo4 from './demos/h5/demo4'
import Demo5 from './demos/h5/demo5'
import Demo6 from './demos/h5/demo6'

const IndicatorDemo = () => {
const [translated] = useTranslate({
'zh-CN': {
basic: '基础用法',
white: '白色',
type: '类型',
oasis-cloud marked this conversation as resolved.
Show resolved Hide resolved
customNode: '自定义节点',
custom: '自定义',
vertical: '竖向展示',
},
'zh-TW': {
basic: '基礎用法',
white: '白色',
type: '类型',
customNode: '自定义节点',
custom: '自定义',
vertical: '豎向展示',
},
'en-US': {
basic: 'Basic usage',
white: 'White',
type: 'Type',
customNode: 'Custom Node',
custom: 'Custom',
vertical: 'Vertical display',
Expand All @@ -33,6 +41,12 @@ const IndicatorDemo = () => {
<h2>{translated.basic}</h2>
<Demo1 />

<h2>{translated.white}</h2>
<Demo5 />

<h2>{translated.type}</h2>
<Demo6 />

<h2>{translated.customNode}</h2>
<Demo2 />

Expand Down
8 changes: 1 addition & 7 deletions src/packages/indicator/demos/h5/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,12 @@
import React from 'react'
import { Indicator, Cell } from '@nutui/nutui-react'
import { Cell, Indicator } 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>
</>
)
}
Expand Down
22 changes: 21 additions & 1 deletion src/packages/indicator/demos/h5/demo4.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react'
import { Indicator, Cell } from '@nutui/nutui-react'
import { Cell, Indicator } from '@nutui/nutui-react'

const Demo4 = () => {
return (
Expand Down Expand Up @@ -32,6 +32,26 @@ const Demo4 = () => {
marginLeft: '50px',
}}
/>
<Indicator
total={6}
current={2}
direction="vertical"
color="white"
style={{
marginLeft: '50px',
}}
/>

<Indicator
total={6}
current={2}
direction="vertical"
color="white"
oasis-cloud marked this conversation as resolved.
Show resolved Hide resolved
type="slide"
style={{
marginLeft: '50px',
}}
/>
</Cell>
)
}
Expand Down
13 changes: 13 additions & 0 deletions src/packages/indicator/demos/h5/demo5.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react'
import { Cell, Indicator } from '@nutui/nutui-react'

const Demo5 = () => {
return (
<>
<Cell>
<Indicator total={3} current={0} color="white" />
</Cell>
</>
)
}
export default Demo5
13 changes: 13 additions & 0 deletions src/packages/indicator/demos/h5/demo6.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react'
import { Cell, Indicator } from '@nutui/nutui-react'

const Demo6 = () => {
return (
<>
<Cell>
<Indicator total={3} current={0} type="slide" />
</Cell>
</>
)
}
export default Demo6
8 changes: 1 addition & 7 deletions src/packages/indicator/demos/taro/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,12 @@
import React from 'react'
import { Indicator, Cell } from '@nutui/nutui-react-taro'
import { Cell, Indicator } from '@nutui/nutui-react-taro'

const Demo1 = () => {
return (
<>
<Cell>
<Indicator total={3} current={0} />
</Cell>
<Cell>
<Indicator total={3} current={1} />
</Cell>
<Cell>
<Indicator total={3} current={2} />
</Cell>
</>
)
}
Expand Down
20 changes: 20 additions & 0 deletions src/packages/indicator/demos/taro/demo4.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,26 @@ const Demo4 = () => {
marginLeft: 50,
}}
/>
<Indicator
total={6}
current={2}
direction="vertical"
color="white"
style={{
marginLeft: '50px',
oasis-cloud marked this conversation as resolved.
Show resolved Hide resolved
}}
/>

<Indicator
total={6}
current={2}
direction="vertical"
color="white"
type="slide"
style={{
marginLeft: '50px',
}}
/>
</Cell>
)
}
Expand Down
13 changes: 13 additions & 0 deletions src/packages/indicator/demos/taro/demo5.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react'
import { Cell, Indicator } from '@nutui/nutui-react-taro'

const Demo5 = () => {
return (
<>
<Cell>
<Indicator total={3} current={0} color="white" />
</Cell>
</>
)
}
export default Demo5
13 changes: 13 additions & 0 deletions src/packages/indicator/demos/taro/demo6.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react'
import { Cell, Indicator } from '@nutui/nutui-react-taro'

const Demo6 = () => {
return (
<>
<Cell>
<Indicator total={3} current={0} type="slide" />
</Cell>
</>
)
}
export default Demo6
26 changes: 22 additions & 4 deletions src/packages/indicator/doc.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,22 @@ import { Indicator } from '@nutui/nutui-react'

:::

### White

:::demo

<CodeBlock src='h5/demo5.tsx'></CodeBlock>

:::

### Type

:::demo

<CodeBlock src='h5/demo6.tsx'></CodeBlock>

:::

### Custom Node

:::demo
Expand Down Expand Up @@ -51,6 +67,8 @@ import { Indicator } from '@nutui/nutui-react'
| current | current step | `number` | `0` |
| total | step total size | `number` | `3` |
| direction | display directory,default is horizontal | `horizontal` \| `vertical` | `horizontal` |
| color | color | `primary` \| `white` | `primary` |
| type | interactivity Type | `anchor` \| `slide` | `anchor` |

## Theming

Expand All @@ -62,7 +80,7 @@ The component provides the following CSS variables, which can be used to customi
| --- | --- | --- |
| \--nutui-indicator-color | indicator active color | `$color-primary` |
| \--nutui-indicator-dot-color | indicator default color | `$color-text-disabled` |
| \--nutui-indicator-dot-size | indicator dot size | `5px` |
| \--nutui-indicator-dot-active-size | indicator dot active size | `15px` |
| \--nutui-indicator-border-radius | indicator active border size | `3px` |
| \--nutui-indicator-dot-margin | when horizontal, indicator margin | `4px` |
| \--nutui-indicator-dot-size | indicator dot size | `3px` |
| \--nutui-indicator-dot-active-size | indicator dot active size | `6px` |
| \--nutui-indicator-border-radius | indicator active border size | `$radius-xxs` |
| \--nutui-indicator-dot-margin | when horizontal, indicator margin | `$spacing-xxxs` |
32 changes: 25 additions & 7 deletions src/packages/indicator/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,22 @@ import { Indicator } from '@nutui/nutui-react'

:::

### 白色

:::demo

<CodeBlock src='h5/demo5.tsx'></CodeBlock>

:::

### 类型

:::demo

<CodeBlock src='h5/demo6.tsx'></CodeBlock>

:::

### 自定义节点

:::demo
Expand Down Expand Up @@ -48,9 +64,11 @@ import { Indicator } from '@nutui/nutui-react'

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| current | 当前步骤 | `number` | `0` |
| total | 步骤长度 | `number` | `3` |
| direction | 展示方向，默认为水平方向 | `horizontal` \| `vertical` | `horizontal` |
| current | 当前页 | `number` | `0` |
| total | 总页数 | `number` | `2` |
| direction | 方向，默认为水平方向 | `horizontal` \| `vertical` | `horizontal` |
| color | 颜色 | `primary` \| `white` | `primary` |
| type | 交互类型 | `anchor` \| `slide` | `anchor` |

## 主题定制

Expand All @@ -62,7 +80,7 @@ import { Indicator } from '@nutui/nutui-react'
| --- | --- | --- |
| \--nutui-indicator-color | 指示器焦点时色值 | `$color-primary` |
| \--nutui-indicator-dot-color | 指示器默认色值 | `$color-text-disabled` |
| \--nutui-indicator-dot-size | 指示器尺寸 | `5px` |
| \--nutui-indicator-dot-active-size | 指示器焦点时尺寸 | `15px` |
| \--nutui-indicator-border-radius | 指示器焦点时的border值 | `3px` |
| \--nutui-indicator-dot-margin | 指示器横向时的margin值 | `4px` |
| \--nutui-indicator-dot-size | 指示器尺寸 | `3px` |
| \--nutui-indicator-dot-active-size | 指示器焦点时尺寸 | `6px` |
| \--nutui-indicator-border-radius | 指示器焦点时的border值 | `$radius-xxs` |
| \--nutui-indicator-dot-margin | 指示器横向时的margin值 | `$spacing-xxxs` |
32 changes: 25 additions & 7 deletions src/packages/indicator/doc.taro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,22 @@ import { Indicator } from '@nutui/nutui-react-taro'

:::

### 白色

:::demo

<CodeBlock src='h5/demo5.tsx'></CodeBlock>

:::

### 类型

:::demo

<CodeBlock src='h5/demo6.tsx'></CodeBlock>

:::

### 自定义节点

:::demo
Expand Down Expand Up @@ -48,9 +64,11 @@ import { Indicator } from '@nutui/nutui-react-taro'

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| current | 当前步骤 | `number` | `0` |
| total | 步骤长度 | `number` | `3` |
| direction | 展示方向，默认为水平方向 | `horizontal` \| `vertical` | `horizontal` |
| current | 当前页 | `number` | `0` |
| total | 总页数 | `number` | `2` |
| direction | 方向，默认为水平方向 | `horizontal` \| `vertical` | `horizontal` |
| color | 颜色 | `primary` \| `white` | `primary` |
| type | 交互类型 | `anchor` \| `slide` | `anchor` |

## 主题定制

Expand All @@ -62,7 +80,7 @@ import { Indicator } from '@nutui/nutui-react-taro'
| --- | --- | --- |
| \--nutui-indicator-color | 指示器焦点时色值 | `$color-primary` |
| \--nutui-indicator-dot-color | 指示器默认色值 | `$color-text-disabled` |
| \--nutui-indicator-dot-size | 指示器尺寸 | `5px` |
| \--nutui-indicator-dot-active-size | 指示器焦点时尺寸 | `15px` |
| \--nutui-indicator-border-radius | 指示器焦点时的border值 | `3px` |
| \--nutui-indicator-dot-margin | 指示器横向时的margin值 | `4px` |
| \--nutui-indicator-dot-size | 指示器尺寸 | `3px` |
| \--nutui-indicator-dot-active-size | 指示器焦点时尺寸 | `6px` |
| \--nutui-indicator-border-radius | 指示器焦点时的border值 | `$radius-xxs` |
| \--nutui-indicator-dot-margin | 指示器横向时的margin值 | `$spacing-xxxs` |
Loading
Loading