feat(v14): indicator adaptation

jdf2e · Nov 13, 2024 · 68fad76 · 68fad76
1 parent ea770d1
commit 68fad76
Show file tree

Hide file tree

Showing 18 changed files with 290 additions and 95 deletions.
diff --git a/src/config.json b/src/config.json
@@ -1020,6 +1020,7 @@
           "sort": 16,
           "show": true,
           "taro": true,
+          "v14": true,
           "author": "liukun"
         },
         {

diff --git a/src/packages/indicator/demo.taro.tsx b/src/packages/indicator/demo.taro.tsx
@@ -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',
@@ -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 />
 

diff --git a/src/packages/indicator/demo.tsx b/src/packages/indicator/demo.tsx
@@ -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: '类型',
       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',
@@ -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 />
 

diff --git a/src/packages/indicator/demos/h5/demo1.tsx b/src/packages/indicator/demos/h5/demo1.tsx
@@ -1,53 +1,12 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { Cell, Indicator } from '@nutui/nutui-react'
 
 const Demo1 = () => {
-  const [current, setCurrent] = useState(0)
-  // useEffect(() => {
-  //   setTimeout(() => {
-  //     setCurrent(current + 1 >= 3 ? 0 : current + 1)
-  //   }, 1000)
-  // })
   return (
     <>
       <Cell>
         <Indicator total={3} current={0} />
       </Cell>
-      <Cell>
-        <Indicator total={3} current={current} type="line" />
-      </Cell>
-      <Cell>
-        <Indicator
-          total={3}
-          current={current}
-          type="line"
-          direction="vertical"
-        />
-      </Cell>
-      <Cell>
-        <Indicator total={3} current={0} color="white" />
-      </Cell>
-      <Cell>
-        <Indicator total={3} current={0} type="line" color="white" />
-      </Cell>
-      <Cell>
-        <Indicator total={3} current={0} color="white" direction="vertical" />
-      </Cell>
-      <Cell>
-        <Indicator
-          total={3}
-          current={0}
-          type="line"
-          color="white"
-          direction="vertical"
-        />
-      </Cell>
-      <Cell>
-        <Indicator total={3} current={1} />
-      </Cell>
-      <Cell>
-        <Indicator total={3} current={2} />
-      </Cell>
     </>
   )
 }

diff --git a/src/packages/indicator/demos/h5/demo4.tsx b/src/packages/indicator/demos/h5/demo4.tsx
@@ -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 (
@@ -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"
+        type="slide"
+        style={{
+          marginLeft: '50px',
+        }}
+      />
     </Cell>
   )
 }

diff --git a/src/packages/indicator/demos/h5/demo5.tsx b/src/packages/indicator/demos/h5/demo5.tsx
@@ -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
diff --git a/src/packages/indicator/demos/h5/demo6.tsx b/src/packages/indicator/demos/h5/demo6.tsx
@@ -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
diff --git a/src/packages/indicator/demos/taro/demo1.tsx b/src/packages/indicator/demos/taro/demo1.tsx
@@ -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>
     </>
   )
 }

diff --git a/src/packages/indicator/demos/taro/demo4.tsx b/src/packages/indicator/demos/taro/demo4.tsx
@@ -60,6 +60,26 @@ const Demo4 = () => {
           marginLeft: 50,
         }}
       />
+      <Indicator
+        total={6}
+        current={2}
+        direction="vertical"
+        color="white"
+        style={{
+          marginLeft: '50px',
+        }}
+      />
+
+      <Indicator
+        total={6}
+        current={2}
+        direction="vertical"
+        color="white"
+        type="slide"
+        style={{
+          marginLeft: '50px',
+        }}
+      />
     </Cell>
   )
 }

diff --git a/src/packages/indicator/demos/taro/demo5.tsx b/src/packages/indicator/demos/taro/demo5.tsx
@@ -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
diff --git a/src/packages/indicator/demos/taro/demo6.tsx b/src/packages/indicator/demos/taro/demo6.tsx
@@ -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
diff --git a/src/packages/indicator/doc.en-US.md b/src/packages/indicator/doc.en-US.md
@@ -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
@@ -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
 
@@ -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` |
diff --git a/src/packages/indicator/doc.md b/src/packages/indicator/doc.md
@@ -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
@@ -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` |
 
 ## 主题定制
 
@@ -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` |