Skip to content

feat(indicator): 增加 UI 变体的类型 #3114

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

Merged
merged 2 commits into from
Mar 28, 2025
Merged

feat(indicator): 增加 UI 变体的类型 #3114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4a6bce8
feat(indicator): 增加 UI 变体的类型
oasis-cloud Mar 24, 2025
d3f97f3
fix: review
oasis-cloud Mar 25, 2025
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
2 changes: 1 addition & 1 deletion src/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -989,7 +989,7 @@
"taro": true,
"v15": 10,
"author": "oasis",
"dd": false
"dd": true
},
{
"version": "3.0.0",
Expand Down
9 changes: 0 additions & 9 deletions src/packages/indicator/demos/h5/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,6 @@ const Demo1 = () => {
<Cell>
<Indicator total={3} current={0} />
</Cell>
<Cell>
<Indicator total={2} current={0} />
</Cell>
<Cell>
<Indicator total={2} current={0} direction="vertical" />
</Cell>
<Cell style={{ background: '#C2C4CC' }}>
<Indicator total={2} current={1} direction="vertical" color="default" />
</Cell>
</>
)
}
Expand Down
5 changes: 4 additions & 1 deletion src/packages/indicator/demos/h5/demo6.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,10 @@ const Demo6 = () => {
<Indicator total={3} current={2} type="slide" />
</Cell>
<Cell>
<Indicator total={3} current={2} type="slide" direction="vertical" />
<Indicator total={2} type="dualScreen" current={0} />
</Cell>
<Cell style={{ background: '#C2C4CC' }}>
<Indicator total={2} type="dualScreen" current={1} color="default" />
</Cell>
</>
)
Expand Down
9 changes: 0 additions & 9 deletions src/packages/indicator/demos/taro/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,6 @@ const Demo1 = () => {
<Cell>
<Indicator total={3} current={0} />
</Cell>
<Cell>
<Indicator total={2} current={0} />
</Cell>
<Cell>
<Indicator total={2} current={1} direction="vertical" />
</Cell>
<Cell style={{ background: '#C2C4CC' }}>
<Indicator total={2} current={1} direction="vertical" color="default" />
</Cell>
</>
)
}
Expand Down
5 changes: 4 additions & 1 deletion src/packages/indicator/demos/taro/demo6.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,10 @@ const Demo6 = () => {
<Indicator total={3} current={2} type="slide" />
</Cell>
<Cell>
<Indicator total={3} current={2} type="slide" direction="vertical" />
<Indicator total={2} type="dualScreen" current={0} />
</Cell>
<Cell style={{ background: '#C2C4CC' }}>
<Indicator total={2} type="dualScreen" current={1} color="default" />
Comment on lines +13 to +14
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

白色变体示例实现恰当

这个例子很好地展示了 dualScreen 类型在深色背景下的使用方式，并通过 color="default" 设置为白色变体，当前选中为第二个点（current={1}）。这种搭配能让用户明确了解不同背景下的适用情况。

不过，建议考虑在文档中添加关于这个新类型的详细说明，包括其适用场景和设计理念。

🌐 Web query:

NutUI React 组件库中的 Indicator 组件有哪些类型和用法说明？

💡 Result:

NutUI React组件库的Indicator组件主要用于分页指示、步骤引导等场景，提供以下核心功能和用法：

组件类型

1. 分页指示器

  • 用于轮播图、图片预览等场景的分页标识
  • 支持圆形/方形/数字等多种样式[3][13]

2. 步骤指示器

  • 用于流程引导、多步骤表单场景
  • 支持水平/垂直布局[1][18]

基本用法

import { Indicator } from '@nutui/nutui-react-taro';

// 分页指示
<Indicator total={3} current={2} />

// 步骤指示
<Indicator type="step" current={1}>
  <div>第一步</div>
  <div>第二步</div>
  <div>第三步</div>
</Indicator>

关键配置项

属性 类型 说明 默认值
size number 指示点尺寸 6
activeColor string 激活状态颜色 #FA2C19
inactiveColor string 未激活状态颜色 #EBEBEB
align 'left'|'center'|'right' 对齐方式 center

进阶功能

  1. 自定义样式
    通过CSS变量修改基础样式：
:root {
  --nutui-indicator-color: #1989fa;
  --nutui-indicator-dot-size: 8px;
}
  1. 动态交互
    支持onChange事件监听步骤切换：
<Indicator 
  current={activeStep}
  onChange={(step) => setActiveStep(step)}
/>
  1. 组合使用
    与Popup、Swiper等组件配合使用时，可通过zIndex参数控制层级关系[3][19]，最新版本已优化动态层级计算逻辑，减少手动设置需求[13][18]。

该组件在v2.7.x版本中持续优化样式表现和兼容性[3][13]，建议通过npm install @nutui/nutui-react-taro@latest获取最新稳定版本。

Citations:

请更新文档说明以涵盖 dualScreen 类型

示例代码在深色背景下成功展示了白色变体的实现，代码实现正确。但建议在文档中补充对 dualScreen 类型的详细说明，包括其适用场景和设计理念，以便用户更全面地了解该新类型的使用场景。

  • 文件：src/packages/indicator/demos/taro/demo6.tsx （第 13-14 行）
  • 示例代码： 
          <Cell style={{ background: '#C2C4CC' }}>
        <Indicator total={2} type="dualScreen" current={1} color="default" />

</Cell>
</>
)
Expand Down
2 changes: 1 addition & 1 deletion src/packages/indicator/doc.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ import { Indicator } from '@nutui/nutui-react'
| total | step total size | `number` | `3` |
| direction | display directory,default is horizontal | `horizontal` \| `vertical` | `horizontal` |
| color | color | `primary` \| `default` | `primary` |
| type | interactivity Type | `anchor` \| `slide` | `anchor` |
| type | interactivity Type | `anchor` \| `slide`\| `dualScreen` | `anchor` |

