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.

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

docs(infiniteLoading): optimize target description #2770

Merged
merged 4 commits into from
Nov 20, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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/packages/infiniteloading/doc.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ import { InfiniteLoading } from '@nutui/nutui-react'
| hasMore | Has more data | `boolean` | `true` |
| threshold | The loadMore event will be Emitted when the distance between the scrollbar and the bottom is less than threshold | `number` | `200` |
| capture | Whether to use capture mode | `boolean` | `false` |
| target | Get the target element to monitor | `string` | `-` |
| target | Identifies and distinguishes multiple component instances on a page. Not for listening to DOM elements. | `string` | `-` |
| loadMoreText | “No more” text | `string` | `Oops, here's the bottom` |
| pullRefresh | Enable pull refresh | `boolean` | `false` |
| pullingText | Pull refresh text | `ReactNode` | `Let go and refresh` |
Expand Down
2 changes: 1 addition & 1 deletion src/packages/infiniteloading/doc.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ import { InfiniteLoading } from '@nutui/nutui-react'
| hasMore | 是否还有更多数据 | `boolean` | `true` |
| threshold | 距离底部多远加载 | `number` | `200` |
| capture | 是否使用捕获模式 true 捕获 false 冒泡 | `boolean` | `false` |
| target | 获取监听的目标元素 | `string` | `-` |
| target | 用于标识和区分页面中多个组件实例的唯一标识符。注意,这个属性并不是用于监听 DOM 元素,而是用于在同一页面上管理多个组件实例。 | `string` | `-` |
| loadMoreText | “没有更多数据”展示文案 | `string` | `哎呀,这里是底部了啦` |
| pullRefresh | 是否开启下拉刷新 | `boolean` | `false` |
| pullingText | 下拉刷新提示文案 | `ReactNode` | `松手刷新` |
Expand Down
2 changes: 1 addition & 1 deletion src/packages/infiniteloading/doc.taro.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ import { InfiniteLoading } from '@nutui/nutui-react-taro'
| type | 主题类型 | `default`\| `primary` | `default` |
| hasMore | 是否还有更多数据 | `boolean` | `true` |
| threshold | 距离底部多远加载 | `number` | `200` |
| target | 获取监听的目标元素 | `string` | `-` |
| target | 用于标识和区分页面中多个组件实例的唯一标识符。注意,这个属性并不是用于监听 DOM 元素,而是用于在同一页面上管理多个组件实例。 | `string` | `-` |
| loadMoreText | “没有更多数据”展示文案 | `string` | `哎呀,这里是底部了啦` |
| pullRefresh | 是否开启下拉刷新 | `boolean` | `false` |
| pullingText | 下拉刷新提示文案 | `ReactNode` | `松手刷新` |
Expand Down
162 changes: 81 additions & 81 deletions src/packages/infiniteloading/doc.zh-TW.md
Original file line number Diff line number Diff line change
@@ -1,81 +1,81 @@
# InfiniteLoading 滾動加載
列錶滾動到底部自動加載更多數據。
## 引入
```tsx
import { InfiniteLoading } from '@nutui/nutui-react'
```
## 示例代碼
### 基礎用法
:::demo
<CodeBlock src='h5/demo1.tsx'></CodeBlock>
:::
### 下拉刷新
:::demo
<CodeBlock src='h5/demo2.tsx'></CodeBlock>
:::
### 自定義加載文案
:::demo
<CodeBlock src='h5/demo3.tsx'></CodeBlock>
:::
### primary主题
:::demo
<CodeBlock src='h5/demo4.tsx'></CodeBlock>
:::
### 基於window滾動
:::demo
<CodeBlock src='h5/demo5.tsx'></CodeBlock>
:::
## InfiniteLoading
### Props
| 屬性 | 說明 | 類型 | 默認值 |
| --- | --- | --- | --- |
| type | 主題類型 | `default`\| `primary` | `default` |
| hasMore | 是否還有更多數據 | `boolean` | `true` |
| threshold | 距離底部多遠加載 | `number` | `200` |
| capture | 是否使用捕獲模式 true 捕獲 false 冒泡 | `boolean` | `false` |
| target | 獲取監聽的目標元素 | `string` | `-` |
| loadMoreText | “沒有更多數據”展示文案 | `string` | `哎呀,這裏是底部了啦` |
| pullRefresh | 是否開啟下拉刷新 | `boolean` | `false` |
| pullingText | 下拉刷新提示文案 | `ReactNode` | `鬆手刷新` |
| loadingText | 上拉加載提示文案 | `ReactNode` | `加載中...` |
| onRefresh | 下拉刷新事件回調 | `() => Promise<void>` | `-` |
| onLoadMore | 繼續加載的回調函數 | `() => Promise<void>` | `-` |
| onScroll | 實時監聽滾動高度 | `(param: number) => void` | `-` |
## 主題定制
### 樣式變量
組件提供了下列 CSS 變量,可用於自定義樣式,使用方法請參考 [ConfigProvider 組件](#/zh-CN/component/configprovider)。
| 名稱 | 說明 | 默認值 |
| --- | --- | --- |
| \--nutui-infiniteloading-color | 滑動到底部的文字顏色 | `$color-text-help` |
| \--nutui-infiniteloading-icon-size | 滑動到底部的文字顏色 | `24px` |
# InfiniteLoading 滾動加載

列錶滾動到底部自動加載更多數據。

## 引入

```tsx
import { InfiniteLoading } from '@nutui/nutui-react'
```

## 示例代碼

### 基礎用法

:::demo

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

:::

### 下拉刷新

:::demo

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

:::

### 自定義加載文案

:::demo

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

:::

### primary主题

:::demo

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

:::

### 基於window滾動

:::demo

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

:::

## InfiniteLoading

### Props

| 屬性 | 說明 | 類型 | 默認值 |
| --- | --- | --- | --- |
| type | 主題類型 | `default`\| `primary` | `default` |
| hasMore | 是否還有更多數據 | `boolean` | `true` |
| threshold | 距離底部多遠加載 | `number` | `200` |
| capture | 是否使用捕獲模式 true 捕獲 false 冒泡 | `boolean` | `false` |
| target | 用於標識和區分頁面中多個組件實例的唯一標識符。注意,這個屬性並不是用於監聽 DOM 元素,而是用於在同一頁面上管理多個組件實例。 | `string` | `-` |
| loadMoreText | “沒有更多數據”展示文案 | `string` | `哎呀,這裏是底部了啦` |
| pullRefresh | 是否開啟下拉刷新 | `boolean` | `false` |
| pullingText | 下拉刷新提示文案 | `ReactNode` | `鬆手刷新` |
| loadingText | 上拉加載提示文案 | `ReactNode` | `加載中...` |
| onRefresh | 下拉刷新事件回調 | `() => Promise<void>` | `-` |
| onLoadMore | 繼續加載的回調函數 | `() => Promise<void>` | `-` |
| onScroll | 實時監聽滾動高度 | `(param: number) => void` | `-` |

## 主題定制

### 樣式變量

組件提供了下列 CSS 變量,可用於自定義樣式,使用方法請參考 [ConfigProvider 組件](#/zh-CN/component/configprovider)。

| 名稱 | 說明 | 默認值 |
| --- | --- | --- |
| \--nutui-infiniteloading-color | 滑動到底部的文字顏色 | `$color-text-help` |
| \--nutui-infiniteloading-icon-size | 滑動到底部的文字顏色 | `24px` |
Loading