From eed891fd82da1f78ad06e554cba3d1a6e863011d Mon Sep 17 00:00:00 2001 From: huxiyang3 <1872591453@qq.com> Date: Tue, 19 Nov 2024 16:43:08 +0800 Subject: [PATCH 1/2] docs(infiniteLoading): optimize target description --- src/packages/infiniteloading/doc.en-US.md | 3 +- src/packages/infiniteloading/doc.md | 2 +- src/packages/infiniteloading/doc.taro.md | 2 +- src/packages/infiniteloading/doc.zh-TW.md | 162 +++++++++++----------- 4 files changed, 85 insertions(+), 84 deletions(-) diff --git a/src/packages/infiniteloading/doc.en-US.md b/src/packages/infiniteloading/doc.en-US.md index 4ec3d45972..fb40a19938 100644 --- a/src/packages/infiniteloading/doc.en-US.md +++ b/src/packages/infiniteloading/doc.en-US.md @@ -60,7 +60,8 @@ 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 | Used to identify and distinguish between multiple component instances on the page. Note that this attribute is not used for listening to DOM elements, but rather for managing multiple component instances on the same page. | +| `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` | diff --git a/src/packages/infiniteloading/doc.md b/src/packages/infiniteloading/doc.md index 67f0d510b6..9b8560eed6 100644 --- a/src/packages/infiniteloading/doc.md +++ b/src/packages/infiniteloading/doc.md @@ -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` | `松手刷新` | diff --git a/src/packages/infiniteloading/doc.taro.md b/src/packages/infiniteloading/doc.taro.md index 12300a386c..efaeba0ad1 100644 --- a/src/packages/infiniteloading/doc.taro.md +++ b/src/packages/infiniteloading/doc.taro.md @@ -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` | `松手刷新` | diff --git a/src/packages/infiniteloading/doc.zh-TW.md b/src/packages/infiniteloading/doc.zh-TW.md index 5076668c4b..0d5bcfc2b1 100644 --- a/src/packages/infiniteloading/doc.zh-TW.md +++ b/src/packages/infiniteloading/doc.zh-TW.md @@ -1,81 +1,81 @@ -# InfiniteLoading 滾動加載 - -列錶滾動到底部自動加載更多數據。 - -## 引入 - -```tsx -import { InfiniteLoading } from '@nutui/nutui-react' -``` - -## 示例代碼 - -### 基礎用法 - -:::demo - - - -::: - -### 下拉刷新 - -:::demo - - - -::: - -### 自定義加載文案 - -:::demo - - - -::: - -### primary主题 - -:::demo - - - -::: - -### 基於window滾動 - -:::demo - - - -::: - -## 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` | `-` | -| onLoadMore | 繼續加載的回調函數 | `() => Promise` | `-` | -| 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 + + + +::: + +### 下拉刷新 + +:::demo + + + +::: + +### 自定義加載文案 + +:::demo + + + +::: + +### primary主题 + +:::demo + + + +::: + +### 基於window滾動 + +:::demo + + + +::: + +## 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` | `-` | +| onLoadMore | 繼續加載的回調函數 | `() => Promise` | `-` | +| onScroll | 實時監聽滾動高度 | `(param: number) => void` | `-` | + +## 主題定制 + +### 樣式變量 + +組件提供了下列 CSS 變量，可用於自定義樣式，使用方法請參考 [ConfigProvider 組件](#/zh-CN/component/configprovider)。 + +| 名稱 | 說明 | 默認值 | +| --- | --- | --- | +| \--nutui-infiniteloading-color | 滑動到底部的文字顏色 | `$color-text-help` | +| \--nutui-infiniteloading-icon-size | 滑動到底部的文字顏色 | `24px` | From 68d4e20b2e34bea7841168e76f97371405e273f0 Mon Sep 17 00:00:00 2001 From: huxiyang3 <1872591453@qq.com> Date: Tue, 19 Nov 2024 16:49:15 +0800 Subject: [PATCH 2/2] docs(infiniteLoading): optimize target description --- src/packages/infiniteloading/doc.en-US.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/packages/infiniteloading/doc.en-US.md b/src/packages/infiniteloading/doc.en-US.md index fb40a19938..40b381b90d 100644 --- a/src/packages/infiniteloading/doc.en-US.md +++ b/src/packages/infiniteloading/doc.en-US.md @@ -60,8 +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 | Used to identify and distinguish between multiple component instances on the page. Note that this attribute is not used for listening to DOM elements, but rather for managing multiple component instances on the same page. | -| `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` |