## Theming

Expand Down
2 changes: 1 addition & 1 deletion src/packages/indicator/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ import { Indicator } from '@nutui/nutui-react'
| total | 总页数 | `number` | `2` |
| direction | 方向，默认为水平方向 | `horizontal` \| `vertical` | `horizontal` |
| color | 颜色 | `primary` \| `default` | `primary` |
| type | 交互类型 | `anchor` \| `slide` | `anchor` |
| type | 交互类型 | `anchor` \| `slide`\| `dualScreen` | `anchor` |

## 主题定制

Expand Down
2 changes: 1 addition & 1 deletion src/packages/indicator/doc.taro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ import { Indicator } from '@nutui/nutui-react-taro'
| total | 总页数 | `number` | `2` |
| direction | 方向，默认为水平方向 | `horizontal` \| `vertical` | `horizontal` |
| color | 颜色 | `primary` \| `default` | `primary` |
| type | 交互类型 | `anchor` \| `slide` | `anchor` |
| type | 交互类型 | `anchor` \| `slide`\| `dualScreen` | `anchor` |

## 主题定制

Expand Down
2 changes: 1 addition & 1 deletion src/packages/indicator/doc.zh-TW.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ import { Indicator } from '@nutui/nutui-react'
| total | 總頁數 | `number` | `2` |
| direction | 方向，預設為水平方向 | `horizontal` \| `vertical` | `horizontal` |
| color | 顏色 | `primary` \| `default` | `primary` |
| type | 互動類型 | `anchor` \| `slide` | `anchor` |
| type | 互動類型 | `anchor` \| `slide`\| `dualScreen` | `anchor` |

## 主題定製

Expand Down
2 changes: 1 addition & 1 deletion src/packages/indicator/indicator.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export const Indicator: FunctionComponent<
}

function maybeFixedWidth() {
if (total === 2 || type === 'slide') {
if (type === 'dualScreen' || type === 'slide') {
return `${classPrefix}-fixed-width`
}
return ''
Expand Down
2 changes: 1 addition & 1 deletion src/packages/indicator/indicator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export const Indicator: FunctionComponent<Partial<WebIndicatorProps>> = (
}

function maybeFixedWidth() {
if (total === 2 || type === 'slide') {
if (type === 'dualScreen' || type === 'slide') {
return `${classPrefix}-fixed-width`
}
return ''
Expand Down
2 changes: 1 addition & 1 deletion src/types/spec/indicator/base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { BaseProps } from '../../base/props'
import { UIType } from '../../base/atoms'

export type IndicatorType = 'anchor' | 'slide'
export type IndicatorType = 'anchor' | 'slide' | 'dualScreen'
export type IndicatorColor = Extract<UIType, 'primary' | 'default'>

export interface BaseIndicator extends BaseProps {
Expand Down
Loading