-
{translated.c0a1c0a1}
-
-
-
-
- |
-
{translated.c0a1c0a2}
-
-
- 取消
- ,
- ,
- ,
- ,
- ]}
- >
-
-
- |
+
+
{translated.basic}
+
+
+ {translated.toolbar}
+
+
+ {translated.round}
+
)
diff --git a/src/packages/avatarcropper/demos/h5/demo1.tsx b/src/packages/avatarcropper/demos/h5/demo1.tsx
new file mode 100644
index 0000000000..6a80e5b392
--- /dev/null
+++ b/src/packages/avatarcropper/demos/h5/demo1.tsx
@@ -0,0 +1,21 @@
+import React, { useState } from 'react'
+import { Cell, Avatar, AvatarCropper } from '@nutui/nutui-react'
+
+const Demo1 = () => {
+ const [imageUrl, setImageUrl] = useState(
+ 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png'
+ )
+ const cutImage = (data: any) => {
+ setImageUrl(data)
+ }
+ return (
+ <>
+
+
+
+
+ |
+
+ )
+}
+export default Demo1
diff --git a/src/packages/avatarcropper/demos/h5/demo2.tsx b/src/packages/avatarcropper/demos/h5/demo2.tsx
new file mode 100644
index 0000000000..cc0472b53c
--- /dev/null
+++ b/src/packages/avatarcropper/demos/h5/demo2.tsx
@@ -0,0 +1,36 @@
+import React, { useState } from 'react'
+import { Cell, Avatar, AvatarCropper, Button } from '@nutui/nutui-react'
+import { Refresh, Retweet } from '@nutui/icons-react'
+
+const Demo2 = () => {
+ const [imageUrl, setImageUrl] = useState(
+ 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png'
+ )
+ const cutImage = (data: any) => {
+ setImageUrl(data)
+ }
+ return (
+ <>
+
+
+ 取消
+ ,
+ ,
+ ,
+ ,
+ ]}
+ >
+
+
+ |
+
+ )
+}
+export default Demo2
diff --git a/src/packages/avatarcropper/demos/h5/demo3.tsx b/src/packages/avatarcropper/demos/h5/demo3.tsx
new file mode 100644
index 0000000000..265d718b09
--- /dev/null
+++ b/src/packages/avatarcropper/demos/h5/demo3.tsx
@@ -0,0 +1,21 @@
+import React, { useState } from 'react'
+import { Cell, Avatar, AvatarCropper } from '@nutui/nutui-react'
+
+const Demo3 = () => {
+ const [imageUrl, setImageUrl] = useState(
+ 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png'
+ )
+ const cutImage = (data: any) => {
+ setImageUrl(data)
+ }
+ return (
+ <>
+
+
+
+
+ |
+
+ )
+}
+export default Demo3
diff --git a/src/packages/avatarcropper/demos/taro/demo1.tsx b/src/packages/avatarcropper/demos/taro/demo1.tsx
new file mode 100644
index 0000000000..aaa7459d46
--- /dev/null
+++ b/src/packages/avatarcropper/demos/taro/demo1.tsx
@@ -0,0 +1,21 @@
+import React, { useState } from 'react'
+import { Cell, Avatar, AvatarCropper } from '@nutui/nutui-react-taro'
+
+const Demo1 = () => {
+ const [imageUrl, setImageUrl] = useState(
+ 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png'
+ )
+ const cutImage = (data: any) => {
+ setImageUrl(data)
+ }
+ return (
+ <>
+
+
+
+
+ |
+
+ )
+}
+export default Demo1
diff --git a/src/packages/avatarcropper/demos/taro/demo2.tsx b/src/packages/avatarcropper/demos/taro/demo2.tsx
new file mode 100644
index 0000000000..30c53d40fd
--- /dev/null
+++ b/src/packages/avatarcropper/demos/taro/demo2.tsx
@@ -0,0 +1,36 @@
+import React, { useState } from 'react'
+import { Cell, Avatar, AvatarCropper, Button } from '@nutui/nutui-react-taro'
+import { Refresh, Retweet } from '@nutui/icons-react-taro'
+
+const Demo2 = () => {
+ const [imageUrl, setImageUrl] = useState(
+ 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png'
+ )
+ const cutImage = (data: any) => {
+ setImageUrl(data)
+ }
+ return (
+ <>
+
+
+ 取消
+ ,
+ ,
+ ,
+ ,
+ ]}
+ >
+
+
+ |
+
+ )
+}
+export default Demo2
diff --git a/src/packages/avatarcropper/demos/taro/demo3.tsx b/src/packages/avatarcropper/demos/taro/demo3.tsx
new file mode 100644
index 0000000000..42b276e7c8
--- /dev/null
+++ b/src/packages/avatarcropper/demos/taro/demo3.tsx
@@ -0,0 +1,21 @@
+import React, { useState } from 'react'
+import { Cell, Avatar, AvatarCropper } from '@nutui/nutui-react-taro'
+
+const Demo3 = () => {
+ const [imageUrl, setImageUrl] = useState(
+ 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png'
+ )
+ const cutImage = (data: any) => {
+ setImageUrl(data)
+ }
+ return (
+ <>
+
+
+
+
+ |
+
+ )
+}
+export default Demo3
diff --git a/src/packages/avatarcropper/doc.en-US.md b/src/packages/avatarcropper/doc.en-US.md
index adbe42c68f..763583cba8 100644
--- a/src/packages/avatarcropper/doc.en-US.md
+++ b/src/packages/avatarcropper/doc.en-US.md
@@ -16,75 +16,30 @@ import { AvatarCropper } from '@nutui/nutui-react';
Use the avatar component directly in the middle, and the image content will be replaced with the new one after cropping.
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { Avatar, AvatarCropper } from '@nutui/nutui-react';
-
-const App = () => {
- const [imageUrl, setImageUrl] = useState(
- 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png'
- )
- const cutImage = (data: any) => {
- setImageUrl(data)
- }
- return (
- <>
-
-
-
-
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### Clipping region toolbar slots
Customize the clipping area toolbar, and toolbar-position controls the toolbar position
-:::demo
+:::demo
+
+
+
+:::
-```tsx
-import React, { useState } from "react";
-import { Avatar, AvatarCropper, Button } from '@nutui/nutui-react';
-import { Refresh, Retweet } from '@nutui/icons-react-taro'
-
-const App = () => {
- const [imageUrl, setImageUrl] = useState(
- 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png'
- )
- const cutImage = (data: any) => {
- setImageUrl(data)
- }
- return (
- <>
-
- Cancel
- ,
- ,
- ,
- ,
- ]}
- >
-
-
-
- )
-}
-export default App;
-```
+### Roll Finger Cutting
+
+Set the shape of the crop display, which is still square after the crop, and need to set rounded corners in the display place
+:::demo
+
+
+
:::
## AvatarCropper
@@ -98,5 +53,6 @@ export default App;
| edit-text | The text content in the middle | `ReactNode \| string` | `编辑` |
| toolbar | Customize the clipping area toolbar, after setting this content | `ReactNode[]` | `[
,
,
,
]` |
| toolbar-position | Location of the toolbar in the clipping area. The optional value is：`top` `bottom` | `string` | `bottom` |
+| shape | Crop shape, optional value is：`square` `round` | `string` | `square` |
| onConfirm | Click Confirm to trigger after cropping | `(url: string) => void` | `-` |
| onCancel | Click cancel trigger | `-` | `-` |
\ No newline at end of file
diff --git a/src/packages/avatarcropper/doc.md b/src/packages/avatarcropper/doc.md
index 8e3eb812ce..7e53b22a2d 100644
--- a/src/packages/avatarcropper/doc.md
+++ b/src/packages/avatarcropper/doc.md
@@ -16,75 +16,30 @@ import { AvatarCropper } from '@nutui/nutui-react';
中间直接使用avatar组件，裁剪后图片内容会被替换为新的。
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { Avatar, AvatarCropper } from '@nutui/nutui-react';
-
-const App = () => {
- const [imageUrl, setImageUrl] = useState(
- 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png'
- )
- const cutImage = (data: any) => {
- setImageUrl(data)
- }
- return (
- <>
-
-
-
-
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### 裁剪区域toolbar插槽
自定义裁剪区域工具栏，toolbar-position控制工具栏位置
-:::demo
+:::demo
+
+
+
+:::
-```tsx
-import React, { useState } from "react";
-import { Avatar, AvatarCropper, Button } from '@nutui/nutui-react';
-import { Refresh, Retweet } from '@nutui/icons-react-taro'
-
-const App = () => {
- const [imageUrl, setImageUrl] = useState(
- 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png'
- )
- const cutImage = (data: any) => {
- setImageUrl(data)
- }
- return (
- <>
-
- 取消
- ,
- ,
- ,
- ,
- ]}
- >
-
-
-
- )
-}
-export default App;
-```
+### 圆形裁剪
+
+设置裁剪展示的形状，裁剪后还是方形的，需要在展示的地方设置圆角
+:::demo
+
+
+
:::
## AvatarCropper
@@ -98,5 +53,6 @@ export default App;
| editText | 中间的文字内容 | `ReactNode \| string` | `编辑` |
| toolbar | 自定义裁剪区域工具栏 | `ReactNode[]` | `[
,
,
,
]` |
| toolbarPosition | 裁剪区域工具栏位置,可选值为：`top` `bottom` | `string` | `bottom` |
+| shape | 裁剪形状,可选值为：`square` `round` | `string` | `square` |
| onConfirm | 裁剪后点击确认触发 | `(url: string) => void` | `-` |
| onCancel | 点击取消触发 | `-` | `-` |
\ No newline at end of file
diff --git a/src/packages/avatarcropper/doc.taro.md b/src/packages/avatarcropper/doc.taro.md
index 2e0b181547..5086623337 100644
--- a/src/packages/avatarcropper/doc.taro.md
+++ b/src/packages/avatarcropper/doc.taro.md
@@ -16,75 +16,30 @@ import { AvatarCropper } from '@nutui/nutui-react-taro';
中间直接使用avatar组件，裁剪后图片内容会被替换为新的。
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { Avatar, AvatarCropper } from '@nutui/nutui-react';
-
-const App = () => {
- const [imageUrl, setImageUrl] = useState(
- 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png'
- )
- const cutImage = (data: any) => {
- setImageUrl(data)
- }
- return (
- <>
-
-
-
-
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### 裁剪区域toolbar插槽
自定义裁剪区域工具栏，toolbar-position控制工具栏位置
-:::demo
+:::demo
+
+
+
+:::
-```tsx
-import React, { useState } from "react";
-import { Avatar, AvatarCropper, Button } from '@nutui/nutui-react';
-import { Refresh, Retweet } from '@nutui/icons-react-taro'
-
-const App = () => {
- const [imageUrl, setImageUrl] = useState(
- 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png'
- )
- const cutImage = (data: any) => {
- setImageUrl(data)
- }
- return (
- <>
-
- 取消
- ,
- ,
- ,
- ,
- ]}
- >
-
-
-
- )
-}
-export default App;
-```
+### 圆形裁剪
+
+设置裁剪展示的形状，裁剪后还是方形的，需要在展示的地方设置圆角
+:::demo
+
+
+
:::
## AvatarCropper
@@ -100,5 +55,6 @@ export default App;
| source-type | 选择图片的来源： 可选值：`album` `camera` | `Array` | `['album', 'camera']` |
| toolbar | 自定义裁剪区域工具栏 | `ReactNode[]` | `[
,
,
,
]` |
| toolbarPosition | 裁剪区域工具栏位置,可选值为：`top` `bottom` | `string` | `bottom` |
+| shape | 裁剪形状,可选值为：`square` `round` | `string` | `square` |
| onConfirm | 裁剪后点击确认触发 | `(url: string) => void` | `-` |
| onCancel | 点击取消触发 | `-` | `-` |
\ No newline at end of file
diff --git a/src/packages/avatarcropper/doc.zh-TW.md b/src/packages/avatarcropper/doc.zh-TW.md
index dedf0766a1..851b54d3bf 100644
--- a/src/packages/avatarcropper/doc.zh-TW.md
+++ b/src/packages/avatarcropper/doc.zh-TW.md
@@ -16,75 +16,30 @@ import { AvatarCropper } from '@nutui/nutui-react';
中間直接使用 avatar 組件，裁剪後圖片內容會被替換為新的。
-:::demo
-
-```tsx
-import React, { useState } from "react";
-import { Avatar, AvatarCropper } from '@nutui/nutui-react';
-
-const App = () => {
- const [imageUrl, setImageUrl] = useState(
- 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png'
- )
- const cutImage = (data: any) => {
- setImageUrl(data)
- }
- return (
- <>
-
-
-
-
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### 裁剪區域工具欄插槽
自定義裁剪區域工具欄，toolbar-position 控制工具欄位置
-:::demo
+:::demo
+
+
+
+:::
-```tsx
-import React, { useState } from "react";
-import { Avatar, AvatarCropper, Button } from '@nutui/nutui-react';
-import { Refresh2, Retweet } from '@nutui/icons-react-taro'
-
-const App = () => {
- const [imageUrl, setImageUrl] = useState(
- 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png'
- )
- const cutImage = (data: any) => {
- setImageUrl(data)
- }
- return (
- <>
-
- 取消
- ,
- ,
- ,
- ,
- ]}
- >
-
-
-
- )
-}
-export default App;
-```
+### 圓形裁剪
+
+設置裁剪展示的形狀，裁剪後還是方形的，需要在展示的地方設置圓角
+:::demo
+
+
+
:::
## AvatarCropper
@@ -98,5 +53,6 @@ export default App;
| toolbarPosition | 裁剪區域工具欄位置,可選值為：`top` `bottom` | `string` | `bottom` |
| editText | 中間的文字內容 | `ReactNode \| string` | `編輯` |
| toolbar | 自定義裁剪區域工具欄 | `ReactNode[]` | `[
,
,
,
]` |
+| shape | 裁剪形狀,可選值爲：`square` `round` | `string` | `square` |
| onConfirm | 裁剪後點擊確認觸發 | `(url: string) => void` | `-` |
| onCancel | 點擊取消觸發 | `-` | `-` |
\ No newline at end of file
diff --git a/src/packages/avatarcropper/index.taro.ts b/src/packages/avatarcropper/index.taro.ts
index 20de7119c4..8bb9890391 100644
--- a/src/packages/avatarcropper/index.taro.ts
+++ b/src/packages/avatarcropper/index.taro.ts
@@ -5,5 +5,6 @@ export type {
AvatarCropperToolbarPosition,
AvatarCropperSizeType,
AvatarCropperSourceType,
+ AvatarCropperShape,
} from './avatarcropper.taro'
export default AvatarCropper
diff --git a/src/packages/avatarcropper/index.ts b/src/packages/avatarcropper/index.ts
index 2c7031e461..9fad28a9c8 100644
--- a/src/packages/avatarcropper/index.ts
+++ b/src/packages/avatarcropper/index.ts
@@ -3,5 +3,6 @@ import { AvatarCropper } from './avatarcropper'
export type {
AvatarCropperProps,
AvatarCropperToolbarPosition,
+ AvatarCropperShape,
} from './avatarcropper'
export default AvatarCropper
diff --git a/src/packages/avatargroup/__tests__/__snapshots__/avatargroup.spec.tsx.snap b/src/packages/avatargroup/__tests__/__snapshots__/avatargroup.spec.tsx.snap
index 97021f4bb6..509d14284d 100644
--- a/src/packages/avatargroup/__tests__/__snapshots__/avatargroup.spec.tsx.snap
+++ b/src/packages/avatargroup/__tests__/__snapshots__/avatargroup.spec.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`size prop 1`] = `
diff --git a/src/packages/avatargroup/avatargroup.scss b/src/packages/avatargroup/avatargroup.scss
index 5a245c42b2..213805d55a 100644
--- a/src/packages/avatargroup/avatargroup.scss
+++ b/src/packages/avatargroup/avatargroup.scss
@@ -7,8 +7,19 @@
flex: 0 0 auto; // 防止被压缩
.nut-avatar {
border: 1px solid #fff;
+
&:not(:first-of-type) {
margin-left: -8px;
}
}
}
+
+[dir='rtl'] .nut-avatar-group,
+.nut-rtl .nut-avatar-group {
+ .nut-avatar {
+ &:not(:first-of-type) {
+ margin-left: 0;
+ margin-right: -8px;
+ }
+ }
+}
diff --git a/src/packages/backtop/__test__/__snapshots__/backtop.spec.tsx.snap b/src/packages/backtop/__test__/__snapshots__/backtop.spec.tsx.snap
index ac81571f0d..e5d4163b07 100644
--- a/src/packages/backtop/__test__/__snapshots__/backtop.spec.tsx.snap
+++ b/src/packages/backtop/__test__/__snapshots__/backtop.spec.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`backtop custom test 1`] = `
diff --git a/src/packages/backtop/__test__/backtop.spec.tsx b/src/packages/backtop/__test__/backtop.spec.tsx
index 3fca988604..cd6d676352 100644
--- a/src/packages/backtop/__test__/backtop.spec.tsx
+++ b/src/packages/backtop/__test__/backtop.spec.tsx
@@ -6,7 +6,7 @@ import { render, fireEvent } from '@testing-library/react'
import BackTop from '@/packages/backtop'
test('backtop props test', () => {
- const handleClick = jest.fn()
+ const handleClick = vi.fn()
const { container } = render(
{
})
test('backtop custom test', () => {
- const handleClick = jest.fn()
+ const handleClick = vi.fn()
const { container } = render(
& Omit, 'onClick'>
> = (props) => {
+ const rtl = useRtl()
const { children, threshold, zIndex, className, duration, style, onClick } = {
...defaultProps,
...props,
@@ -46,16 +48,17 @@ export const BackTop: FunctionComponent<
})
}
- const styles = style
- ? {
- zIndex,
- ...style,
- }
- : {
- right: '10px',
- bottom: '20px',
- zIndex,
- }
+ const styles =
+ Object.keys(style || {}).length !== 0
+ ? {
+ zIndex,
+ ...style,
+ }
+ : {
+ [rtl ? 'left' : 'right']: '10px',
+ bottom: '20px',
+ zIndex,
+ }
return (
& Omit
, 'onClick'>
> = (props) => {
+ const rtl = useRtl()
const {
children,
target,
@@ -41,15 +43,12 @@ export const BackTop: FunctionComponent<
}
const classPrefix = 'nut-backtop'
-
const [backTop, SetBackTop] = useState(false)
const [scrollTop, SetScrollTop] = useState(0)
let startTime = 0
const scrollEl: any = useRef(null)
- // 初始化
useEffect(() => {
init()
-
return () => removeEventListener()
}, [])
@@ -72,7 +71,6 @@ export const BackTop: FunctionComponent<
SetScrollTop(top)
}
const showBtn = top >= threshold
-
SetBackTop(showBtn)
}
@@ -101,19 +99,16 @@ export const BackTop: FunctionComponent<
window.cancelAnimationFrame = window.webkitCancelAnimationFrame
}
- // 监听事件
function addEventListener() {
scrollEl.current?.addEventListener('scroll', scrollListener, false)
scrollEl.current?.addEventListener('resize', scrollListener, false)
}
- // 移除监听事件
function removeEventListener() {
scrollEl.current?.removeEventListener('scroll', scrollListener, false)
scrollEl.current?.removeEventListener('resize', scrollListener, false)
}
- // 返回顶部点击事件
const goTop = (e: MouseEvent) => {
onClick && onClick(e)
const otime = +new Date()
@@ -121,16 +116,17 @@ export const BackTop: FunctionComponent<
duration > 0 ? scrollAnimation() : scroll()
}
- const styles = style
- ? {
- zIndex,
- ...style,
- }
- : {
- right: '10px',
- bottom: '20px',
- zIndex,
- }
+ const styles =
+ Object.keys(style || {}).length !== 0
+ ? {
+ zIndex,
+ ...style,
+ }
+ : {
+ [rtl ? 'left' : 'right']: '10px',
+ bottom: '20px',
+ zIndex,
+ }
return (
{
- const [translated] = useTranslate
({
+ const [translated] = useTranslate({
'zh-CN': {
title: '基础用法',
- clg: '触发返回顶部',
- content: '我是测试数据',
- backText: '顶部',
},
'en-US': {
title: 'Basic Usage',
- clg: 'backtop',
- content: 'test data',
- backText: 'Top',
+ },
+ 'zh-TW': {
+ title: '基礎用法',
},
})
const demoStyle = {
@@ -32,41 +21,15 @@ const BackTopDemo = () => {
minHeight: 'auto',
}
- const handleClick = () => {
- console.log(translated.clg)
- }
-
return (
<>
{translated.title}
- {new Array(24).fill(0).map((_, index) => {
- return
{translated.content + index} |
- })}
-
-
-
-
{translated.backText}
-
+
)
diff --git a/src/packages/backtop/demo.tsx b/src/packages/backtop/demo.tsx
index 8a73c0744c..62ac74517a 100644
--- a/src/packages/backtop/demo.tsx
+++ b/src/packages/backtop/demo.tsx
@@ -1,36 +1,20 @@
import React from 'react'
-import { Top } from '@nutui/icons-react'
-import { BackTop } from './backtop'
import { useTranslate } from '../../sites/assets/locale'
-import Cell from '../cell'
-
-interface T {
- title: string
- clg: string
- backText: string
- content: string
-}
+import Demo1 from './demos/h5/demo1'
const BackTopDemo = () => {
- const [translated] = useTranslate({
+ const [translated] = useTranslate({
'zh-CN': {
title: '基础用法',
- clg: '触发返回顶部',
- content: '我是测试数据',
- backText: '顶部',
},
'en-US': {
title: 'Basic Usage',
- clg: 'backtop',
- content: 'test data',
- backText: 'Top',
+ },
+ 'zh-TW': {
+ title: '基礎用法',
},
})
- const handleClick = () => {
- console.log(translated.clg)
- }
-
return (
<>
{
id="target"
>
{translated.title}
- {new Array(24).fill(0).map((_, index) => {
- return
{translated.content + index} |
- })}
-
-
-
-
{translated.backText}
-
+
+ {new Array(24).fill(0).map((_, index) => {
+ return | 我是测试数据{index} |
+ })}
+
+
+ )
+}
+export default Demo1
diff --git a/src/packages/backtop/demos/h5/demo2.tsx b/src/packages/backtop/demos/h5/demo2.tsx
new file mode 100644
index 0000000000..9f73b520a9
--- /dev/null
+++ b/src/packages/backtop/demos/h5/demo2.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { BackTop, Cell } from '@nutui/nutui-react'
+
+const Demo2 = () => {
+ return (
+
+ {new Array(24).fill(0).map((_, index) => {
+ return | 我是测试数据{index} |
+ })}
+
+
+ )
+}
+export default Demo2
diff --git a/src/packages/backtop/demos/h5/demo3.tsx b/src/packages/backtop/demos/h5/demo3.tsx
new file mode 100644
index 0000000000..a423c33f8c
--- /dev/null
+++ b/src/packages/backtop/demos/h5/demo3.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { Top } from '@nutui/icons-react'
+import { BackTop, Cell } from '@nutui/nutui-react'
+
+const Demo3 = () => {
+ return (
+
+ {new Array(24).fill(0).map((_, index) => {
+ return
我是测试数据{index} |
+ })}
+
+
+
+
+ {new Array(24).fill(0).map((_, index) => {
+ return | 我是测试数据{index} |
+ })}
+
+
+ )
+}
+export default Demo4
diff --git a/src/packages/backtop/demos/h5/demo5.tsx b/src/packages/backtop/demos/h5/demo5.tsx
new file mode 100644
index 0000000000..bfeb250a5d
--- /dev/null
+++ b/src/packages/backtop/demos/h5/demo5.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import { BackTop, Cell } from '@nutui/nutui-react'
+import { Top } from '@nutui/icons-react'
+
+const Demo5 = () => {
+ const handleClick = () => {
+ console.log('触发返回顶部')
+ }
+ return (
+
+ {new Array(24).fill(0).map((_, index) => {
+ return
我是测试数据{index} |
+ })}
+
+
+
+
+ {new Array(24).fill(0).map((_, index) => {
+ return
我是测试数据{index} |
+ })}
+
+
+
+
+ {new Array(24).fill(0).map((_, index) => {
+ return | 我是测试数据{index} |
+ })}
+
+
+ )
+}
+export default Demo2
diff --git a/src/packages/backtop/demos/taro/demo3.tsx b/src/packages/backtop/demos/taro/demo3.tsx
new file mode 100644
index 0000000000..01bbd8f666
--- /dev/null
+++ b/src/packages/backtop/demos/taro/demo3.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { Top } from '@nutui/icons-react-taro'
+import { BackTop, Cell } from '@nutui/nutui-react-taro'
+
+const Demo3 = () => {
+ return (
+
+ {new Array(24).fill(0).map((_, index) => {
+ return
我是测试数据{index} |
+ })}
+
+
+
+
+ {new Array(24).fill(0).map((_, index) => {
+ return
我是测试数据{index} |
+ })}
+
+
+
+
- {new Array(24).fill(0).map((_, index) => {
- return | text data{index} |
- })}
-
-
- )
-}
-export default App;
-```
+
:::
@@ -39,22 +24,7 @@ export default App;
:::demo
-```tsx
-import React from "react";
-import { BackTop, Cell } from '@nutui/nutui-react';
-
-const App = () => {
- return (
-
- {new Array(24).fill(0).map((_, index) => {
- return | text data{index} |
- })}
-
-
- )
-}
-export default App;
-```
+
:::
@@ -62,34 +32,7 @@ export default App;
:::demo
-```tsx
-import React from "react";
-import { Top } from '@nutui/icons-react';
-import { BackTop, Cell } from '@nutui/nutui-react';
-
-const App = () => {
- return (
-
- {new Array(24).fill(0).map((_, index) => {
- return
text data{index} |
- })}
-
-
-
-
- {new Array(24).fill(0).map((_, index) => {
- return | text{index} |
- })}
-
-
- );
-};
-export default App;
-```
+
:::
-### Click
+### Click event
:::demo
-```tsx
-import React from "react";
-import { BackTop, Cell } from '@nutui/nutui-react';
-
-const App = () => {
- const handleClick = () => {
- console.log('click backtop')
- }
- return (
-
- {new Array(24).fill(0).map((_, index) => {
- return | text data{index} |
- })}
-
-
- );
-};
-export default App;
-```
+
:::
@@ -150,7 +60,7 @@ export default App;
| --- | --- | --- | --- |
| target | The listening element | `string` | `-` |
| threshold | How high to scroll the page vertically | `number` | `200` |
-| zIndex | Set the component z-index | `number` | `10` |
+| zIndex | Set the component z-index | `number` | `900` |
| duration | Set animation duration | `number` | `1000` |
| onClick | Emitted when component is clicked | `(event: MouseEvent) => void` | `-` |
diff --git a/src/packages/backtop/doc.md b/src/packages/backtop/doc.md
index 89ab14fdce..2038327e76 100644
--- a/src/packages/backtop/doc.md
+++ b/src/packages/backtop/doc.md
@@ -16,22 +16,7 @@ import { BackTop } from '@nutui/nutui-react';
:::demo
-```tsx
-import React from "react";
-import { BackTop, Cell } from '@nutui/nutui-react';
-
-const App = () => {
- return (
-
- {new Array(24).fill(0).map((_, index) => {
- return | 我是测试数据{index} |
- })}
-
-
- )
-}
-export default App;
-```
+
:::
@@ -39,22 +24,7 @@ export default App;
:::demo
-```tsx
-import React from "react";
-import { BackTop, Cell } from '@nutui/nutui-react';
-
-const App = () => {
- return (
-
- {new Array(24).fill(0).map((_, index) => {
- return | 我是测试数据{index} |
- })}
-
-
- )
-}
-export default App;
-```
+
:::
@@ -62,34 +32,7 @@ export default App;
:::demo
-```tsx
-import React from "react";
-import { Top } from '@nutui/icons-react';
-import { BackTop, Cell } from '@nutui/nutui-react';
-
-const App = () => {
- return (
-
- {new Array(24).fill(0).map((_, index) => {
- return
我是测试数据{index} |
- })}
-
-
-
-
- {new Array(24).fill(0).map((_, index) => {
- return | 我是测试数据{index} |
- })}
-
-
- );
-};
-export default App;
-```
+
:::
-### click 事件
+### click事件
:::demo
-```tsx
-import React from "react";
-import { BackTop, Cell } from '@nutui/nutui-react';
-
-const App = () => {
- const handleClick = () => {
- console.log('触发返回顶部')
- }
- return (
-
- {new Array(24).fill(0).map((_, index) => {
- return | 我是测试数据{index} |
- })}
-
-
- );
-};
-export default App;
-```
+
:::
@@ -150,7 +60,7 @@ export default App;
| --- | --- | --- | --- |
| target | 获取监听的目标元素 | `string` | `-` |
| threshold | 页面垂直滚动多高后出现 | `number` | `200` |
-| zIndex | 设置组件页面层级 | `number` | `10` |
+| zIndex | 设置组件页面层级 | `number` | `900` |
| duration | 设置动画持续时间，为 0 时表示无动画 | `number` | `1000` |
| onClick | 按钮点击时触发事件 | `(event: MouseEvent) => void` | `-` |
@@ -162,4 +72,4 @@ export default App;
| 名称 | 说明 | 默认值 |
| --- | --- | --- |
-| \--nutui-backtop-border-color | 边框颜色 | `#e0e0e0` |
\ No newline at end of file
+| \--nutui-backtop-border-color | 边框颜色 | `#e0e0e0` |
diff --git a/src/packages/backtop/doc.taro.md b/src/packages/backtop/doc.taro.md
index 5d4d533db7..106b363c22 100644
--- a/src/packages/backtop/doc.taro.md
+++ b/src/packages/backtop/doc.taro.md
@@ -16,22 +16,7 @@ import { BackTop } from '@nutui/nutui-react-taro'
:::demo
-```tsx
-import React from "react";
-import { BackTop, Cell } from '@nutui/nutui-react-taro';
-
-const App = () => {
- return (
-
- {new Array(24).fill(0).map((_, index) => {
- return | 我是测试数据{index} |
- })}
-
-
- )
-}
-export default App;
-```
+
:::
@@ -39,22 +24,7 @@ export default App;
:::demo
-```tsx
-import React from "react";
-import { BackTop, Cell } from '@nutui/nutui-react-taro';
-
-const App = () => {
- return (
-
- {new Array(24).fill(0).map((_, index) => {
- return | 我是测试数据{index} |
- })}
-
-
- )
-}
-export default App;
-```
+
:::
@@ -62,60 +32,15 @@ export default App;
:::demo
-```tsx
-import React from "react";
-import { Top } from '@nutui/icons-react-taro';
-import { BackTop, Cell } from '@nutui/nutui-react-taro';
-
-const App = () => {
- return (
-
- {new Array(24).fill(0).map((_, index) => {
- return
我是测试数据{index} |
- })}
-
-
-
-
- {new Array(24).fill(0).map((_, index) => {
- return | 我是测试数据{index} |
- })}
-
-
- );
-};
-export default App;
-```
+
:::
@@ -126,7 +51,7 @@ export default App;
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| threshold | 页面垂直滚动多高后出现 | `number` | `200` |
-| zIndex | 设置组件页面层级 | `number` | `10` |
+| zIndex | 设置组件页面层级 | `number` | `900` |
| duration | 设置动画持续时间，为 0 时表示无动画 | `number` | `1000` |
| onClick | 按钮点击时触发事件 | `(event: MouseEvent) => void` | `-` |
@@ -138,4 +63,4 @@ export default App;
| 名称 | 说明 | 默认值 |
| --- | --- | --- |
-| \--nutui-backtop-border-color | 边框颜色 | `#e0e0e0` |
\ No newline at end of file
+| \--nutui-backtop-border-color | 边框颜色 | `#e0e0e0` |
diff --git a/src/packages/backtop/doc.zh-TW.md b/src/packages/backtop/doc.zh-TW.md
index 4fbdc6bafb..c25b9c6f94 100644
--- a/src/packages/backtop/doc.zh-TW.md
+++ b/src/packages/backtop/doc.zh-TW.md
@@ -16,22 +16,7 @@ import { BackTop } from '@nutui/nutui-react';
:::demo
-```tsx
-import React from "react";
-import { BackTop, Cell } from '@nutui/nutui-react';
-
-const App = () => {
- return (
-
- {new Array(24).fill(0).map((_, index) => {
- return | 我是測試數據{index} |
- })}
-
-
- )
-}
-export default App;
-```
+
:::
@@ -39,22 +24,7 @@ export default App;
:::demo
-```tsx
-import React from "react";
-import { BackTop, Cell } from '@nutui/nutui-react';
-
-const App = () => {
- return (
-
- {new Array(24).fill(0).map((_, index) => {
- return | 我是測試數據{index} |
- })}
-
-
- )
-}
-export default App;
-```
+
:::
@@ -62,34 +32,7 @@ export default App;
:::demo
-```tsx
-import React from "react";
-import { Top } from '@nutui/icons-react';
-import { BackTop, Cell } from '@nutui/nutui-react';
-
-const App = () => {
- return (
-
- {new Array(24).fill(0).map((_, index) => {
- return
我是測試數據{index} |
- })}
-
-
-
-
- {new Array(24).fill(0).map((_, index) => {
- return | 我是測試數據{index} |
- })}
-
-
- );
-};
-export default App;
-```
+
:::
-### click 事件
+### click事件
:::demo
-```tsx
-import React from "react";
-import { BackTop, Cell } from '@nutui/nutui-react';
-
-const App = () => {
- const handleClick = () => {
- console.log('觸發返回頂部')
- }
- return (
-
- {new Array(24).fill(0).map((_, index) => {
- return | 我是測試數據{index} |
- })}
-
-
- );
-};
-export default App;
-```
+
:::
@@ -150,7 +60,7 @@ export default App;
| --- | --- | --- | --- |
| target | 獲取監聽的目標元素 | `string` | `-` |
| threshold | 頁面垂直滾動多高後出現 | `number` | `200` |
-| zIndex | 設置組件頁面層級 | `number` | `10` |
+| zIndex | 設置組件頁面層級 | `number` | `900` |
| duration | 設置動畫持續時間，為 0 時表示無動畫 | `number` | `1000` |
| onClick | 按鈕點擊時觸發事件 | `(event: MouseEvent) => void` | `-` |
diff --git a/src/packages/badge/__test__/__snapshots__/badge.spec.tsx.snap b/src/packages/badge/__test__/__snapshots__/badge.spec.tsx.snap
index 4de0a75260..35f39a089c 100644
--- a/src/packages/badge/__test__/__snapshots__/badge.spec.tsx.snap
+++ b/src/packages/badge/__test__/__snapshots__/badge.spec.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`should match custom icon 1`] = `
diff --git a/src/packages/badge/__test__/badge.spec.tsx b/src/packages/badge/__test__/badge.spec.tsx
index db4e3688d6..419280f946 100644
--- a/src/packages/badge/__test__/badge.spec.tsx
+++ b/src/packages/badge/__test__/badge.spec.tsx
@@ -56,3 +56,15 @@ test('should match custom icon', () => {
const { asFragment } = render(} />)
expect(asFragment()).toMatchSnapshot()
})
+
+test('should match custom color when fill = outline', () => {
+ const { container } = render(
+
+ )
+ const badgeContent = container.querySelectorAll('.nut-badge-content')[0]
+ expect(badgeContent).toHaveStyle({
+ border: '1px solid orange',
+ color: 'orange',
+ background: '#fff',
+ })
+})
diff --git a/src/packages/badge/badge.scss b/src/packages/badge/badge.scss
index 83bcf9e14e..6040b1f23d 100644
--- a/src/packages/badge/badge.scss
+++ b/src/packages/badge/badge.scss
@@ -38,6 +38,8 @@
border: $badge-border;
border-radius: $badge-border-radius;
min-width: $badge-min-width;
+ white-space: nowrap;
+ z-index: 1;
}
&-one {
@@ -57,4 +59,27 @@
border-radius: $badge-dot-width;
padding: 0;
}
+
+ &-outline {
+ .nut-badge-content {
+ background: $color-primary-text;
+ border: 1px solid $color-primary;
+ color: $color-primary;
+ }
+ }
+}
+
+[dir='rtl'] .nut-badge,
+.nut-rtl .nut-badge {
+ &-icon {
+ right: auto;
+ left: -15%;
+ }
+
+ &-content {
+ transform: var(
+ --nutui-badge-content-transform,
+ translateY(-50%) translateX(-100%)
+ );
+ }
}
diff --git a/src/packages/badge/badge.taro.tsx b/src/packages/badge/badge.taro.tsx
index 79758617fa..a0bf0c2cb7 100644
--- a/src/packages/badge/badge.taro.tsx
+++ b/src/packages/badge/badge.taro.tsx
@@ -1,8 +1,9 @@
import React, { CSSProperties, FunctionComponent, ReactNode } from 'react'
import classNames from 'classnames'
-
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { useRtl } from '@/packages/configprovider/index.taro'
+export type BadgeFill = 'solid' | 'outline'
export interface BadgeProps extends BasicComponent {
value: ReactNode
dot: boolean
@@ -10,6 +11,7 @@ export interface BadgeProps extends BasicComponent {
top: string | number
right: string | number
color: string
+ fill: BadgeFill
}
const defaultProps = {
...ComponentDefaults,
@@ -19,17 +21,32 @@ const defaultProps = {
top: '4',
right: '8',
color: '',
+ fill: 'solid',
} as BadgeProps
export const Badge: FunctionComponent> = (props) => {
- const { className, style, value, max, children, dot, top, right, color } = {
+ const rtl = useRtl()
+ const {
+ className,
+ style,
+ value,
+ max,
+ children,
+ dot,
+ top,
+ right,
+ color,
+ fill,
+ } = {
...defaultProps,
...props,
}
const classPrefix = 'nut-badge'
- const classes = classNames(classPrefix, className)
+ const classes = classNames(classPrefix, className, {
+ [`${classPrefix}-${fill}`]: fill === 'outline',
+ })
function content() {
- if (dot || typeof value === 'object') return null
+ if (dot || typeof value === 'object' || value === 0) return null
if (typeof value === 'number' && typeof max === 'number') {
return max < value ? `${max}+` : `${value}`
}
@@ -60,8 +77,21 @@ export const Badge: FunctionComponent> = (props) => {
const getStyle = () => {
const style: CSSProperties = {}
style.top = `${Number(top) || parseFloat(String(top)) || 0}px`
- style.right = `${Number(right) || parseFloat(String(right)) || 0}px`
- style.background = color
+ const dir = rtl ? 'left' : 'right'
+ style[dir] = `${Number(right) || parseFloat(String(right)) || 0}px`
+
+ if (color) {
+ if (fill === 'outline') {
+ style.color = color
+ style.background = '#fff'
+ if (!color?.includes('gradient')) {
+ style.border = `1px solid ${color}`
+ }
+ } else {
+ style.color = '#fff'
+ style.background = color
+ }
+ }
return style
}
return (
diff --git a/src/packages/badge/badge.tsx b/src/packages/badge/badge.tsx
index 79758617fa..be30f25a39 100644
--- a/src/packages/badge/badge.tsx
+++ b/src/packages/badge/badge.tsx
@@ -1,7 +1,9 @@
import React, { CSSProperties, FunctionComponent, ReactNode } from 'react'
import classNames from 'classnames'
-
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { useRtl } from '@/packages/configprovider'
+
+export type BadgeFill = 'solid' | 'outline'
export interface BadgeProps extends BasicComponent {
value: ReactNode
@@ -10,6 +12,7 @@ export interface BadgeProps extends BasicComponent {
top: string | number
right: string | number
color: string
+ fill: BadgeFill
}
const defaultProps = {
...ComponentDefaults,
@@ -19,17 +22,32 @@ const defaultProps = {
top: '4',
right: '8',
color: '',
+ fill: 'solid',
} as BadgeProps
export const Badge: FunctionComponent> = (props) => {
- const { className, style, value, max, children, dot, top, right, color } = {
+ const rtl = useRtl()
+ const {
+ className,
+ style,
+ value,
+ max,
+ children,
+ dot,
+ top,
+ right,
+ color,
+ fill,
+ } = {
...defaultProps,
...props,
}
const classPrefix = 'nut-badge'
- const classes = classNames(classPrefix, className)
+ const classes = classNames(classPrefix, className, {
+ [`${classPrefix}-${fill}`]: fill === 'outline',
+ })
function content() {
- if (dot || typeof value === 'object') return null
+ if (dot || typeof value === 'object' || value === 0) return null
if (typeof value === 'number' && typeof max === 'number') {
return max < value ? `${max}+` : `${value}`
}
@@ -60,8 +78,21 @@ export const Badge: FunctionComponent> = (props) => {
const getStyle = () => {
const style: CSSProperties = {}
style.top = `${Number(top) || parseFloat(String(top)) || 0}px`
- style.right = `${Number(right) || parseFloat(String(right)) || 0}px`
- style.background = color
+ const dir = rtl ? 'left' : 'right'
+ style[dir] = `${Number(right) || parseFloat(String(right)) || 0}px`
+
+ if (color) {
+ if (fill === 'outline') {
+ style.color = color
+ style.background = '#fff'
+ if (!color?.includes('gradient')) {
+ style.border = `1px solid ${color}`
+ }
+ } else {
+ style.color = '#fff'
+ style.background = color
+ }
+ }
return style
}
return (
diff --git a/src/packages/badge/demo.scss b/src/packages/badge/demo.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/packages/badge/demo.taro.tsx b/src/packages/badge/demo.taro.tsx
index d2fba8453b..58768efa12 100644
--- a/src/packages/badge/demo.taro.tsx
+++ b/src/packages/badge/demo.taro.tsx
@@ -1,40 +1,19 @@
-import React from 'react'
import Taro from '@tarojs/taro'
-import {
- Checklist,
- Download,
- User,
- Link as LinkIcon,
-} from '@nutui/icons-react-taro'
+import React from 'react'
+import { Cell } from '@/packages/nutui.react.taro'
import { useTranslate } from '@/sites/assets/locale/taro'
-import {
- Avatar,
- Badge,
- Cell,
- ConfigProvider,
-} from '@/packages/nutui.react.taro'
import Header from '@/sites/components/header'
+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'
+import Demo7 from './demos/taro/demo7'
+import Demo8 from './demos/taro/demo8'
-interface T {
- '8ab98966': string
- '1e7a2282': string
- '781b07fd': string
- '1c730245': string
- '1c730248': string
- '915d7b01': string
- f1089312: string
-}
-
-const customTheme = {
- nutuiBadgeBorderRadius: '12px 12px 12px 0',
-}
-
-const customTheme2 = {
- nutuiBadgeDotWidth: '10px',
- nutuiBadgeBorder: '2px solid #fff',
-}
const BadgeDemo = () => {
- const [translated] = useTranslate({
+ const [translated] = useTranslate({
'zh-CN': {
'8ab98966': '默认用法',
'1e7a2282': '最大值',
@@ -43,6 +22,7 @@ const BadgeDemo = () => {
'1c730248': '自定义徽标样式',
'915d7b01': '自定义位置',
f1089312: '独立展示',
+ a8237653: '填充模式',
},
'zh-TW': {
'8ab98966': '默认用法',
@@ -52,6 +32,7 @@ const BadgeDemo = () => {
'1c730248': '自定义徽标样式',
'915d7b01': '自定义位置',
f1089312: '独立展示',
+ a8237653: '填充模式',
},
'en-US': {
'8ab98966': 'Basic usage',
@@ -61,6 +42,7 @@ const BadgeDemo = () => {
'1c730248': 'Custom CSS',
'915d7b01': 'Custom Position',
f1089312: 'Display Alone',
+ a8237653: 'Fill Mode',
},
})
return (
@@ -69,141 +51,42 @@ const BadgeDemo = () => {
{translated['8ab98966']}
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
- |
+
{translated['1e7a2282']}
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
- |
+
{translated['781b07fd']}
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
- |
+
{translated['1c730245']}
-
- }
- >
- } shape="square" />
-
- }
- >
- } shape="square" />
-
- }
- >
- } shape="square" />
-
- |
+
{translated['1c730248']}
-
-
-
- } shape="square" />
-
-
-
-
-
- } shape="square" />
-
-
- |
+
{translated['915d7b01']}
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
- |
+
{translated.f1089312}
-
-
-
-
- |
+
+
+
+
{translated.a8237653}
+
+
diff --git a/src/packages/badge/demo.tsx b/src/packages/badge/demo.tsx
index c61005a825..2ac9480af9 100644
--- a/src/packages/badge/demo.tsx
+++ b/src/packages/badge/demo.tsx
@@ -1,32 +1,17 @@
import React from 'react'
-import { Checklist, Link as LinkIcon, Download, User } from '@nutui/icons-react'
-import { useTranslate } from '../../sites/assets/locale'
-import { Badge } from './badge'
import Cell from '@/packages/cell'
-import Avatar from '@/packages/avatar'
-import ConfigProvider from '@/packages/configprovider'
-
-interface T {
- '8ab98966': string
- '1e7a2282': string
- '781b07fd': string
- '1c730245': string
- '1c730248': string
- '915d7b01': string
- f1089312: string
-}
-
-const customTheme = {
- nutuiBadgeBorderRadius: '12px 12px 12px 0',
-}
-
-const customTheme2 = {
- nutuiBadgeDotWidth: '14px',
- nutuiBadgeBorder: '2px solid #fff',
-}
+import { useTranslate } from '../../sites/assets/locale'
+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'
+import Demo7 from './demos/h5/demo7'
+import Demo8 from './demos/h5/demo8'
const BadgeDemo = () => {
- const [translated] = useTranslate({
+ const [translated] = useTranslate({
'zh-CN': {
'8ab98966': '默认用法',
'1e7a2282': '最大值',
@@ -35,6 +20,7 @@ const BadgeDemo = () => {
'1c730248': '自定义徽标样式',
'915d7b01': '自定义位置',
f1089312: '独立展示',
+ a8237653: '填充模式',
},
'zh-TW': {
'8ab98966': '默认用法',
@@ -44,6 +30,7 @@ const BadgeDemo = () => {
'1c730248': '自定义徽标样式',
'915d7b01': '自定义位置',
f1089312: '独立展示',
+ a8237653: '填充模式',
},
'en-US': {
'8ab98966': 'Basic usage',
@@ -53,6 +40,7 @@ const BadgeDemo = () => {
'1c730248': 'Custom CSS',
'915d7b01': 'Custom Position',
f1089312: 'Display Alone',
+ a8237653: 'Fill Mode',
},
})
@@ -61,141 +49,42 @@ const BadgeDemo = () => {
{translated['8ab98966']}
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
- |
+
{translated['1e7a2282']}
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
- |
+
{translated['781b07fd']}
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
- |
+
{translated['1c730245']}
-
- }
- >
- } shape="square" />
-
- }
- >
- } shape="square" />
-
- }
- >
- } shape="square" />
-
- |
+
{translated['1c730248']}
-
-
-
- } shape="square" />
-
-
-
-
-
- } shape="square" />
-
-
- |
+
{translated['915d7b01']}
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
- |
+
{translated.f1089312}
-
-
-
-
- |
+
+
+
+
{translated.a8237653}
+
+
diff --git a/src/packages/badge/demos/h5/demo1.tsx b/src/packages/badge/demos/h5/demo1.tsx
new file mode 100644
index 0000000000..8e542d0e10
--- /dev/null
+++ b/src/packages/badge/demos/h5/demo1.tsx
@@ -0,0 +1,23 @@
+import { User } from '@nutui/icons-react'
+import { Avatar, Badge, Cell } from '@nutui/nutui-react'
+import React from 'react'
+
+const Demo1 = () => {
+ return (
+
+
+ } shape="square" />
+
+
+ } shape="square" />
+
+
+ } shape="square" />
+
+
+ } shape="square" />
+
+ |
+ )
+}
+export default Demo1
diff --git a/src/packages/badge/demos/h5/demo2.tsx b/src/packages/badge/demos/h5/demo2.tsx
new file mode 100644
index 0000000000..12d6101cf3
--- /dev/null
+++ b/src/packages/badge/demos/h5/demo2.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { Badge, Avatar, Cell } from '@nutui/nutui-react'
+import { User } from '@nutui/icons-react'
+
+const Demo2 = () => {
+ return (
+
+
+ } shape="square" />
+
+
+ } shape="square" />
+
+
+ } shape="square" />
+
+ |
+ )
+}
+export default Demo2
diff --git a/src/packages/badge/demos/h5/demo3.tsx b/src/packages/badge/demos/h5/demo3.tsx
new file mode 100644
index 0000000000..e173df2f4d
--- /dev/null
+++ b/src/packages/badge/demos/h5/demo3.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import { Badge, Avatar, Cell } from '@nutui/nutui-react'
+import { User } from '@nutui/icons-react'
+
+const Demo3 = () => {
+ return (
+
+
+ } shape="square" />
+
+
+ } shape="square" />
+
+
+ } shape="square" />
+
+
+ } shape="square" />
+
+ |
+ )
+}
+export default Demo3
diff --git a/src/packages/badge/demos/h5/demo4.tsx b/src/packages/badge/demos/h5/demo4.tsx
new file mode 100644
index 0000000000..38eb81691b
--- /dev/null
+++ b/src/packages/badge/demos/h5/demo4.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { Badge, Avatar, Cell } from '@nutui/nutui-react'
+import { User, Checklist, Link as LinkIcon, Download } from '@nutui/icons-react'
+
+const Demo4 = () => {
+ return (
+
+ }
+ >
+ } shape="square" />
+
+ }
+ >
+ } shape="square" />
+
+ }
+ >
+ } shape="square" />
+
+ |
+ )
+}
+export default Demo4
diff --git a/src/packages/badge/demos/h5/demo5.tsx b/src/packages/badge/demos/h5/demo5.tsx
new file mode 100644
index 0000000000..034634ddd4
--- /dev/null
+++ b/src/packages/badge/demos/h5/demo5.tsx
@@ -0,0 +1,32 @@
+import { User } from '@nutui/icons-react'
+import { Avatar, Badge, Cell, ConfigProvider } from '@nutui/nutui-react'
+import React from 'react'
+
+const customTheme = {
+ nutuiBadgeBorderRadius: '12px 12px 12px 0',
+}
+
+const customTheme2 = {
+ nutuiBadgeDotWidth: '14px',
+ nutuiBadgeDotHeight: '14px',
+ nutuiBadgeBorder: '2px solid #fff',
+}
+
+const Demo5 = () => {
+ return (
+
+
+
+ } shape="square" />
+
+
+
+
+
+ } shape="square" />
+
+
+ |
+ )
+}
+export default Demo5
diff --git a/src/packages/badge/demos/h5/demo6.tsx b/src/packages/badge/demos/h5/demo6.tsx
new file mode 100644
index 0000000000..c933a73c3a
--- /dev/null
+++ b/src/packages/badge/demos/h5/demo6.tsx
@@ -0,0 +1,20 @@
+import { User } from '@nutui/icons-react'
+import { Avatar, Badge, Cell } from '@nutui/nutui-react'
+import React from 'react'
+
+const Demo6 = () => {
+ return (
+
+
+ } shape="square" />
+
+
+ } shape="square" />
+
+
+ } shape="square" />
+
+ |
+ )
+}
+export default Demo6
diff --git a/src/packages/badge/demos/h5/demo7.tsx b/src/packages/badge/demos/h5/demo7.tsx
new file mode 100644
index 0000000000..dee3e556fa
--- /dev/null
+++ b/src/packages/badge/demos/h5/demo7.tsx
@@ -0,0 +1,13 @@
+import { Badge, Cell } from '@nutui/nutui-react'
+import React from 'react'
+
+const Demo7 = () => {
+ return (
+
+
+
+
+ |
+ )
+}
+export default Demo7
diff --git a/src/packages/badge/demos/h5/demo8.tsx b/src/packages/badge/demos/h5/demo8.tsx
new file mode 100644
index 0000000000..6124b11036
--- /dev/null
+++ b/src/packages/badge/demos/h5/demo8.tsx
@@ -0,0 +1,25 @@
+import { User } from '@nutui/icons-react'
+import { Avatar, Badge, Cell } from '@nutui/nutui-react'
+import React from 'react'
+
+const Demo8 = () => {
+ return (
+
+
+ } shape="square" />
+
+
+ } shape="square" />
+
+
+ } shape="square" />
+
+ |
+ )
+}
+export default Demo8
diff --git a/src/packages/badge/demos/taro/demo1.tsx b/src/packages/badge/demos/taro/demo1.tsx
new file mode 100644
index 0000000000..9d363b99e1
--- /dev/null
+++ b/src/packages/badge/demos/taro/demo1.tsx
@@ -0,0 +1,23 @@
+import { User } from '@nutui/icons-react-taro'
+import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro'
+import React from 'react'
+
+const Demo1 = () => {
+ return (
+
+
+ } shape="square" />
+
+
+ } shape="square" />
+
+
+ } shape="square" />
+
+
+ } shape="square" />
+
+ |
+ )
+}
+export default Demo1
diff --git a/src/packages/badge/demos/taro/demo2.tsx b/src/packages/badge/demos/taro/demo2.tsx
new file mode 100644
index 0000000000..add82dcc53
--- /dev/null
+++ b/src/packages/badge/demos/taro/demo2.tsx
@@ -0,0 +1,20 @@
+import { User } from '@nutui/icons-react-taro'
+import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro'
+import React from 'react'
+
+const Demo2 = () => {
+ return (
+
+
+ } shape="square" />
+
+
+ } shape="square" />
+
+
+ } shape="square" />
+
+ |
+ )
+}
+export default Demo2
diff --git a/src/packages/badge/demos/taro/demo3.tsx b/src/packages/badge/demos/taro/demo3.tsx
new file mode 100644
index 0000000000..097fc03467
--- /dev/null
+++ b/src/packages/badge/demos/taro/demo3.tsx
@@ -0,0 +1,41 @@
+import { User } from '@nutui/icons-react-taro'
+import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro'
+import React from 'react'
+
+const Demo3 = () => {
+ return (
+
+
+ } shape="square" />
+
+
+ } shape="square" />
+
+
+ } shape="square" />
+
+
+ } shape="square" />
+
+ |
+ )
+}
+export default Demo3
diff --git a/src/packages/badge/demos/taro/demo4.tsx b/src/packages/badge/demos/taro/demo4.tsx
new file mode 100644
index 0000000000..bdb4ae2d9f
--- /dev/null
+++ b/src/packages/badge/demos/taro/demo4.tsx
@@ -0,0 +1,34 @@
+import {
+ Checklist,
+ Download,
+ Link as LinkIcon,
+ User,
+} from '@nutui/icons-react-taro'
+import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro'
+import React from 'react'
+
+const Demo4 = () => {
+ return (
+
+ }
+ >
+ } shape="square" />
+
+ }
+ >
+ } shape="square" />
+
+ }
+ >
+ } shape="square" />
+
+ |
+ )
+}
+export default Demo4
diff --git a/src/packages/badge/demos/taro/demo5.tsx b/src/packages/badge/demos/taro/demo5.tsx
new file mode 100644
index 0000000000..ccd72c43d9
--- /dev/null
+++ b/src/packages/badge/demos/taro/demo5.tsx
@@ -0,0 +1,32 @@
+import { User } from '@nutui/icons-react-taro'
+import { Avatar, Badge, Cell, ConfigProvider } from '@nutui/nutui-react-taro'
+import React from 'react'
+
+const customTheme = {
+ nutuiBadgeBorderRadius: '12px 12px 12px 0',
+}
+
+const customTheme2 = {
+ nutuiBadgeDotWidth: '14px',
+ nutuiBadgeDotHeight: '14px',
+ nutuiBadgeBorder: '2px solid #fff',
+}
+
+const Demo5 = () => {
+ return (
+
+
+
+ } shape="square" />
+
+
+
+
+
+ } shape="square" />
+
+
+ |
+ )
+}
+export default Demo5
diff --git a/src/packages/badge/demos/taro/demo6.tsx b/src/packages/badge/demos/taro/demo6.tsx
new file mode 100644
index 0000000000..b7232c7375
--- /dev/null
+++ b/src/packages/badge/demos/taro/demo6.tsx
@@ -0,0 +1,20 @@
+import { User } from '@nutui/icons-react-taro'
+import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro'
+import React from 'react'
+
+const Demo6 = () => {
+ return (
+
+
+ } shape="square" />
+
+
+ } shape="square" />
+
+
+ } shape="square" />
+
+ |
+ )
+}
+export default Demo6
diff --git a/src/packages/badge/demos/taro/demo7.tsx b/src/packages/badge/demos/taro/demo7.tsx
new file mode 100644
index 0000000000..e7a679a4b1
--- /dev/null
+++ b/src/packages/badge/demos/taro/demo7.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Badge, Cell } from '@nutui/nutui-react-taro'
+
+const Demo7 = () => {
+ return (
+
+
+
+
+ |
+ )
+}
+export default Demo7
diff --git a/src/packages/badge/demos/taro/demo8.tsx b/src/packages/badge/demos/taro/demo8.tsx
new file mode 100644
index 0000000000..8fbac63a05
--- /dev/null
+++ b/src/packages/badge/demos/taro/demo8.tsx
@@ -0,0 +1,25 @@
+import { User } from '@nutui/icons-react-taro'
+import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro'
+import React from 'react'
+
+const Demo8 = () => {
+ return (
+
+
+ } shape="square" />
+
+
+ } shape="square" />
+
+
+ } shape="square" />
+
+ |
+ )
+}
+export default Demo8
diff --git a/src/packages/badge/doc.en-US.md b/src/packages/badge/doc.en-US.md
index 8ebffcab07..092cf225c3 100644
--- a/src/packages/badge/doc.en-US.md
+++ b/src/packages/badge/doc.en-US.md
@@ -14,231 +14,66 @@ import { Badge } from '@nutui/nutui-react';
### Basic usage
-:::demo
-
-```tsx
-import React from "react";
-import { Badge, Avatar, Cell } from '@nutui/nutui-react';
-import { User } from '@nutui/icons-react';
-
-const App = () => {
- return (
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
- |
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### Max Size
-:::demo
-
-```tsx
-import React from "react";
-import { Badge, Avatar, Cell } from '@nutui/nutui-react';
-import { User } from '@nutui/icons-react';
-
-const App = () => {
- return (
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
- |
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### Custom Color
-:::demo
-
-```tsx
-import React from "react";
-import { Badge, Avatar, Cell } from '@nutui/nutui-react';
-import { User } from '@nutui/icons-react';
-
-const App = () => {
- return (
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
- |
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### Custom context
-:::demo
-
-```tsx
-import React from "react";
-import { Badge, Avatar, Cell } from '@nutui/nutui-react';
-import { User, Checklist, Link as LinkIcon, Download } from '@nutui/icons-react';
-
-const App = () => {
- return (
-
- }
- className="test"
- >
- } shape="square" />
-
- }>
- } shape="square" />
-
- }>
- } shape="square" />
-
- |
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### Custom CSS
-:::demo
-
-```tsx
-import React from "react";
-import { Badge, Avatar, ConfigProvider, Cell } from '@nutui/nutui-react';
-import { User } from '@nutui/icons-react';
-
-const customTheme = {
- nutuiBadgeBorderRadius: '12px 12px 12px 0',
-}
-
-const customTheme2 = {
- nutuiBadgeDotWidth: '14px',
- nutuiBadgeDotHeight: '14px',
- nutuiBadgeBorder: '2px solid #fff',
-}
-
-const App = () => {
- return (
-
-
-
- } shape="square" />
-
-
-
-
-
- } shape="square" />
-
-
- |
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### Custom Position
-:::demo
-
-```tsx
-import React from "react";
-import { Badge, Avatar, Cell } from '@nutui/nutui-react';
-import { User } from '@nutui/icons-react';
-
-const App = () => {
- return (
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
- |
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### Display Alone
-:::demo
-
-```tsx
-import React from "react";
-import { Badge,Cell } from '@nutui/nutui-react';
+:::demo
+
+
+
+:::
-const App = () => {
- return (
-
-
-
-
- |
- )
-}
-export default App;
-```
+### Fill Mode
+:::demo
+
+
+
:::
## Badge
@@ -249,10 +84,11 @@ export default App;
| --- | --- | --- | --- |
| value | value to show, eg number、charctor and custom content | `ReactNode` | `-` |
| max | when value is number, it's the max size | `number` | `99` |
-| dot | Is dotted | `boolean` | `false` |
+| dot | Is dotted, When `value` is a custom content, dot does not take effect | `boolean` | `false` |
| top | Up and down offset, support unit setting, can be set to: "0" or 0, etc. | `string` \| `number` | `"0"` |
| right | Left and right offset, support unit setting, can be set to: "5" or 5, etc. | `string` \| `number` | `"5"` |
| color | background color,the default value is the theme primary color | `string` | `-` |
+| fill | Fill Mode | `solid` \| `outline` | `solid` |
## Theming
diff --git a/src/packages/badge/doc.md b/src/packages/badge/doc.md
index 7d6195cfbb..e0d5b9c342 100644
--- a/src/packages/badge/doc.md
+++ b/src/packages/badge/doc.md
@@ -14,231 +14,66 @@ import { Badge } from '@nutui/nutui-react';
### 基础用法
-:::demo
-
-```tsx
-import React from "react";
-import { Badge, Avatar, Cell } from '@nutui/nutui-react';
-import { User } from '@nutui/icons-react';
-
-const App = () => {
- return (
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
- |
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### 最大值
-:::demo
-
-```tsx
-import React from "react";
-import { Badge, Avatar, Cell } from '@nutui/nutui-react';
-import { User } from '@nutui/icons-react';
-
-const App = () => {
- return (
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
- |
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### 自定义颜色
-:::demo
-
-```tsx
-import React from "react";
-import { Badge, Avatar, Cell } from '@nutui/nutui-react';
-import { User } from '@nutui/icons-react';
-
-const App = () => {
- return (
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
- |
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### 自定义徽标内容
-:::demo
-
-```tsx
-import React from "react";
-import { Badge, Avatar, Cell } from '@nutui/nutui-react';
-import { User, Checklist, Link as LinkIcon, Download } from '@nutui/icons-react';
-
-const App = () => {
- return (
-
- }
- className="test"
- >
- } shape="square" />
-
- }>
- } shape="square" />
-
- }>
- } shape="square" />
-
- |
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### 自定义徽标样式
-:::demo
-
-```tsx
-import React from "react";
-import { Badge, Avatar, ConfigProvider, Cell } from '@nutui/nutui-react';
-import { User } from '@nutui/icons-react';
-
-const customTheme = {
- nutuiBadgeBorderRadius: '12px 12px 12px 0',
-}
-
-const customTheme2 = {
- nutuiBadgeDotWidth: '14px',
- nutuiBadgeDotHeight: '14px',
- nutuiBadgeBorder: '2px solid #fff',
-}
-
-const App = () => {
- return (
-
-
-
- } shape="square" />
-
-
-
-
-
- } shape="square" />
-
-
- |
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### 自定义位置
-:::demo
-
-```tsx
-import React from "react";
-import { Badge, Avatar, Cell } from '@nutui/nutui-react';
-import { User } from '@nutui/icons-react';
-
-const App = () => {
- return (
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
- |
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### 独立展示
-:::demo
-
-```tsx
-import React from "react";
-import { Badge,Cell } from '@nutui/nutui-react';
+:::demo
+
+
+
+:::
-const App = () => {
- return (
-
-
-
-
- |
- )
-}
-export default App;
-```
+### 填充模式
+:::demo
+
+
+
:::
## Badge
@@ -249,10 +84,11 @@ export default App;
| --- | --- | --- | --- |
| value | 显示的内容，支持数字、字符和自定义内容 | `ReactNode` | `-` |
| max | value 为数值时，最大值 | `number` | `99` |
-| dot | 是否为小点 | `boolean` | `false` |
+| dot | 是否为小点，当`value`值为自定义内容时，dot不生效 | `boolean` | `false` |
| top | 上下偏移量，支持单位设置，可设置为："0"或0 等 | `string` \| `number` | `"0"` |
| right | 左右偏移量，支持单位设置，可设置为："5"或5 等 | `string` \| `number` | `"5"` |
| color | 徽标背景颜色,默认值为当前主题色 | `string` | `-` |
+| fill | 填充模式 | `solid` \| `outline` | `solid` |
## 主题定制
diff --git a/src/packages/badge/doc.taro.md b/src/packages/badge/doc.taro.md
index 0da063a113..7a46f100de 100644
--- a/src/packages/badge/doc.taro.md
+++ b/src/packages/badge/doc.taro.md
@@ -14,231 +14,66 @@ import { Badge } from '@nutui/nutui-react-taro';
### 基础用法
-:::demo
-
-```tsx
-import React from "react";
-import { Badge, Avatar , Cell} from '@nutui/nutui-react-taro';
-import { User } from '@nutui/icons-react-taro';
-
-const App = () => {
- return (
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
- |
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### 最大值
-:::demo
-
-```tsx
-import React from "react";
-import { Badge, Avatar, Cell } from '@nutui/nutui-react-taro';
-import { User } from '@nutui/icons-react-taro';
-
-const App = () => {
- return (
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
- |
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### 自定义颜色
-:::demo
-
-```tsx
-import React from "react";
-import { Badge, Avatar, Cell } from '@nutui/nutui-react-taro';
-import { User } from '@nutui/icons-react-taro';
-
-const App = () => {
- return (
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
- |
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### 自定义徽标内容
-:::demo
-
-```tsx
-import React from "react";
-import { Badge, Avatar, Cell } from '@nutui/nutui-react-taro';
-import { User, Checklist, Link as LinkIcon, Download } from '@nutui/icons-react-taro';
-
-const App = () => {
- return (
-
- }
- className="test"
- >
- } shape="square" />
-
- }>
- } shape="square" />
-
- }>
- } shape="square" />
-
- |
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### 自定义徽标样式
-:::demo
-
-```tsx
-import React from "react";
-import { Badge, Avatar, ConfigProvider,Cell } from '@nutui/nutui-react-taro';
-import { User } from '@nutui/icons-react-taro';
-
-const customTheme = {
- nutuiBadgeBorderRadius: '12px 12px 12px 0',
-}
-
-const customTheme2 = {
- nutuiBadgeDotWidth: '14px',
- nutuiBadgeDotHeight: '14px',
- nutuiBadgeBorder: '2px solid #fff',
-}
-
-const App = () => {
- return (
-
-
-
- } shape="square" />
-
-
-
-
-
- } shape="square" />
-
-
- |
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### 自定义位置
-:::demo
-
-```tsx
-import React from "react";
-import { Badge, Avatar,Cell } from '@nutui/nutui-react-taro';
-import { User } from '@nutui/icons-react-taro';
-
-const App = () => {
- return (
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
- |
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### 独立展示
-:::demo
-
-```tsx
-import React from "react";
-import { Badge, Cell } from '@nutui/nutui-react-taro';
+:::demo
+
+
+
+:::
-const App = () => {
- return (
-
-
-
-
- |
- )
-}
-export default App;
-```
+### 填充模式
+:::demo
+
+
+
:::
## Badge
@@ -249,10 +84,11 @@ export default App;
| --- | --- | --- | --- |
| value | 显示的内容，支持数字、字符和自定义内容 | `ReactNode` | `-` |
| max | value 为数值时，最大值 | `number` | `99` |
-| dot | 是否为小点 | `boolean` | `false` |
+| dot | 是否为小点，当`value`值为自定义内容时，dot不生效 | `boolean` | `false` |
| top | 上下偏移量，支持单位设置，可设置为："0"或0 等 | `string` \| `number` | `"0"` |
| right | 左右偏移量，支持单位设置，可设置为："5"或5 等 | `string` \| `number` | `"5"` |
-| color | 徽标背景颜色 | `string` | `#fa2c19` |
+| color | 徽标背景颜色 | `string` | `-` |
+| fill | 填充模式 | `solid` \| `outline` | `solid` |
## 主题定制
diff --git a/src/packages/badge/doc.zh-TW.md b/src/packages/badge/doc.zh-TW.md
index e10a80a1a9..7fb0ab3e92 100644
--- a/src/packages/badge/doc.zh-TW.md
+++ b/src/packages/badge/doc.zh-TW.md
@@ -14,231 +14,66 @@ import { Badge } from '@nutui/nutui-react';
### 基礎用法
-:::demo
-
-```tsx
-import React from "react";
-import { Badge, Avatar, Cell } from '@nutui/nutui-react';
-import { User } from '@nutui/icons-react';
-
-const App = () => {
- return (
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
- |
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### 最大值
-:::demo
-
-```tsx
-import React from "react";
-import { Badge, Avatar, Cell } from '@nutui/nutui-react';
-import { User } from '@nutui/icons-react';
-
-const App = () => {
- return (
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
- |
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### 自定義顏色
-:::demo
-
-```tsx
-import React from "react";
-import { Badge, Avatar, Cell } from '@nutui/nutui-react';
-import { User } from '@nutui/icons-react';
-
-const App = () => {
- return (
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
- |
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### 自定義徽標內容
-:::demo
-
-```tsx
-import React from "react";
-import { Badge, Avatar, Cell } from '@nutui/nutui-react';
-import { User, Checklist, Link as LinkIcon, Download } from '@nutui/icons-react';
-
-const App = () => {
- return (
-
- }
- className="test"
- >
- } shape="square" />
-
- }>
- } shape="square" />
-
- }>
- } shape="square" />
-
- |
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### 自定義徽標樣式
-:::demo
-
-```tsx
-import React from "react";
-import { Badge, Avatar, ConfigProvider, Cell } from '@nutui/nutui-react';
-import { User } from '@nutui/icons-react';
-
-const customTheme = {
- nutuiBadgeBorderRadius: '12px 12px 12px 0',
-}
-
-const customTheme2 = {
- nutuiBadgeDotWidth: '14px',
- nutuiBadgeDotHeight: '14px',
- nutuiBadgeBorder: '2px solid #fff',
-}
-
-const App = () => {
- return (
-
-
-
- } shape="square" />
-
-
-
-
-
- } shape="square" />
-
-
- |
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### 自定義位置
-:::demo
-
-```tsx
-import React from "react";
-import { Badge, Avatar, Cell } from '@nutui/nutui-react';
-import { User } from '@nutui/icons-react';
-
-const App = () => {
- return (
-
-
- } shape="square" />
-
-
- } shape="square" />
-
-
- } shape="square" />
-
- |
- )
-}
-export default App;
-```
-
+:::demo
+
+
+
:::
### 獨立展示
-:::demo
-
-```tsx
-import React from "react";
-import { Badge,Cell } from '@nutui/nutui-react';
+:::demo
+
+
+
+:::
-const App = () => {
- return (
-
-
-
-
- |
- )
-}
-export default App;
-```
+### 填充模式
+:::demo
+
+
+
:::
## Badge
@@ -249,10 +84,11 @@ export default App;
| --- | --- | --- | --- |
| value | 顯示的內容，支持數字、字符和自定義內容 | `ReactNode` | `-` |
| max | value 為數值時，最大值 | `number` | `99` |
-| dot | 是否為小點 | `boolean` | `false` |
+| dot | 是否為小點，當`value`值為自定義內容時，dot不生效 | `boolean` | `false` |
| top | 上下偏移量，支持單位設置，可設置為："0"或0 等 | `string` \| `number` | `"0"` |
| right | 左右偏移量，支持單位設置，可設置為："5"或5 等 | `string` \| `number` | `"5"` |
| color | 徽標背景顏色,默認值為當前主題色 | `string` | `-` |
+| fill | 填充模式 | `solid` \| `outline` | `solid` |
## 主題定制
diff --git a/src/packages/badge/index.taro.ts b/src/packages/badge/index.taro.ts
index f732830bbb..3191faeb66 100644
--- a/src/packages/badge/index.taro.ts
+++ b/src/packages/badge/index.taro.ts
@@ -1,4 +1,4 @@
import { Badge } from './badge.taro'
-export type { BadgeProps } from './badge.taro'
+export type { BadgeFill, BadgeProps } from './badge.taro'
export default Badge
diff --git a/src/packages/badge/index.ts b/src/packages/badge/index.ts
index b0bc5e704d..89062c5a6d 100644
--- a/src/packages/badge/index.ts
+++ b/src/packages/badge/index.ts
@@ -1,4 +1,4 @@
import { Badge } from './badge'
-export type { BadgeProps } from './badge'
+export type { BadgeFill, BadgeProps } from './badge'
export default Badge
diff --git a/src/packages/barrage/__tests__/barrage.spec.tsx b/src/packages/barrage/__tests__/barrage.spec.tsx
index 4451d48808..809d5d647e 100644
--- a/src/packages/barrage/__tests__/barrage.spec.tsx
+++ b/src/packages/barrage/__tests__/barrage.spec.tsx
@@ -33,8 +33,14 @@ test('should danmu list props', async () => {
await waitFor(
() => {
+ const el = container.querySelectorAll('.barrage-item')[0]
+ const wrapper = container.querySelectorAll('.nut-barrage')[0]
+
+ const elScrollDuration = Math.ceil(
+ (el.clientWidth / wrapper.clientWidth) * 300
+ )
expect(container.querySelectorAll('.barrage-item')[0]).toHaveStyle({
- animationDuration: '300ms',
+ animationDuration: `${300 + elScrollDuration}ms`,
})
},
{ timeout: 4000 }
diff --git a/src/packages/barrage/barrage.scss b/src/packages/barrage/barrage.scss
index ec135c2467..45bb0e4972 100644
--- a/src/packages/barrage/barrage.scss
+++ b/src/packages/barrage/barrage.scss
@@ -50,7 +50,43 @@
}
to {
+ -webkit-transform: translateX(var(--move-distance));
+ }
+ }
+}
+
+[dir='rtl'] .nut-barrage,
+.nut-rtl .nut-barrage {
+ left: auto;
+ right: 0;
+ .barrage-item {
+ transform: translateX(-100%);
+ background: linear-gradient(
+ to left,
+ var(--nutui-black-3),
+ var(--nutui-black-1)
+ );
+
+ &.move {
+ animation-name: moving-rtl;
+ }
+ }
+ @keyframes moving-rtl {
+ from {
transform: translateX(var(--move-distance));
}
+ to {
+ transform: translateX(100%);
+ }
+ }
+
+ @-webkit-keyframes moving-rtl {
+ from {
+ transform: translateX(var(--move-distance));
+ }
+
+ to {
+ transform: translateX(100%);
+ }
}
}
diff --git a/src/packages/barrage/barrage.taro.tsx b/src/packages/barrage/barrage.taro.tsx
index df42767613..c541c3af2a 100644
--- a/src/packages/barrage/barrage.taro.tsx
+++ b/src/packages/barrage/barrage.taro.tsx
@@ -1,14 +1,14 @@
import React, {
ForwardRefRenderFunction,
- useState,
useEffect,
useRef,
useImperativeHandle,
} from 'react'
-import { createSelectorQuery } from '@tarojs/taro'
-
import classNames from 'classnames'
+
+import { View } from '@tarojs/components'
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { getRectByTaro } from '@/utils/get-rect-by-taro'
export interface BarrageProps extends BasicComponent {
list: Array
@@ -18,7 +18,6 @@ export interface BarrageProps extends BasicComponent {
rows: number
gapY: number
}
-
const defaultProps = {
...ComponentDefaults,
list: [],
@@ -47,98 +46,118 @@ const InternalBarrage: ForwardRefRenderFunction<
...defaultProps,
...props,
}
- const [styleList, setStyleList] = useState([])
- const [baItemList, setBaItemList] = useState(list)
- const barrageListSet = useRef(list)
-
const barrageBody = useRef(null)
const barrageContainer = useRef(null)
- const timeId = useRef(new Date().getTime())
+ const barrageCWidth = useRef(0)
const timer = useRef(0)
+ const index = useRef(0)
+ const times = useRef([])
+ const historyIndex = useRef(-1)
- const classes = classNames(
- classPrefix,
- {
- [`${classPrefix}-body${timeId.current}`]: true,
- },
- className
- )
+ const classes = classNames(classPrefix, className)
useImperativeHandle(ref, () => ({
add: (word: string) => {
- barrageListSet.current = [...barrageListSet.current, word]
- run()
+ const _index = index.current % list.length
+ if (!loop && index.current === list.length) {
+ list.splice(list.length, 0, word)
+ } else {
+ list.splice(_index, 0, word)
+ }
},
}))
+ const getNodeWidth = async (node: Element | null, type = 'width') => {
+ if (node) {
+ const refe = await getRectByTaro(node)
+ return Math.ceil(type === 'height' ? refe.height : refe.width)
+ }
+ return 0
+ }
+
useEffect(() => {
- barrageListSet.current = [...list]
- run()
+ const init = async () => {
+ if (barrageBody.current) {
+ barrageCWidth.current = await getNodeWidth(barrageBody.current)
+ }
+ }
+
+ init()
+
+ setTimeout(() => {
+ barrageBody.current?.style.setProperty(
+ '--move-distance',
+ `-${barrageCWidth.current}px`
+ )
+ index.current = 0
+ run()
+ }, 300)
return () => {
clearInterval(timer.current)
}
}, [list])
const run = () => {
- setBaItemList(barrageListSet.current)
- barrageListSet.current.forEach((item: any, index: number) => {
- getNode(index)
- })
+ clearInterval(timer.current)
+ let intervalCache = interval
+ const _index = (loop ? index.current % list.length : index.current) % rows
+ const result = times.current[_index] - rows * interval
+ if (result > 0) {
+ intervalCache += result
+ }
+ timer.current = window.setTimeout(() => {
+ play()
+ }, intervalCache)
}
- const getNode = (index: number) => {
- const query = createSelectorQuery()
- setTimeout(() => {
- let width = 100
- query
- .select(`.${classPrefix}-body${timeId.current}`)
- .boundingClientRect((rec: any) => {
- width = rec.width || 300
- })
-
- query
- .select(`.${classPrefix}-item${index}`)
- .boundingClientRect((recs: any) => {
- const height = recs.height
- const nodeTop = `${(index % rows) * (height + gapY) + 20}px`
- styleInfo(index, nodeTop, width)
- })
- .exec()
- }, 500)
- }
+ const play = async () => {
+ if (!loop && index.current >= list.length) {
+ return
+ }
- const styleInfo = (index: number, nodeTop: string, width: number) => {
- const timeIndex = index - rows > 0 ? index - rows : 0
- const list = styleList
- const time = list[timeIndex] ? Number(list[timeIndex]['--time']) : 0
- const obj = {
- top: nodeTop,
- '--time': `${interval * index + time}`,
- animationDuration: `${duration}ms`,
- animationIterationCount: `${loop ? 'infinite' : 1}`,
- animationDelay: `${interval * index + time}ms`,
- '--move-distance': `-${width}px`,
+ const _index = loop ? index.current % list.length : index.current
+ const el = document.createElement(`View`)
+
+ let currentIndex = _index % rows
+ if (
+ currentIndex <= historyIndex.current ||
+ (historyIndex.current === 3 && currentIndex !== 0) ||
+ Math.abs(currentIndex - historyIndex.current) !== 1
+ ) {
+ currentIndex =
+ historyIndex.current + 1 >= rows ? 0 : historyIndex.current + 1
+ }
+ historyIndex.current = currentIndex
+
+ el.innerHTML = list[_index] as string
+ el.classList.add('barrage-item')
+ ;(barrageContainer.current as HTMLDivElement).appendChild(el)
+
+ try {
+ const width = await getNodeWidth(el)
+ const height = await getNodeWidth(el, 'height')
+ el.classList.add('move')
+ const elScrollDuration = (width / barrageCWidth.current) * duration
+ times.current[currentIndex] = Math.ceil(elScrollDuration)
+ el.style.animationDuration = `${(duration + elScrollDuration).toFixed(
+ 2
+ )}ms`
+ el.style.top = `${currentIndex * (height + gapY) + 20}px`
+ el.style.width = `${width}px`
+ } catch (error) {
+ console.log('异常自动流转到下一个')
}
- list.push(obj)
- setStyleList([...list])
+ el.addEventListener('animationend', () => {
+ ;(barrageContainer.current as HTMLDivElement).removeChild(el)
+ })
+ index.current++
+ run()
}
return (
-
-
- {baItemList.map((item: any, index: number) => {
- return (
-
- {item.length > 8 ? `${item.substr(0, 8)}...` : item}
-
- )
- })}
-
-
{translated['84aa6bce']}
-
-
- |
-
-
-
+
{translated['84aa6bce']}
-
-
- |
-
-
-
+
)
diff --git a/src/packages/barrage/demos/h5/demo1.tsx b/src/packages/barrage/demos/h5/demo1.tsx
new file mode 100644
index 0000000000..5fc75fbe1b
--- /dev/null
+++ b/src/packages/barrage/demos/h5/demo1.tsx
@@ -0,0 +1,31 @@
+import React, { useRef } from 'react'
+import { Cell, Button, Barrage } from '@nutui/nutui-react'
+
+const Demo1 = () => {
+ const barrageList = [
+ '画美不看画美不看画美不看画美不看',
+ '不明觉厉',
+ '喜大普奔',
+ '男默女泪',
+ '累觉不爱',
+ '爷青结',
+ ]
+ const barrageRef = useRef(null)
+ const addBarrage = () => {
+ const n = Math.random()
+ if (barrageRef.current) {
+ barrageRef.current.add(`随机——${String(n).substr(2, 10)}`)
+ }
+ }
+ return (
+ <>
+
+
+ |
+
+
+ )
+}
+export default Demo1
diff --git a/src/packages/barrage/demos/taro/demo1.tsx b/src/packages/barrage/demos/taro/demo1.tsx
new file mode 100644
index 0000000000..b4c2a3ba4d
--- /dev/null
+++ b/src/packages/barrage/demos/taro/demo1.tsx
@@ -0,0 +1,31 @@
+import React, { useRef } from 'react'
+import { Cell, Button, Barrage } from '@nutui/nutui-react-taro'
+
+const Demo1 = () => {
+ const barrageList = [
+ '画美不看画美不看画美不看画美不看',
+ '不明觉厉',
+ '喜大普奔',
+ '男默女泪',
+ '累觉不爱',
+ '爷青结',
+ ]
+ const barrageRef = useRef(null)
+ const addBarrage = () => {
+ const n = Math.random()
+ if (barrageRef.current) {
+ barrageRef.current.add(`随机——${String(n).substr(2, 10)}`)
+ }
+ }
+ return (
+ <>
+
+
+ |
+
+
+ )
+}
+export default Demo1
diff --git a/src/packages/barrage/doc.en-US.md b/src/packages/barrage/doc.en-US.md
index 712eb9b645..a7e65bbfa3 100644
--- a/src/packages/barrage/doc.en-US.md
+++ b/src/packages/barrage/doc.en-US.md
@@ -16,52 +16,7 @@ import { Barrage } from '@nutui/nutui-react'
:::demo
-```tsx
-import React, { useRef } from 'react'
-import { Cell, Button, Barrage } from '@nutui/nutui-react'
-
-const barrageStyle = {
- padding: '20px 0',
- height: '150px',
- boxSizing: 'border-box',
-}
-const App = () => {
- const barrageList = [
- 'beautiful painting',
- 'Unconsciously',
- 'Super Plus enjoy',
- 'male silent female tears',
- 'Tired of not loving',
- 'cool-',
- ]
- const barrageRef = useRef(null)
- const addBarrage = () => {
- const n = Math.random()
- if (barrageRef.current) {
- barrageRef.current.add(`random——${String(n).substr(2, 10)}`)
- }
- }
- return (
-
-
Basic usage
-
-
- |
-
-
-
-
-
基础用法
-
-
- |
-
-
-
-
-
基础用法
-
-
- |
-
-
-
-
-
基礎用法
-
-
- |
-
-
-
-
diff --git a/src/packages/button/button.scss b/src/packages/button/button.scss
index 31058bedc7..2c1e9f8a4a 100644
--- a/src/packages/button/button.scss
+++ b/src/packages/button/button.scss
@@ -13,7 +13,7 @@
font-weight: $button-default-font-weight;
text-align: center;
cursor: pointer;
- transition: opacity 0.2s;
+ transition: $button-transition;
-webkit-appearance: none;
user-select: none;
touch-action: manipulation;
@@ -59,6 +59,11 @@
align-items: center;
justify-content: center;
background: initial;
+ .nut-icon {
+ font-size: $button-default-font-size;
+ width: $button-default-font-size;
+ height: $button-default-font-size;
+ }
}
&-loading,
@@ -78,7 +83,7 @@
border: $button-border-width solid $button-default-border-color;
&.nut-button-disabled {
- color: $color-text-help;
+ color: $button-default-disabled-color;
background: transparent;
}
@@ -86,7 +91,7 @@
background: transparent;
&.nut-button-disabled {
- color: $color-text-help;
+ color: $button-default-disabled-color;
}
}
@@ -95,7 +100,7 @@
background: transparent;
&.nut-button-disabled {
- color: $color-text-help;
+ color: $button-default-disabled-color;
border-color: $button-default-disabled;
}
}
@@ -105,22 +110,54 @@
padding: $button-normal-padding;
}
+ &-xlarge {
+ height: $button-xlarge-height;
+ padding: $button-xlarge-padding;
+ font-size: $button-xlarge-font-size;
+ font-weight: $button-large-font-weight;
+
+ .nut-icon {
+ font-size: $button-xlarge-font-size;
+ width: $button-xlarge-font-size;
+ height: $button-xlarge-font-size;
+ }
+ }
+
&-large {
height: $button-large-height;
padding: $button-large-padding;
font-size: $button-large-font-size;
+ font-weight: $button-large-font-weight;
+
+ .nut-icon {
+ font-size: $button-large-font-size;
+ width: $button-large-font-size;
+ height: $button-large-font-size;
+ }
}
&-small {
height: $button-small-height;
padding: $button-small-padding;
font-size: $button-small-font-size;
+
+ .nut-icon {
+ font-size: $button-small-font-size;
+ width: $button-small-font-size;
+ height: $button-small-font-size;
+ }
}
&-mini {
height: $button-mini-height;
padding: $button-mini-padding;
font-size: $button-mini-font-size;
+
+ .nut-icon {
+ font-size: $button-mini-font-size;
+ width: $button-mini-font-size;
+ height: $button-mini-font-size;
+ }
}
&-primary {
@@ -290,7 +327,7 @@
border: $button-border-width solid transparent;
&.nut-button-disabled {
- color: #ffffff;
+ color: $button-default-disabled-color;
background: $button-default-disabled;
}
}
@@ -308,7 +345,6 @@
&-disabled {
cursor: not-allowed;
- font-weight: 400;
color: #ffffff;
background: $button-default-disabled;
border-color: $button-default-disabled;
@@ -321,9 +357,39 @@
&-round {
border-radius: $button-border-radius;
+
+ &.nut-button-xlarge,
+ &.nut-button-large {
+ border-radius: $button-large-border-radius;
+ }
+
+ &.nut-button-small {
+ border-radius: $button-small-border-radius;
+ }
+
+ &.nut-button-mini {
+ border-radius: $button-mini-border-radius;
+ }
}
&-square {
border-radius: $button-square-border-radius;
}
}
+
+[dir='rtl'] .nut-button,
+.nut-rtl .nut-button {
+ &-text {
+ margin-left: 0;
+ margin-right: $button-text-icon-margin;
+
+ &.right {
+ margin-left: $button-text-icon-margin;
+ }
+ }
+ &::before {
+ left: auto;
+ right: 50%;
+ transform: translate(50%, -50%);
+ }
+}
diff --git a/src/packages/button/button.taro.tsx b/src/packages/button/button.taro.tsx
index 0d2ef0d044..7fd6d1dd05 100644
--- a/src/packages/button/button.taro.tsx
+++ b/src/packages/button/button.taro.tsx
@@ -18,7 +18,7 @@ export type ButtonType =
| 'success'
| 'warning'
| 'danger'
-export type ButtonSize = 'large' | 'normal' | 'small' | 'mini'
+export type ButtonSize = 'xlarge' | 'large' | 'normal' | 'small' | 'mini'
export type ButtonShape = 'square' | 'round'
export type ButtonFill = 'solid' | 'outline' | 'dashed' | 'none'
@@ -79,18 +79,15 @@ export const Button = React.forwardRef
>(
const getStyle = useCallback(() => {
const style: CSSProperties = {}
if (props.color) {
- if (
- props.fill &&
- (props.fill === 'outline' || props.fill === 'dashed')
- ) {
+ if (props.fill === 'outline' || props.fill === 'dashed') {
style.color = color
- style.background = '#fff'
if (!color?.includes('gradient')) {
style.borderColor = color
}
} else {
style.color = '#fff'
style.background = color
+ style.borderColor = 'transparent'
}
}
return style
@@ -110,7 +107,6 @@ export const Button = React.forwardRef>(
// eslint-disable-next-line react/button-has-type
+ }
+ rightIcon={}
+ style={marginStyle}
+ >
+ Button
+
+ }
+ rightIcon={}
+ style={marginStyle}
+ >
+ Button
+
+ }
+ rightIcon={}
+ style={{
+ margin: 8,
+ backgroundColor: `var(--nutui-color-primary-light)`,
+ borderColor: `var(--nutui-color-primary)`,
+ color: `var(--nutui-color-primary)`,
+ }}
+ >
+ Button
+
+ }
+ rightIcon={}
+ style={{
+ margin: 8,
+ backgroundColor: `var(--nutui-gray-3)`,
+ color: `var(--nutui-gray-7)`,
+ }}
+ >
+ Button
+
+ }
+ rightIcon={}
+ style={{
+ margin: 8,
+ backgroundColor: `var(--nutui-gray-1)`,
+ color: `var(--nutui-gray-7)`,
+ }}
+ >
+ Button
+
+ }
+ rightIcon={}
+ style={marginStyle}
+ >
+ Button
+
+ }
+ style={marginStyle}
+ />
+ }
+ style={marginStyle}
+ />
+ }
+ style={marginStyle}
+ />
+ }
+ rightIcon={}
+ style={marginStyle}
+ >
+ Button
+
+ }
+ rightIcon={}
+ style={marginStyle}
+ >
+ Button
+
+
+ )
+}
+export default Demo3
diff --git a/src/packages/button/demos/h5/demo4.tsx b/src/packages/button/demos/h5/demo4.tsx
new file mode 100644
index 0000000000..fe13a96859
--- /dev/null
+++ b/src/packages/button/demos/h5/demo4.tsx
@@ -0,0 +1,117 @@
+import React from 'react'
+import { Star, Plus } from '@nutui/icons-react'
+import { Button } from '@nutui/nutui-react'
+
+const Demo4 = () => {
+ const marginStyle = { margin: 8 }
+ return (
+ <>
+ }
+ rightIcon={}
+ style={marginStyle}
+ >
+ Disabled
+
+ }
+ rightIcon={}
+ style={marginStyle}
+ >
+ Disabled
+
+ }
+ rightIcon={}
+ style={marginStyle}
+ >
+ Disabled
+
+ }
+ rightIcon={}
+ style={marginStyle}
+ >
+ Disabled
+
+ }
+ rightIcon={}
+ style={{
+ margin: 8,
+ backgroundColor: `var(--nutui-gray-3)`,
+ color: `var(--nutui-gray-5)`,
+ }}
+ >
+ Disabled
+
+ }
+ rightIcon={}
+ style={{
+ margin: 8,
+ backgroundColor: `var(--nutui-gray-1)`,
+ color: `var(--nutui-gray-5)`,
+ }}
+ >
+ Disabled
+
+ } rightIcon={} style={marginStyle}>
+ Disabled
+
+ }
+ style={marginStyle}
+ />
+ } style={marginStyle} />
+ }
+ style={marginStyle}
+ />
+ }
+ rightIcon={}
+ style={marginStyle}
+ >
+ Disabled
+
+ }
+ rightIcon={}
+ style={marginStyle}
+ >
+ Disabled
+
+
+ )
+}
+export default Demo4
diff --git a/src/packages/button/demos/h5/demo5.tsx b/src/packages/button/demos/h5/demo5.tsx
new file mode 100644
index 0000000000..bd406adb43
--- /dev/null
+++ b/src/packages/button/demos/h5/demo5.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Button } from '@nutui/nutui-react'
+
+const Demo5 = () => {
+ const marginStyle = { margin: 8 }
+ return (
+ <>
+
+
+
+ )
+}
+export default Demo5
diff --git a/src/packages/button/demos/h5/demo6.tsx b/src/packages/button/demos/h5/demo6.tsx
new file mode 100644
index 0000000000..e572980441
--- /dev/null
+++ b/src/packages/button/demos/h5/demo6.tsx
@@ -0,0 +1,28 @@
+import React, { useState } from 'react'
+import { Button } from '@nutui/nutui-react'
+
+const Demo6 = () => {
+ const [loading, setLoading] = useState(false)
+ const marginStyle = { margin: 8 }
+ return (
+ <>
+
+
+
+ )
+}
+export default Demo6
diff --git a/src/packages/button/demos/h5/demo7.tsx b/src/packages/button/demos/h5/demo7.tsx
new file mode 100644
index 0000000000..c19dd69006
--- /dev/null
+++ b/src/packages/button/demos/h5/demo7.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { Button } from '@nutui/nutui-react'
+
+const App = () => {
+ const marginStyle = { margin: 8 }
+ return (
+ <>
+
+
+
+
+
+
+
+ )
+}
+export default App
diff --git a/src/packages/button/demos/h5/demo8.tsx b/src/packages/button/demos/h5/demo8.tsx
new file mode 100644
index 0000000000..6c184ffffd
--- /dev/null
+++ b/src/packages/button/demos/h5/demo8.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Button } from '@nutui/nutui-react'
+
+const Demo8 = () => {
+ return (
+ <>
+
+
+ )
+}
+export default Demo8
diff --git a/src/packages/button/demos/h5/demo9.tsx b/src/packages/button/demos/h5/demo9.tsx
new file mode 100644
index 0000000000..7e814f0d2b
--- /dev/null
+++ b/src/packages/button/demos/h5/demo9.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import { Button } from '@nutui/nutui-react'
+
+const App = () => {
+ return (
+ <>
+
+
+
+
+
+ )
+}
+export default App
diff --git a/src/packages/button/demos/taro/demo1.tsx b/src/packages/button/demos/taro/demo1.tsx
new file mode 100644
index 0000000000..8eae620f38
--- /dev/null
+++ b/src/packages/button/demos/taro/demo1.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Button } from '@nutui/nutui-react-taro'
+
+const Demo1 = () => {
+ const marginStyle = { margin: 8 }
+ return (
+ <>
+
+
+
+ )
+}
+export default Demo1
diff --git a/src/packages/button/demos/taro/demo10.tsx b/src/packages/button/demos/taro/demo10.tsx
new file mode 100644
index 0000000000..0766e443fa
--- /dev/null
+++ b/src/packages/button/demos/taro/demo10.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import { Button } from '@nutui/nutui-react-taro'
+
+const App = () => {
+ const marginStyle = { margin: 8 }
+ return (
+ <>
+
+
+
+
+
+ )
+}
+export default App
diff --git a/src/packages/button/demos/taro/demo2.tsx b/src/packages/button/demos/taro/demo2.tsx
new file mode 100644
index 0000000000..484168601c
--- /dev/null
+++ b/src/packages/button/demos/taro/demo2.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { Button } from '@nutui/nutui-react-taro'
+
+const Demo2 = () => {
+ const marginStyle = { margin: 8 }
+ return (
+ <>
+
+
+
+
+
+
+
+ )
+}
+export default Demo2
diff --git a/src/packages/button/demos/taro/demo3.tsx b/src/packages/button/demos/taro/demo3.tsx
new file mode 100644
index 0000000000..7248cbe7d1
--- /dev/null
+++ b/src/packages/button/demos/taro/demo3.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import { Button } from '@nutui/nutui-react-taro'
+
+const Demo3 = () => {
+ const marginStyle = { margin: 8 }
+ return (
+ <>
+
+
+
+
+
+ )
+}
+export default Demo3
diff --git a/src/packages/button/demos/taro/demo4.tsx b/src/packages/button/demos/taro/demo4.tsx
new file mode 100644
index 0000000000..e06f6bfdfb
--- /dev/null
+++ b/src/packages/button/demos/taro/demo4.tsx
@@ -0,0 +1,125 @@
+import React from 'react'
+import { Button } from '@nutui/nutui-react-taro'
+import { Star, Plus } from '@nutui/icons-react-taro'
+
+const Demo4 = () => {
+ const marginStyle = { margin: 8 }
+ return (
+ <>
+ }
+ rightIcon={}
+ style={marginStyle}
+ >
+ Button
+
+ }
+ rightIcon={}
+ style={marginStyle}
+ >
+ Button
+
+ }
+ rightIcon={}
+ style={marginStyle}
+ >
+ Button
+
+ }
+ rightIcon={}
+ style={{
+ margin: 8,
+ backgroundColor: `var(--nutui-color-primary-light)`,
+ borderColor: `var(--nutui-color-primary)`,
+ color: `var(--nutui-color-primary)`,
+ }}
+ >
+ Button
+
+ }
+ rightIcon={}
+ style={{
+ margin: 8,
+ backgroundColor: `var(--nutui-gray-3)`,
+ color: `var(--nutui-gray-7)`,
+ }}
+ >
+ Button
+
+ }
+ rightIcon={}
+ style={{
+ margin: 8,
+ backgroundColor: `var(--nutui-gray-1)`,
+ color: `var(--nutui-gray-7)`,
+ }}
+ >
+ Button
+
+ }
+ rightIcon={}
+ style={{
+ margin: 8,
+ }}
+ >
+ Button
+
+ }
+ style={marginStyle}
+ />
+ }
+ style={marginStyle}
+ />
+ }
+ style={marginStyle}
+ />
+ }
+ rightIcon={}
+ style={marginStyle}
+ >
+ Button
+
+ }
+ rightIcon={}
+ style={marginStyle}
+ >
+ Button
+
+
+ )
+}
+export default Demo4
diff --git a/src/packages/button/demos/taro/demo5.tsx b/src/packages/button/demos/taro/demo5.tsx
new file mode 100644
index 0000000000..646d6346d8
--- /dev/null
+++ b/src/packages/button/demos/taro/demo5.tsx
@@ -0,0 +1,131 @@
+import React from 'react'
+import { Button } from '@nutui/nutui-react-taro'
+import { Star, Plus } from '@nutui/icons-react-taro'
+
+const Demo5 = () => {
+ const marginStyle = { margin: 8 }
+ return (
+ <>
+ }
+ rightIcon={}
+ style={marginStyle}
+ >
+ Disabled
+
+ }
+ rightIcon={}
+ style={marginStyle}
+ >
+ Disabled
+
+ }
+ rightIcon={}
+ style={marginStyle}
+ >
+ Disabled
+
+ }
+ rightIcon={}
+ style={marginStyle}
+ >
+ Disabled
+
+ }
+ rightIcon={}
+ style={{
+ margin: 8,
+ backgroundColor: `var(--nutui-gray-3)`,
+ color: `var(--nutui-gray-5)`,
+ }}
+ >
+ Disabled
+
+ }
+ rightIcon={}
+ style={{
+ margin: 8,
+ backgroundColor: `var(--nutui-gray-1)`,
+ color: `var(--nutui-gray-5)`,
+ }}
+ >
+ Disabled
+
+ }
+ rightIcon={}
+ style={{
+ margin: 8,
+ }}
+ >
+ Disabled
+
+ }
+ style={marginStyle}
+ />
+ }
+ style={marginStyle}
+ />
+ }
+ style={marginStyle}
+ />
+ }
+ rightIcon={}
+ style={marginStyle}
+ >
+ Disabled
+
+ }
+ rightIcon={}
+ style={marginStyle}
+ >
+ Disabled
+
+
+ )
+}
+export default Demo5
diff --git a/src/packages/button/demos/taro/demo6.tsx b/src/packages/button/demos/taro/demo6.tsx
new file mode 100644
index 0000000000..eab385345b
--- /dev/null
+++ b/src/packages/button/demos/taro/demo6.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Button } from '@nutui/nutui-react-taro'
+
+const Demo6 = () => {
+ const marginStyle = { margin: 8 }
+ return (
+ <>
+
+
+
+ )
+}
+export default Demo6
diff --git a/src/packages/button/demos/taro/demo7.tsx b/src/packages/button/demos/taro/demo7.tsx
new file mode 100644
index 0000000000..31177c61ae
--- /dev/null
+++ b/src/packages/button/demos/taro/demo7.tsx
@@ -0,0 +1,28 @@
+import React, { useState } from 'react'
+import { Button } from '@nutui/nutui-react-taro'
+
+const Demo7 = () => {
+ const [loading, setLoading] = useState(false)
+ const marginStyle = { margin: 8 }
+ return (
+ <>
+
+
+
+ )
+}
+export default Demo7
diff --git a/src/packages/button/demos/taro/demo8.tsx b/src/packages/button/demos/taro/demo8.tsx
new file mode 100644
index 0000000000..267f8469e7
--- /dev/null
+++ b/src/packages/button/demos/taro/demo8.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { Button } from '@nutui/nutui-react-taro'
+
+const Demo8 = () => {
+ const marginStyle = { margin: 8 }
+ return (
+ <>
+
+
+
+
+
+
+
+ )
+}
+export default Demo8
diff --git a/src/packages/button/demos/taro/demo9.tsx b/src/packages/button/demos/taro/demo9.tsx
new file mode 100644
index 0000000000..1c37f5a34d
--- /dev/null
+++ b/src/packages/button/demos/taro/demo9.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Button } from '@nutui/nutui-react-taro'
+
+const App = () => {
+ return (
+ <>
+
+
+ )
+}
+export default App
diff --git a/src/packages/button/doc.en-US.md b/src/packages/button/doc.en-US.md
index 3ac8b15c0e..f157f8c5fb 100644
--- a/src/packages/button/doc.en-US.md
+++ b/src/packages/button/doc.en-US.md
@@ -12,244 +12,81 @@ import { Button } from '@nutui/nutui-react';
## Demo
-### The button type
+### Button type
-The button supports six types: 'default', 'primary', 'info', 'warning', 'danger', 'success', which defaults to ' default'.
+The button supports six types: 'default', 'primary', 'info', 'warning', 'danger', 'success', which defaults to 'default'.
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react';
-
-const App = () => {
- return (
- <>
-
-
-
-
-
-
-
- );
-};
-export default App;
-```
+
:::
-### Fill button
+### Fill Button
-:::demo
+The button supports four types: 'solid', 'outline', 'dashed', 'none', which defaults to 'solid'.
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react';
+:::demo
-const App = () => {
- return (
- <>
-
-
-
-
- );
-};
-export default App;
-```
+
:::
-### Disabled state
+### Icon button
-Disable the button through the 'disabled' attribute, which is not clickable.
+Set the button icon through the 'icon' property, and provide the 'rightIcon' property to display the icon on the right side.
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react';
-
-const App = () => {
- return (
- <>
-
-
-
- );
-};
-export default App;
-```
+
:::
-### Button shape
+### Disabled state
-Set the button shape through the 'shape' property, support circular, square buttons, and default to circle.
+Disable the button through the 'disabled' attribute, which is not clickable.
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react';
-
-const App = () => {
- return (
- <>
-
-
- );
-};
-export default App;
-```
+
:::
-### Load state
+### Button shape
-:::demo
+Set the button shape through the 'shape' property, support circular, square buttons, and default to circle.
-```tsx
-import React, { useState } from "react";
-import { Button } from '@nutui/nutui-react';
+:::demo
-const App = () => {
- const [loading, setLoading] = useState(false)
- return (
- <>
-
-
-
- );
-};
-export default App;
-```
+
:::
-### Icon button
+### Load state
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react';
-import { Star, Plus } from '@nutui/icons-react'
-
-const App = () => {
- return (
- <>
- }
- rightIcon={}
- style={{ margin: 8 }}
- >
- 操作按钮
-
- }
- rightIcon={}
- style={{ margin: 8 }}
- >
- 操作按钮
-
- }
- rightIcon={}
- style={{
- margin: 8,
- backgroundColor: `var(--nutui-color-primary-light)`,
- borderColor: `var(--nutui-color-primary)`,
- color: `var(--nutui-color-primary)`,
- }}
- >
- 操作按钮
-
- }
- style={{ margin: 8 }}
- />
- }
- rightIcon={}
- style={{ margin: 8 }}
- >
- 操作按钮
-
-
- );
-};
-export default App;
-```
+
:::
### Button size
-Support 'large', 'normal', 'small' three sizes, the default is 'normal'.
+Support 'xlarge', 'large', 'normal', 'small', 'mini' sizes, the default is 'normal'.
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react';
-
-const App = () => {
- return (
- <>
-
-
-
-
-
- );
-};
-export default App;
-```
+
:::
-### Block
+### Block-level elements
Buttons are inline block-level elements by default, and the 'block' attribute allows you to set the element type of the button to a block-level element, which is commonly used to implement banner buttons.
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react';
-
-const App = () => {
- return (
- <>
-
-
- );
-};
-export default App;
-```
+
:::
@@ -259,24 +96,7 @@ The color property allows you to customize the color of the button.
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react';
-
-const App = () => {
- return (
- <>
-
-
-
-
-
- );
-};
-export default App;
-```
+
:::
@@ -286,15 +106,17 @@ export default App;
| Property | Description | Type | Default |
| --- | --- | --- | --- |
-| type | button style | `default` \| `primary` \| `warning` \| `danger` \| `success` | `default` |
-| size | button size | `normal` \| `large` \| `small` | `normal` |
+| type | button style | `default` \| `primary` \| `warning` \| `danger` \| `success` \| `info` | `default` |
+| size | button size | `normal` \| `xlarge` \| `large` \| `small` | `normal` |
| shape | button shape | `square` \| `round` | `round` |
-| color | button color | `string` | `-` |
-| fill | fill pattern | `solid` \| `ouline` \| `dashed` \| `none` | `solid` |
+| color | Button color, supports linear-gradient gradient color. In outline and dashed modes, color is set. In other cases, background is set. It is recommended to use color configuration implemented by CSS variables. | `string` | `-` |
+| fill | fill pattern | `solid` \| `outline` \| `dashed` \| `none` | `solid` |
| disabled | disable the button | `boolean` | `false` |
| block | block element | `boolean` | `false` |
| icon | icon | `ReactNode` | `-` |
+| rightIcon | icon on the right | `ReactNode` | `-` |
| loading | loading status | `boolean` | `false` |
+| nativeType | button nativeType | `submit` \| `reset` \| `button` | `button` |
| onClick | Triggered when the button is clicked | `(e: MouseEvent) => void` | `-` |
## Theming
@@ -313,15 +135,19 @@ The component provides the following CSS variables, which can be used to customi
| \--nutui-button-default-background-color | The background color of the button whose type is default | `$white` |
| \--nutui-button-default-border-color | The border color of the button whose type is default | `$color-text` |
| \--nutui-button-default-disabled | The color of the button whose type is default and whose status is disable | `$color-text-disabled` |
+| \--nutui-button-default-disabled-color | The text color of the button whose type is default and whose status is disable | `$color-text-help` |
| \--nutui-button-default-padding | padding of buttons with type default | `0 16px` |
| \--nutui-button-default-font-size | The font size of the button whose type is default | `$font-size-base` |
| \--nutui-button-default-font-weight |The font weight of the button whose type is default | `$font-weight` |
| \--nutui-button-large-height | The height of the button whose size is large | `40px` |
| \--nutui-button-large-font-size | The font size of buttons whose size is large | `$button-default-font-size` |
+| \--nutui-button-small-border-radius | The border radius of buttons whose size is large | `24px` |
| \--nutui-button-small-padding | Padding for small buttons | `0 12px` |
| \--nutui-button-small-height | The height of the button whose size is small | `28px` |
| \--nutui-button-small-font-size | The font size of the button whose size is small | `$font-size-small` |
+| \--nutui-button-small-border-radius | The border radius of buttons whose size is small | `24px` |
| \--nutui-button-mini-padding | Padding for buttons with size mini | `0 12px` |
| \--nutui-button-mini-height | The height of the button whose size is mini | `24px` |
| \--nutui-button-mini-font-size | The font size of the button whose size is mini | `$font-size-small` |
+| \--nutui-button-mini-border-radius | The border radius of buttons whose size is mini | `24px` |
| \--nutui-button-text-icon-margin | margin of text with icon button | `4px` |
diff --git a/src/packages/button/doc.md b/src/packages/button/doc.md
index 1869d086fb..3c124eaca2 100644
--- a/src/packages/button/doc.md
+++ b/src/packages/button/doc.md
@@ -18,148 +18,27 @@ import { Button } from '@nutui/nutui-react';
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react';
-
-const App = () => {
- return (
- <>
-
-
-
-
-
-
-
- );
-};
-export default App;
-```
+
:::
### 填充模式
-:::demo
+按钮支持 `solid`、 `outline`、 `dashed`、`none`四种类型，默认为 `solid`。
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react';
+:::demo
-const App = () => {
- return (
- <>
-
-
-
-
- );
-};
-export default App;
-```
+
:::
### 图标按钮
+通过 `icon` 属性来设置按钮图标，并提供`rightIcon`属性使图标在右侧显示。
+
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react';
-import { Star, Plus } from '@nutui/icons-react'
-
-const App = () => {
- return (
- <>
- }
- rightIcon={}
- style={{ margin: 8 }}
- >
- 操作按钮
-
- }
- rightIcon={}
- style={{ margin: 8 }}
- >
- 操作按钮
-
- }
- rightIcon={}
- style={{
- margin: 8,
- backgroundColor: `var(--nutui-color-primary-light)`,
- borderColor: `var(--nutui-color-primary)`,
- color: `var(--nutui-color-primary)`,
- }}
- >
- 操作按钮
-
- }
- rightIcon={}
- style={{
- margin: 8,
- backgroundColor: `var(--nutui-gray-3)`,
- color: `var(--nutui-gray-7)`,
- }}
- >
- 操作按钮
-
- }
- rightIcon={}
- style={{
- margin: 8,
- backgroundColor: `var(--nutui-gray-1)`,
- color: `var(--nutui-gray-7)`,
- }}
- >
- 操作按钮
-
- }
- rightIcon={}
- style={{
- margin: 8,
- }}
- >
- 操作按钮
-
- }
- style={{ margin: 8 }}
- />
- }
- rightIcon={}
- style={{ margin: 8 }}
- >
- 操作按钮
-
-
- );
-};
-export default App;
-```
+
:::
@@ -169,108 +48,7 @@ export default App;
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react';
-import { Star, Plus } from '@nutui/icons-react'
-
-const App = () => {
- return (
- <>
- }
- rightIcon={}
- style={{ margin: 8 }}
- >
- 操作按钮
-
- }
- rightIcon={}
- style={{ margin: 8 }}
- >
- 操作按钮
-
- }
- rightIcon={}
- style={{ margin: 8 }}
- >
- 操作按钮
-
- }
- rightIcon={}
- style={{
- margin: 8,
- backgroundColor: `var(--nutui-gray-3)`,
- color: `var(--nutui-gray-5)`,
- }}
- >
- 操作按钮
-
- }
- rightIcon={}
- style={{
- margin: 8,
- backgroundColor: `var(--nutui-gray-1)`,
- color: `var(--nutui-gray-5)`,
- }}
- >
- 操作按钮
-
- }
- rightIcon={}
- style={{
- margin: 8,
- }}
- >
- 操作按钮
-
- }
- style={{ margin: 8 }}
- />
- }
- style={{ margin: 8 }}
- />
- }
- rightIcon={}
- style={{ margin: 8 }}
- >
- 操作按钮
-
-
- );
-};
-export default App;
-```
+
:::
@@ -280,19 +58,7 @@ export default App;
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react';
-
-const App = () => {
- return (
- <>
-
-
- );
-};
-export default App;
-```
+
:::
@@ -300,59 +66,16 @@ export default App;
:::demo
-```tsx
-import React, { useState } from "react";
-import { Button } from '@nutui/nutui-react';
-
-const App = () => {
- const [loading, setLoading] = useState(false)
- return (
- <>
-
-
-
- );
-};
-export default App;
-```
-
+
:::
-
### 按钮尺寸
-支持 `large`、`normal`、`small` 三种尺寸，默认为 `normal`。
+支持 `xlarge`、 `large`、`normal`、`small`、`mini` 尺寸，默认为 `normal`。
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react';
-
-const App = () => {
- return (
- <>
-
-
-
-
-
- );
-};
-export default App;
-```
+
:::
@@ -362,19 +85,7 @@ export default App;
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react';
-
-const App = () => {
- return (
- <>
-
-
- );
-};
-export default App;
-```
+
:::
@@ -384,24 +95,7 @@ export default App;
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react';
-
-const App = () => {
- return (
- <>
-
-
-
-
-
- );
-};
-export default App;
-```
+
:::
@@ -411,15 +105,17 @@ export default App;
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
-| type | 按钮的样式 | `default` \| `primary` \| `warning` \| `danger` \| `success` | `default` |
-| size | 按钮的尺寸 | `normal` \| `large` \| `small` | `normal` |
+| type | 按钮的样式 | `default` \| `primary` \| `warning` \| `danger` \| `success` \| `info` | `default` |
+| size | 按钮的尺寸 | `normal` \| `xlarge` \| `large` \| `small` \| `mini` | `normal` |
| shape | 按钮的形状 | `square` \| `round` | `round` |
-| color | 按钮颜色，支持传入 linear-gradient 渐变色 | `string` | `-` |
-| fill | 填充模式 | `solid` \| `ouline` \| `dashed` \| `none` | `solid` |
+| color | 按钮颜色，支持传入 linear-gradient 渐变色, outline 和 dashed 模式下设置的是 color，其他情况设置的是background，建议使用CSS变量实现的颜色配置 | `string` | `-` |
+| fill | 填充模式 | `solid` \| `outline` \| `dashed` \| `none` | `solid` |
| disabled | 是否禁用按钮 | `boolean` | `false` |
| block | 是否为块级元素 | `boolean` | `false` |
| icon | 按钮图标 | `ReactNode` | `-` |
+| rightIcon | 右侧按钮图标 | `ReactNode` | `-` |
| loading | 按钮loading状态 | `boolean` | `false` |
+| nativeType | 按钮原始类型 | `submit` \| `reset` \| `button` | `button` |
| onClick | 点击按钮时触发 | `(e: MouseEvent) => void` | `-` |
## 主题定制
@@ -438,15 +134,19 @@ export default App;
| \--nutui-button-default-background-color | type 为 default 的按钮的背景色 | `$white` |
| \--nutui-button-default-border-color | type 为 default 的按钮的边框色 | `$color-text` |
| \--nutui-button-default-disabled | type 为 default 的按钮的禁用色 | `$color-text-disabled` |
+| \--nutui-button-default-disabled-color | type 为 default 的按钮的禁用文本色 | `$color-text-help` |
| \--nutui-button-default-padding | type 为 default 的按钮的内边距 | `0 16px` |
| \--nutui-button-default-font-size | type 为 default 的按钮的字号 | `$font-size-base` |
| \--nutui-button-default-font-weight | type 为 default 的按钮的字重 | `$font-weight` |
| \--nutui-button-large-height | size 为 large 的按钮的高度 | `40px` |
| \--nutui-button-large-font-size | size 为 large 的按钮的字号 | `$font-size-base` |
+| \--nutui-button-large-border-radius | size 为 large 的按钮的圆角 | `24px` |
| \--nutui-button-small-padding | size 为 small 的按钮的内边距 | `0 12px` |
| \--nutui-button-small-height | size 为 small 的按钮的高度 | `28px` |
| \--nutui-button-small-font-size | size 为 small 的按钮的字号 | `$font-size-small` |
+| \--nutui-button-small-border-radius | size 为 small 的按钮的圆角 | `24px` |
| \--nutui-button-mini-padding | size 为 mini 的按钮的内边距 | `0 12px` |
| \--nutui-button-mini-height | size 为 mini 的按钮的高度 | `24px` |
| \--nutui-button-mini-font-size | size 为 mini 的按钮的字号 | `$font-size-small` |
+| \--nutui-button-mini-border-radius | size 为 mini 的按钮的圆角 | `24px` |
| \--nutui-button-text-icon-margin | 带 icon按钮的文本的边距 | `4px` |
diff --git a/src/packages/button/doc.taro.md b/src/packages/button/doc.taro.md
index 50e6c95249..63f6607857 100644
--- a/src/packages/button/doc.taro.md
+++ b/src/packages/button/doc.taro.md
@@ -16,20 +16,7 @@ import { Button } from '@nutui/nutui-react-taro';
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react-taro';
-
-const App = () => {
- return (
- <>
-
-
-
- );
-};
-export default App;
-```
+
:::
@@ -39,148 +26,27 @@ export default App;
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react-taro';
-
-const App = () => {
- return (
- <>
-
-
-
-
-
-
-
- );
-};
-export default App;
-```
+
:::
### 填充模式
-:::demo
+按钮支持 `solid`、 `outline`、 `dashed`、`none`四种类型，默认为 `solid`。
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react-taro';
+:::demo
-const App = () => {
- return (
- <>
-
-
-
-
- );
-};
-export default App;
-```
+
:::
### 图标按钮
+通过 `icon` 属性来设置按钮图标，并提供`rightIcon`属性使图标在右侧显示。
+
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react-taro';
-import { Star, Plus } from '@nutui/icons-react-taro'
-
-const App = () => {
- return (
- <>
- }
- rightIcon={}
- style={{ margin: 8 }}
- >
- 操作按钮
-
- }
- rightIcon={}
- style={{ margin: 8 }}
- >
- 操作按钮
-
- }
- rightIcon={}
- style={{
- margin: 8,
- backgroundColor: `var(--nutui-color-primary-light)`,
- borderColor: `var(--nutui-color-primary)`,
- color: `var(--nutui-color-primary)`,
- }}
- >
- 操作按钮
-
- }
- rightIcon={}
- style={{
- margin: 8,
- backgroundColor: `var(--nutui-gray-3)`,
- color: `var(--nutui-gray-7)`,
- }}
- >
- 操作按钮
-
- }
- rightIcon={}
- style={{
- margin: 8,
- backgroundColor: `var(--nutui-gray-1)`,
- color: `var(--nutui-gray-7)`,
- }}
- >
- 操作按钮
-
- }
- rightIcon={}
- style={{
- margin: 8,
- }}
- >
- 操作按钮
-
- }
- style={{ margin: 8 }}
- />
- }
- rightIcon={}
- style={{ margin: 8 }}
- >
- 操作按钮
-
-
- );
-};
-export default App;
-```
+
:::
@@ -190,108 +56,7 @@ export default App;
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react-taro';
-import { Star, Plus } from '@nutui/icons-react-taro';
-
-const App = () => {
- return (
- <>
- }
- rightIcon={}
- style={{ margin: 8 }}
- >
- 操作按钮
-
- }
- rightIcon={}
- style={{ margin: 8 }}
- >
- 操作按钮
-
- }
- rightIcon={}
- style={{ margin: 8 }}
- >
- 操作按钮
-
- }
- rightIcon={}
- style={{
- margin: 8,
- backgroundColor: `var(--nutui-gray-3)`,
- color: `var(--nutui-gray-5)`,
- }}
- >
- 操作按钮
-
- }
- rightIcon={}
- style={{
- margin: 8,
- backgroundColor: `var(--nutui-gray-1)`,
- color: `var(--nutui-gray-5)`,
- }}
- >
- 操作按钮
-
- }
- rightIcon={}
- style={{
- margin: 8,
- }}
- >
- 操作按钮
-
- }
- style={{ margin: 8 }}
- />
- }
- style={{ margin: 8 }}
- />
- }
- rightIcon={}
- style={{ margin: 8 }}
- >
- 操作按钮
-
-
- );
-};
-export default App;
-```
+
:::
@@ -301,19 +66,7 @@ export default App;
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react-taro';
-
-const App = () => {
- return (
- <>
-
-
- );
-};
-export default App;
-```
+
:::
@@ -321,59 +74,17 @@ export default App;
:::demo
-```tsx
-import React ,{useState} from "react";
-import { Button } from '@nutui/nutui-react-taro';
-
-const App = () => {
- const [loading, setLoading] = useState(false)
- return (
- <>
-
-
-
- );
-};
-export default App;
-```
+
:::
-
### 按钮尺寸
-支持 `large`、`normal`、`small` 三种尺寸，默认为 `normal`。
+支持 `xlarge` 、 `large`、`normal`、`small`、`mini` 尺寸，默认为 `normal`。
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react-taro';
-
-const App = () => {
- return (
- <>
-
-
-
-
-
- );
-};
-export default App;
-```
+
:::
@@ -383,19 +94,7 @@ export default App;
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react-taro';
-
-const App = () => {
- return (
- <>
-
-
- );
-};
-export default App;
-```
+
:::
@@ -405,24 +104,7 @@ export default App;
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react-taro';
-
-const App = () => {
- return (
- <>
-
-
-
-
-
- );
-};
-export default App;
-```
+
:::
@@ -432,15 +114,17 @@ export default App;
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
-| type | 按钮的样式 | `default` \| `primary` \| `warning` \| `danger` \| `success` | `default` |
-| size | 按钮的尺寸 | `normal` \| `large` \| `small` | `normal` |
+| type | 按钮的样式 | `default` \| `primary` \| `warning` \| `danger` \| `success` \| `info` | `default` |
+| size | 按钮的尺寸 | `normal` \|`xlarge` \| `large` \| `small` \| `mini` | `normal` |
| shape | 按钮的形状 | `square` \| `round` | `round` |
-| color | 按钮颜色，支持传入 linear-gradient 渐变色 | `string` | `-` |
-| fill | 填充模式 | `solid` \| `ouline` \| `dashed` \| `none` | `solid` |
+| color | 按钮颜色，支持传入 linear-gradient 渐变色, outline 和 dashed 模式下设置的是 color，其他情况设置的是background，建议使用CSS变量实现的颜色配置 | `string` | `-` |
+| fill | 填充模式 | `solid` \| `outline` \| `dashed` \| `none` | `solid` |
| disabled | 是否禁用按钮 | `boolean` | `false` |
| block | 是否为块级元素 | `boolean` | `false` |
| icon | 按钮图标 | `ReactNode` | `-` |
+| rightIcon | 右侧按钮图标 | `ReactNode` | `-` |
| loading | 按钮loading状态 | `boolean` | `false` |
+| nativeType | 按钮原始类型 | `submit` \| `reset` \| `button` | `button` |
| onClick | 点击按钮时触发 | `(e: MouseEvent) => void` | `-` |
### 支持小程序API能力
@@ -463,16 +147,20 @@ export default App;
| \--nutui-button-default-background-color | type 为 default 的按钮的背景色 | `$white` |
| \--nutui-button-default-border-color | type 为 default 的按钮的边框色 | `$color-text` |
| \--nutui-button-default-disabled | type 为 default 的按钮的禁用色 | `$color-text-disabled` |
+| \--nutui-button-default-disabled-color | type 为 default 的按钮的禁用文本色 | `$color-text-help` |
| \--nutui-button-default-padding | type 为 default 的按钮的内边距 | `0 16px` |
| \--nutui-button-default-font-size | type 为 default 的按钮的字号 | `$font-size-base` |
| \--nutui-button-default-font-weight | type 为 default 的按钮的字重 | `$font-weight` |
| \--nutui-button-large-height | size 为 large 的按钮的高度 | `40px` |
| \--nutui-button-large-font-size | size 为 large 的按钮的字号 | `$font-size-base` |
+| \--nutui-button-large-border-radius | size 为 large 的按钮的圆角 | `24px` |
| \--nutui-button-small-padding | size 为 small 的按钮的内边距 | `0 12px` |
| \--nutui-button-small-height | size 为 small 的按钮的高度 | `28px` |
| \--nutui-button-small-font-size | size 为 small 的按钮的字号 | `$font-size-small` |
+| \--nutui-button-small-border-radius | size 为 small 的按钮的圆角 | `24px` |
| \--nutui-button-mini-padding | size 为 mini 的按钮的内边距 | `0 12px` |
| \--nutui-button-mini-height | size 为 mini 的按钮的高度 | `24px` |
| \--nutui-button-mini-font-size | size 为 mini 的按钮的字号 | `$font-size-small` |
+| \--nutui-button-mini-border-radius | size 为 mini 的按钮的圆角 | `24px` |
| \--nutui-button-text-icon-margin | 带 icon按钮的文本的边距 | `4px` |
diff --git a/src/packages/button/doc.zh-TW.md b/src/packages/button/doc.zh-TW.md
index e8d701a59f..240fafc11b 100644
--- a/src/packages/button/doc.zh-TW.md
+++ b/src/packages/button/doc.zh-TW.md
@@ -18,148 +18,27 @@ import { Button } from '@nutui/nutui-react';
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react';
-
-const App = () => {
- return (
- <>
-
-
-
-
-
-
-
- );
-};
-export default App;
-```
+
:::
### 填充模式
-:::demo
+按鈕支援 `solid`、 `outline`、 `dashed`、`none`四種類型，預設為 `solid`。
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react';
+:::demo
-const App = () => {
- return (
- <>
-
-
-
-
- );
-};
-export default App;
-```
+
:::
### 圖標按鈕
+透過 `icon` 屬性來設定按鈕圖標，並提供`rightIcon`屬性使圖標在右側顯示。
+
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react';
-import { Star, Plus } from '@nutui/icons-react'
-
-const App = () => {
- return (
- <>
- }
- rightIcon={}
- style={{ margin: 8 }}
- >
- 操作按鈕
-
- }
- rightIcon={}
- style={{ margin: 8 }}
- >
- 操作按鈕
-
- }
- rightIcon={}
- style={{
- margin: 8,
- backgroundColor: `var(--nutui-color-primary-light)`,
- borderColor: `var(--nutui-color-primary)`,
- color: `var(--nutui-color-primary)`,
- }}
- >
- 操作按鈕
-
- }
- rightIcon={}
- style={{
- margin: 8,
- backgroundColor: `var(--nutui-gray-3)`,
- color: `var(--nutui-gray-7)`,
- }}
- >
- 操作按鈕
-
- }
- rightIcon={}
- style={{
- margin: 8,
- backgroundColor: `var(--nutui-gray-1)`,
- color: `var(--nutui-gray-7)`,
- }}
- >
- 操作按鈕
-
- }
- rightIcon={}
- style={{
- margin: 8,
- }}
- >
- 操作按鈕
-
- }
- style={{ margin: 8 }}
- />
- }
- rightIcon={}
- style={{ margin: 8 }}
- >
- 操作按鈕
-
-
- );
-};
-export default App;
-```
+
:::
@@ -169,108 +48,7 @@ export default App;
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react';
-import { Star, Plus } from '@nutui/icons-react'
-
-const App = () => {
- return (
- <>
- }
- rightIcon={}
- style={{ margin: 8 }}
- >
- 操作按鈕
-
- }
- rightIcon={}
- style={{ margin: 8 }}
- >
- 操作按鈕
-
- }
- rightIcon={}
- style={{ margin: 8 }}
- >
- 操作按鈕
-
- }
- rightIcon={}
- style={{
- margin: 8,
- backgroundColor: `var(--nutui-gray-3)`,
- color: `var(--nutui-gray-5)`,
- }}
- >
- 操作按鈕
-
- }
- rightIcon={}
- style={{
- margin: 8,
- backgroundColor: `var(--nutui-gray-1)`,
- color: `var(--nutui-gray-5)`,
- }}
- >
- 操作按鈕
-
- }
- rightIcon={}
- style={{
- margin: 8,
- }}
- >
- 操作按鈕
-
- }
- style={{ margin: 8 }}
- />
- }
- style={{ margin: 8 }}
- />
- }
- rightIcon={}
- style={{ margin: 8 }}
- >
- 操作按鈕
-
-
- );
-};
-export default App;
-```
+
:::
@@ -280,19 +58,7 @@ export default App;
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react';
-
-const App = () => {
- return (
- <>
-
-
- );
-};
-export default App;
-```
+
:::
@@ -300,59 +66,17 @@ export default App;
:::demo
-```tsx
-import React, { useState } from "react";
-import { Button } from '@nutui/nutui-react';
-
-const App = () => {
- const [loading, setLoading] = useState(false)
- return (
- <>
-
-
-
- );
-};
-export default App;
-```
+
:::
-
### 按鈕尺寸
-支持 `large`、`normal`、`small` 三種尺寸，默認為 `normal`。
+支持 'xlarge'、 `large`、`normal`、`small`、`mini` 尺寸，默認為 `normal`。
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react';
-
-const App = () => {
- return (
- <>
-
-
-
-
-
- );
-};
-export default App;
-```
+
:::
@@ -362,19 +86,7 @@ export default App;
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react';
-
-const App = () => {
- return (
- <>
-
-
- );
-};
-export default App;
-```
+
:::
@@ -384,24 +96,7 @@ export default App;
:::demo
-```tsx
-import React from "react";
-import { Button } from '@nutui/nutui-react';
-
-const App = () => {
- return (
- <>
-
-
-
-
-
- );
-};
-export default App;
-```
+
:::
@@ -411,15 +106,17 @@ export default App;
| 屬性 | 說明 | 類型 | 默認值 |
| --- | --- | --- | --- |
-| type | 按鈕的樣式 | `default` \| `primary` \| `warning` \| `danger` \| `success` | `default` |
-| size | 按鈕的尺寸 | `normal` \| `large` \| `small` | `normal` |
+| type | 按鈕的樣式 | `default` \| `primary` \| `warning` \| `danger` \| `success` \| `info` | `default` |
+| size | 按鈕的尺寸 | `normal` \| `xlarge` \| `large` \| `small` \| `mini` | `normal` |
| shape | 按鈕的形狀 | `square` \| `round` | `round` |
-| color | 按鈕顏色，支持傳入 linear-gradient 漸變色 | `string` | `-` |
-| fill | 填充模式 | `solid` \| `ouline` \| `dashed` \| `none` | `solid` |
+| color | 按鈕顏色，支援傳入 linear-gradient 漸層色, outline 和 dashed 模式下設定的是 color，其他情況設定的是background，建議使用CSS變數實現的顏色配置 | `string` | `-` |
+| fill | 填充模式 | `solid` \| `outline` \| `dashed` \| `none` | `solid` |
| disabled | 是否禁用按鈕 | `boolean` | `false` |
| block | 是否為塊級元素 | `boolean` | `false` |
| icon | 按鈕圖標 | `ReactNode` | `-` |
+| rightIcon | 右侧按鈕图标 | `ReactNode` | `-` |
| loading | 按鈕loading狀態 | `boolean` | `false` |
+| nativeType | 按鈕原始类型 | `submit` \| `reset` \| `button` | `button` |
| onClick | 點擊按鈕時觸發 | `(e: MouseEvent) => void` | `-` |
## 主題定製
@@ -438,15 +135,19 @@ export default App;
| \--nutui-button-default-background-color | type 為 default 的按鈕的背景色 | `$white` |
| \--nutui-button-default-border-color | type 為 default 的按鈕的邊框色 | `$color-text` |
| \--nutui-button-default-disabled | type 為 default 的按鈕的禁用色 | `$color-text-disabled` |
+| \--nutui-button-default-disabled-color | type 為 default 的按鈕的禁用色文本色 | `$color-text-help` |
| \--nutui-button-default-padding | type 為 default 的按鈕的內邊距 | `0 16px` |
| \--nutui-button-default-font-size | type 為 default 的按鈕的字號 | `$font-size-base` |
| \--nutui-button-default-font-weight | type 為 default 的按鈕的字重 | `$font-weight` |
| \--nutui-button-large-height | size 為 large 的按鈕的高度 | `40px` |
| \--nutui-button-large-font-size | size 為 large 的按鈕的字號 | `$font-size-base` |
+| \--nutui-button-large-border-radius | size 為 large 的按鈕的圓角 | `24px` |
| \--nutui-button-small-padding | size 為 small 的按鈕的內邊距 | `0 12px` |
| \--nutui-button-small-height | size 為 small 的按鈕的高度 | `28px` |
| \--nutui-button-small-font-size | size 為 small 的按鈕的字號 | `$font-size-small` |
+| \--nutui-button-small-border-radius | size 為 small 的按鈕的圓角 | `24px` |
| \--nutui-button-mini-padding | size 為 mini 的按鈕的內邊距 | `0 12px` |
| \--nutui-button-mini-height | size 為 mini 的按鈕的高度 | `24px` |
| \--nutui-button-mini-font-size | size 為 mini 的按鈕的字號 | `$font-size-small` |
+| \--nutui-button-mini-border-radius | size 為 mini 的按鈕的圓角 | `24px` |
| \--nutui-button-text-icon-margin | 帶 icon按鈕的文本的邊距 | `4px` |
diff --git a/src/packages/calendar/__tests__/__snapshots__/calendar.spec.tsx.snap b/src/packages/calendar/__tests__/__snapshots__/calendar.spec.tsx.snap
index 2e6cf551b1..8038085148 100644
--- a/src/packages/calendar/__tests__/__snapshots__/calendar.spec.tsx.snap
+++ b/src/packages/calendar/__tests__/__snapshots__/calendar.spec.tsx.snap
@@ -1,3 +1,3 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`should render slot correctly 1`] = `""`;
diff --git a/src/packages/calendar/__tests__/calendar.spec.tsx b/src/packages/calendar/__tests__/calendar.spec.tsx
index 8e9980a710..a21f11c3c4 100644
--- a/src/packages/calendar/__tests__/calendar.spec.tsx
+++ b/src/packages/calendar/__tests__/calendar.spec.tsx
@@ -1,14 +1,10 @@
import * as React from 'react'
import { render, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom'
+import { CalendarDay } from '@/packages/calendar/types'
import { Calendar } from '../calendar'
-interface Day {
- day: string | number
- type: string
-}
-
test('show-title prop', async () => {
const { container, rerender } = render(
{
return 最近七天
}
- const renderDay = (date: Day) => {
+ const renderDay = (date: CalendarDay) => {
return custom{date.day}
}
- const renderDayBottom = (date: Day) => {
- return {date.day <= 10 ? '上旬' : '下旬'}
+ const renderDayBottom = (date: CalendarDay) => {
+ return {Number(date.day) <= 10 ? '上旬' : '下旬'}
}
const { container } = render(
@@ -122,7 +118,7 @@ test('should render slot correctly', async () => {
})
test('select event when click item', () => {
- const onDayClick = jest.fn()
+ const onDayClick = vi.fn()
const { container } = render(
{
})
test('choose event when click item', async () => {
- const onConfirm = jest.fn()
+ const onConfirm = vi.fn()
const { container } = render(
void
-}
-
export interface CalendarProps {
- type?: SelectedType
+ type?: CalendarType
autoBackfill?: boolean
popup?: boolean
visible?: boolean
@@ -27,11 +23,11 @@ export interface CalendarProps {
showSubTitle?: boolean
scrollAnimation?: boolean
firstDayOfWeek: number
- disableDate: (date: Day) => boolean
+ disableDate: (date: CalendarDay) => boolean
renderHeaderButtons?: () => string | JSX.Element
- renderDay?: (date: Day) => string | JSX.Element
- renderDayTop?: (date: Day) => string | JSX.Element
- renderDayBottom?: (date: Day) => string | JSX.Element
+ renderDay?: (date: CalendarDay) => string | JSX.Element
+ renderDayTop?: (date: CalendarDay) => string | JSX.Element
+ renderDayBottom?: (date: CalendarDay) => string | JSX.Element
onClose?: () => void
onConfirm?: (param: string) => void
onDayClick?: (data: string) => void
@@ -56,7 +52,7 @@ const defaultProps = {
showSubTitle: true,
scrollAnimation: true,
firstDayOfWeek: 0,
- disableDate: (date: Day) => false,
+ disableDate: (date: CalendarDay) => false,
renderHeaderButtons: undefined,
renderDay: undefined,
renderDayTop: undefined,
diff --git a/src/packages/calendar/calendar.tsx b/src/packages/calendar/calendar.tsx
index 34d1efcac1..f17ed9ad5c 100644
--- a/src/packages/calendar/calendar.tsx
+++ b/src/packages/calendar/calendar.tsx
@@ -3,15 +3,11 @@ import Popup from '@/packages/popup'
import CalendarItem from '@/packages/calendaritem'
import { Utils } from '@/utils/date'
import { useConfig } from '@/packages/configprovider'
-import { Day, SelectedType } from './types'
+import type { CalendarDay, CalendarType, CalendarRef } from './types'
import { ComponentDefaults } from '@/utils/typings'
-type CalendarRef = {
- scrollToDate: (date: string) => void
-}
-
export interface CalendarProps {
- type?: SelectedType
+ type?: CalendarType
autoBackfill?: boolean
popup?: boolean
visible?: boolean
@@ -27,11 +23,11 @@ export interface CalendarProps {
showSubTitle?: boolean
scrollAnimation?: boolean
firstDayOfWeek: number
- disableDate: (date: Day) => boolean
+ disableDate: (date: CalendarDay) => boolean
renderHeaderButtons?: () => string | JSX.Element
- renderDay?: (date: Day) => string | JSX.Element
- renderDayTop?: (date: Day) => string | JSX.Element
- renderDayBottom?: (date: Day) => string | JSX.Element
+ renderDay?: (date: CalendarDay) => string | JSX.Element
+ renderDayTop?: (date: CalendarDay) => string | JSX.Element
+ renderDayBottom?: (date: CalendarDay) => string | JSX.Element
onClose?: () => void
onConfirm?: (param: string) => void
onDayClick?: (data: string) => void
@@ -56,7 +52,7 @@ const defaultProps = {
showSubTitle: true,
scrollAnimation: true,
firstDayOfWeek: 0,
- disableDate: (date: Day) => false,
+ disableDate: (date: CalendarDay) => false,
renderHeaderButtons: undefined,
renderDay: undefined,
renderDayTop: undefined,
diff --git a/src/packages/calendar/demo.taro.tsx b/src/packages/calendar/demo.taro.tsx
index 4377695196..7bee1cfbf3 100644
--- a/src/packages/calendar/demo.taro.tsx
+++ b/src/packages/calendar/demo.taro.tsx
@@ -1,42 +1,23 @@
-import React, { useState, useRef } from 'react'
+import React from 'react'
import Taro from '@tarojs/taro'
import { useTranslate } from '@/sites/assets/locale/taro'
-import { Cell, Calendar, DatePicker } from '@/packages/nutui.react.taro'
import Header from '@/sites/components/header'
-import { Utils } from '@/utils/date'
import '@/packages/calendar/demo.scss'
-import { padZero } from '@/utils/pad-zero'
-interface Day {
- day: string | number
- type: string
-}
-interface T {
- ce5c5446: string
- c38a08ef: string
- b840c88f: string
- a74a1fd4: string
- '8dab2f66': string
- '8dab2f67': string
- '8dab2f68': string
- cfbdc781: string
- c3a3a1d2: string
- e51e4582: string
- '7db1a8b2': string
- '7db1a8b3': string
- '7db1a8b4': string
- '7db1a8b5': string
- a52bef0c: string
- d04fcbda: string
- '0aaad620': string
- '60a53514': string
- '781b07fd': string
- '1076d771': string
- '6ab47cd2': string
-}
+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'
+import Demo7 from './demos/taro/demo7'
+import Demo8 from './demos/taro/demo8'
+import Demo9 from './demos/taro/demo9'
+import Demo10 from './demos/taro/demo10'
+import Demo11 from './demos/taro/demo11'
const CalendarDemo = () => {
- const [translated] = useTranslate({
+ const [translated] = useTranslate({
'zh-CN': {
ce5c5446: '基础用法',
c38a08ef: '选择单个日期',
@@ -107,522 +88,40 @@ const CalendarDemo = () => {
'6ab47cd2': 'This Month',
},
})
- const d = new Date()
- const currDay = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
- const [date, setDate] = useState(currDay)
- const [date1, setDate1] = useState(['2023-01-23', '2023-11-26'])
- const [date3, setDate3] = useState('')
- const [date4, setDate4] = useState([])
- const [date40, setDate40] = useState([])
- const [date41, setDate41] = useState([])
- const [date42, setDate42] = useState([])
- const [date5, setDate5] = useState(['2023-03-23', '2023-11-26'])
- const [date6, setDate6] = useState(['2023-06-12', '2023-06-16'])
- const [date7, setDate7] = useState(['2023-07-10', '2023-07-19'])
- const [date8, setDate8] = useState(['2023-06-03', '2023-06-16'])
- const [dateWeek, setDateWeek] = useState('')
- const [isVisible, setIsVisible] = useState(false)
- const [isVisible1, setIsVisible1] = useState(false)
- const [isVisible3, setIsVisible3] = useState(false)
- const [isVisible4, setIsVisible4] = useState(false)
- const [isVisible40, setIsVisible40] = useState(false)
- const [isVisible41, setIsVisible41] = useState(false)
- const [isVisible42, setIsVisible42] = useState(false)
- const [isVisible5, setIsVisible5] = useState(false)
- const [isVisible6, setIsVisible6] = useState(false)
- const [isVisible7, setIsVisible7] = useState(false)
-
- const calendarRef = useRef(null)
-
- const openSwitch = () => {
- setIsVisible(true)
- }
-
- const openSwitch1 = () => {
- setIsVisible1(true)
- }
-
- const openSwitch3 = () => {
- setIsVisible3(true)
- }
- const openSwitch4 = () => {
- setIsVisible4(true)
- }
- const openSwitch40 = () => {
- setIsVisible40(true)
- }
- const openSwitch41 = () => {
- setIsVisible41(true)
- }
- const openSwitch42 = () => {
- setIsVisible42(true)
- }
- const openSwitch5 = () => {
- setIsVisible5(true)
- }
- const openSwitch6 = () => {
- setIsVisible6(true)
- }
- const openSwitch7 = () => {
- setIsVisible7(true)
- }
- const closeSwitch = () => {
- setIsVisible(false)
- }
-
- const closeSwitch1 = () => {
- setIsVisible1(false)
- }
-
- const closeSwitch3 = () => {
- setIsVisible3(false)
- }
-
- const closeSwitch4 = () => {
- setIsVisible4(false)
- }
- const closeSwitch40 = () => {
- setIsVisible40(false)
- }
- const closeSwitch41 = () => {
- setIsVisible41(false)
- }
- const closeSwitch42 = () => {
- setIsVisible42(false)
- }
- const closeSwitch5 = () => {
- setIsVisible5(false)
- }
-
- const closeSwitch6 = () => {
- setIsVisible6(false)
- }
-
- const closeSwitch7 = () => {
- setIsVisible7(false)
- }
-
- const setChooseValue = (param: string) => {
- setDate(param[3])
- setDateWeek(param[4])
- }
-
- const setChooseValue1 = (param: string) => {
- setDate1([...[param[0][3], param[1][3]]])
- }
- const setChooseValue3 = (param: string) => {
- setDate3(param[3])
- }
-
- const setChooseValue4 = (chooseData: any) => {
- const dateArr = chooseData.map((item: any) => {
- return item[3]
- })
- setDate4([...dateArr])
- }
- const setChooseValue40 = (chooseData: any) => {
- const dateArr = [...[chooseData[0][3], chooseData[1][3]]]
- setDate40([...dateArr])
- }
- const setChooseValue41 = (chooseData: any) => {
- const dateArr = [...[chooseData[0][3], chooseData[1][3]]]
- setDate41([...dateArr])
- }
-
- const setChooseValue42 = (chooseData: any) => {
- console.log(
- 'setChooseValue42',
- [...[chooseData[0][3], chooseData[1][3]]],
- chooseData
- )
- const dateArr = [...[chooseData[0][3], chooseData[1][3]]]
- setDate42([...dateArr])
- }
- const setChooseValue5 = (param: string) => {
- setDate5([...[param[0][3], param[1][3]]])
- }
-
- const setChooseValue6 = (param: string) => {
- setDate6([...[param[0][3], param[1][3]]])
- }
- const setChooseValue7 = (param: string) => {
- setDate7([...[param[0][3], param[1][3]]])
- }
+ return (
+ <>
+
+
+
{translated.ce5c5446}
- const setChooseValue8 = (param: string) => {
- setDate8([...[param[0][3], param[1][3]]])
- }
- const select = (param: string) => {
- console.log(param)
- }
+
- const yearMonthChange = (param: string) => {
- console.log(param)
- }
+
- const goDate = () => {
- if (calendarRef.current) {
- calendarRef.current.scrollToDate('2023-04-01')
- }
- }
+
- const clickBtn = () => {
- const date = [Utils.date2Str(new Date()), Utils.getDay(6)]
- setDate7(date)
- if (calendarRef.current) {
- calendarRef.current.scrollToDate(date[0])
- }
- }
+
- const clickBtn1 = () => {
- const date = new Date()
- const year = date.getFullYear()
- let month: any = date.getMonth() + 1
- month = month < 10 ? `0${month}` : `${month}`
- const yearMonth = `${year}-${month}`
- const currMonthDays = Utils.getMonthDays(`${year}`, `${month}`)
- setDate7([`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`])
- if (calendarRef.current) {
- calendarRef.current.scrollToDate(`${yearMonth}-01`)
- }
- }
- const disableDate = (date: Day) => {
- return date.day === 25 || date.day === 20 || date.day === 22
- }
+
- const renderDay = (date: Day) => {
- return <>{padZero(date.day)}
- }
- const renderDayTop = (date: Day) => {
- let currDate = ''
- if (date && date.day === 10) {
- currDate = '☺'
- }
- return
{currDate}
- }
+
- const renderDayBottom = (date: Day) => {
- let currDate = ''
- if (date && date.day === 10) {
- currDate = '纪念日'
- }
- return
{currDate}
- }
+
{translated.cfbdc781}
- const renderHeaderButtons = () => {
- return (
-
-
-
- {translated['781b07fd']}
-
-
-
-
- {translated['1076d771']}
-
-
-
-
- {translated['6ab47cd2']}
-
-
-
- )
- }
+
- const [show1, setShow1] = useState(false)
- const [dpAbled, setDatePickerAbled] = useState([false, false])
- const [desc1, setDesc1] = useState('10:00:00')
- const [desc2, setDesc2] = useState('20:00:00')
- const desc = useRef(0)
- const confirm1 = (values: (string | number)[], options: any[]) => {
- if (desc.current === 1) {
- setDesc1(
- options.map((option) => padZero(parseInt(option.text))).join(':')
- )
- } else {
- setDesc2(
- options.map((option) => padZero(parseInt(option.text))).join(':')
- )
- }
- }
- const showDatePicker = (e: any, index: number) => {
- if (dpAbled[index - 1]) {
- e.stopPropagation()
- setShow1(true)
- desc.current = index
- }
- }
- return (
- <>
-
-
-
{translated.ce5c5446}
-
|
-
-
|
-
-
|
-
-
|
-
+
-
|
-
+
{translated.d04fcbda}
-
-
- {date42 && date42.length
- ? `${date42[0]} ${desc1}`
- : translated['8dab2f67']}
-
- -
-
- {date42 && date42.length
- ? `${date42[1]} ${desc2}`
- : translated['8dab2f68']}
-
- |
- }
- />
-
{
- let d = [false, false]
- if (date.length > 1) {
- d = [true, true]
- } else if (date.length > 0) {
- d = [true, false]
- }
- setDatePickerAbled(d)
- }}
- onClose={closeSwitch42}
- onConfirm={setChooseValue42}
- >
-
-
{
- showDatePicker(e, 1)
- }}
- >
- 开始时间：{desc1}
-
- -
-
{
- showDatePicker(e, 2)
- }}
- >
- 结束时间：{desc2}
-
-
+
-
{translated.cfbdc781}
-
|
-
-
|
-
-
{translated.d04fcbda}
-
|
-
+
-
|
-
{translated.e51e4582}
-
- test
}
- endText="leave"
- autoBackfill
- onConfirm={setChooseValue8}
- onPageChange={yearMonthChange}
- />
-
-
-
- {translated['781b07fd']}
-
-
-
-
- {translated['1076d771']}
-
-
-
-
- {translated['6ab47cd2']}
-
-
-
{translated.ce5c5446}
-
|
-
+
-
|
-
+
-
|
-
+
-
|
-
+
-
|
-
+
-
-
- {date42 && date42.length
- ? `${date42[0]} ${desc1}`
- : translated['8dab2f67']}
-
- -
-
- {date42 && date42.length
- ? `${date42[1]} ${desc2}`
- : translated['8dab2f68']}
-
- |
- }
- />
- {
- let d = [false, false]
- if (date.length > 1) {
- d = [true, true]
- } else if (date.length > 0) {
- d = [true, false]
- }
- setDatePickerAbled(d)
- }}
- onClose={closeSwitch42}
- onConfirm={setChooseValue42}
- >
-
-
{
- showDatePicker(e, 1)
- }}
- >
- 开始时间：{desc1}
-
- -
-
{
- showDatePicker(e, 2)
- }}
- >
- 结束时间：{desc2}
-
-
{translated.cfbdc781}
- |
-
- |
-
+
+
+
+
+
{translated.d04fcbda}
- |
-
- |
-
+
+
+
{translated.e51e4582}
-
- test
}
- endText="leave"
- autoBackfill
- onConfirm={setChooseValue8}
- onPageChange={yearMonthChange}
- />
-
)
diff --git a/src/packages/calendar/demos/h5/demo1.tsx b/src/packages/calendar/demos/h5/demo1.tsx
new file mode 100644
index 0000000000..a5235e190c
--- /dev/null
+++ b/src/packages/calendar/demos/h5/demo1.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react'
+import { Cell, Calendar } from '@nutui/nutui-react'
+
+const Demo1 = () => {
+ const d = new Date()
+ const currDay = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
+ const [date, setDate] = useState(currDay)
+ const [isVisible, setIsVisible] = useState(false)
+ const [dateWeek, setDateWeek] = useState('')
+
+ const openSwitch = () => {
+ setIsVisible(true)
+ }
+
+ const closeSwitch = () => {
+ setIsVisible(false)
+ }
+
+ const setChooseValue = (param: string) => {
+ setDate(param[3])
+ setDateWeek(param[4])
+ }
+
+ const select = (param: string) => {
+ console.log(param)
+ }
+
+ return (
+ <>
+
|
+
+
+ )
+}
+export default Demo1
diff --git a/src/packages/calendar/demos/h5/demo10.tsx b/src/packages/calendar/demos/h5/demo10.tsx
new file mode 100644
index 0000000000..780b921c4d
--- /dev/null
+++ b/src/packages/calendar/demos/h5/demo10.tsx
@@ -0,0 +1,147 @@
+import React, { useState, useRef } from 'react'
+import { Cell, Calendar } from '@nutui/nutui-react'
+
+function isLeapYear(y: number): boolean {
+ return (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0
+}
+
+function getMonthDays(year: string, month: string): number {
+ if (/^0/.test(month)) {
+ month = month.split('')[1]
+ }
+ return (
+ [
+ 0,
+ 31,
+ isLeapYear(Number(month)) ? 29 : 28,
+ 31,
+ 30,
+ 31,
+ 30,
+ 31,
+ 31,
+ 30,
+ 31,
+ 30,
+ 31,
+ ] as number[]
+ )[month as any]
+}
+
+const padZero = (num: number | string, targetLength = 2) => {
+ let str = `${num}`
+ while (str.length < targetLength) {
+ str = `0${str}`
+ }
+ return str
+}
+
+function date2Str(date: Date, split?: string): string {
+ split = split || '-'
+ const y = date.getFullYear()
+ const m = padZero(date.getMonth() + 1)
+ const d = padZero(date.getDate())
+ return [y, m, d].join(split)
+}
+
+function getDay(i: number): string {
+ i = i || 0
+ let date = new Date()
+ const diff = i * (1000 * 60 * 60 * 24)
+ date = new Date(date.getTime() + diff)
+ return date2Str(date)
+}
+
+const Demo10 = () => {
+ const [date, setDate] = useState
(['2023-07-10', '2023-07-19'])
+
+ const [isVisible, setIsVisible] = useState(false)
+
+ const calendarRef = useRef(null)
+
+ const openSwitch = () => {
+ setIsVisible(true)
+ }
+
+ const closeSwitch = () => {
+ setIsVisible(false)
+ }
+
+ const setChooseValue = (param: string) => {
+ setDate([...[param[0][3], param[1][3]]])
+ }
+
+ const goDate = () => {
+ if (calendarRef.current) {
+ calendarRef.current.scrollToDate('2023-04-01')
+ }
+ }
+
+ const clickBtn = () => {
+ const date = [date2Str(new Date()), getDay(6)]
+ setDate(date)
+ if (calendarRef.current) {
+ calendarRef.current.scrollToDate(date[0])
+ }
+ }
+
+ const clickBtn1 = () => {
+ const date = new Date()
+ const year = date.getFullYear()
+ let month: any = date.getMonth() + 1
+ month = month < 10 ? `0${month}` : `${month}`
+ const yearMonth = `${year}-${month}`
+ const currMonthDays = getMonthDays(`${year}`, `${month}`)
+ setDate([`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`])
+ if (calendarRef.current) {
+ calendarRef.current.scrollToDate(`${yearMonth}-01`)
+ }
+ }
+
+ const renderHeaderButtons = () => {
+ return (
+
+
+
+ {/* {translated['781b07fd']} */}
+ 去某个月
+
+
+
+
+ {/* {translated['1076d771']} */}
+ 最近七天
+
+
+
+
+ {/* {translated['6ab47cd2']} */}
+ 当月
+
+
+
|
+
+
+ )
+}
+export default Demo10
diff --git a/src/packages/calendar/demos/h5/demo11.tsx b/src/packages/calendar/demos/h5/demo11.tsx
new file mode 100644
index 0000000000..ac63bea957
--- /dev/null
+++ b/src/packages/calendar/demos/h5/demo11.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react'
+import { Calendar } from '@nutui/nutui-react'
+
+const Demo11 = () => {
+ const [date, setDate] = useState(['2023-06-03', '2023-06-16'])
+
+ const setChooseValue = (param: string) => {
+ setDate([...[param[0][3], param[1][3]]])
+ }
+
+ const yearMonthChange = (param: string) => {
+ console.log(param)
+ }
+
+ return (
+ <>
+
+ test
}
+ endText="leave"
+ autoBackfill
+ onConfirm={setChooseValue}
+ onPageChange={yearMonthChange}
+ />
+
+
+ )
+}
+export default Demo11
diff --git a/src/packages/calendar/demos/h5/demo2.tsx b/src/packages/calendar/demos/h5/demo2.tsx
new file mode 100644
index 0000000000..03fe66f43e
--- /dev/null
+++ b/src/packages/calendar/demos/h5/demo2.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import { Cell, Calendar } from '@nutui/nutui-react'
+
+const Demo2 = () => {
+ const [date, setDate] = useState(['2023-01-23', '2023-11-26'])
+ const [isVisible, setIsVisible] = useState(false)
+
+ const openSwitch = () => {
+ setIsVisible(true)
+ }
+
+ const closeSwitch = () => {
+ setIsVisible(false)
+ }
+
+ const setChooseValue = (param: string) => {
+ setDate([...[param[0][3], param[1][3]]])
+ }
+
+ const select = (param: string) => {
+ console.log(param)
+ }
+
+ return (
+ <>
+
|
+
+
+
+ )
+}
+export default Demo2
diff --git a/src/packages/calendar/demos/h5/demo3.tsx b/src/packages/calendar/demos/h5/demo3.tsx
new file mode 100644
index 0000000000..98b634f31a
--- /dev/null
+++ b/src/packages/calendar/demos/h5/demo3.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react'
+import { Cell, Calendar } from '@nutui/nutui-react'
+
+const Demo3 = () => {
+ const [date, setDate] = useState
([])
+ const [isVisible, setIsVisible] = useState(false)
+
+ const openSwitch = () => {
+ setIsVisible(true)
+ }
+
+ const closeSwitch = () => {
+ setIsVisible(false)
+ }
+
+ const setChooseValue = (chooseData: any) => {
+ const dateArr = chooseData.map((item: any) => {
+ return item[3]
+ })
+ setDate([...dateArr])
+ }
+
+ return (
+ <>
+ |
+
+
+ )
+}
+export default Demo3
diff --git a/src/packages/calendar/demos/h5/demo4.tsx b/src/packages/calendar/demos/h5/demo4.tsx
new file mode 100644
index 0000000000..4568248eb8
--- /dev/null
+++ b/src/packages/calendar/demos/h5/demo4.tsx
@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import { Cell, Calendar } from '@nutui/nutui-react'
+
+const Demo4 = () => {
+ const [date, setDate] = useState([])
+ const [isVisible, setIsVisible] = useState(false)
+
+ const openSwitch = () => {
+ setIsVisible(true)
+ }
+
+ const closeSwitch = () => {
+ setIsVisible(false)
+ }
+
+ const setChooseValue = (chooseData: any) => {
+ const dateArr = [...[chooseData[0][3], chooseData[1][3]]]
+ setDate([...dateArr])
+ }
+ return (
+ <>
+ |
+
+
+ )
+}
+export default Demo4
diff --git a/src/packages/calendar/demos/h5/demo5.tsx b/src/packages/calendar/demos/h5/demo5.tsx
new file mode 100644
index 0000000000..db857934a6
--- /dev/null
+++ b/src/packages/calendar/demos/h5/demo5.tsx
@@ -0,0 +1,48 @@
+import React, { useState } from 'react'
+import { Cell, Calendar, CalendarDay } from '@nutui/nutui-react'
+
+const Demo5 = () => {
+ const [date, setDate] = useState([])
+ const [isVisible, setIsVisible] = useState(false)
+
+ const openSwitch = () => {
+ setIsVisible(true)
+ }
+
+ const closeSwitch = () => {
+ setIsVisible(false)
+ }
+
+ const setChooseValue = (chooseData: any) => {
+ const dateArr = [...[chooseData[0][3], chooseData[1][3]]]
+ setDate([...dateArr])
+ }
+
+ const disableDate = (date: CalendarDay) => {
+ return date.day === 25 || date.day === 20 || date.day === 22
+ }
+
+ return (
+ <>
+ |
+
+
+
+ )
+}
+
+export default Demo5
diff --git a/src/packages/calendar/demos/h5/demo6.tsx b/src/packages/calendar/demos/h5/demo6.tsx
new file mode 100644
index 0000000000..37ae07619b
--- /dev/null
+++ b/src/packages/calendar/demos/h5/demo6.tsx
@@ -0,0 +1,130 @@
+import React, { useRef, useState } from 'react'
+import { Cell, Calendar, DatePicker, CalendarDay } from '@nutui/nutui-react'
+
+const padZero = (num: number | string, targetLength = 2) => {
+ let str = `${num}`
+ while (str.length < targetLength) {
+ str = `0${str}`
+ }
+ return str
+}
+
+const Demo6 = () => {
+ const [date, setDate] = useState([])
+ const [isVisible, setIsVisible] = useState(false)
+
+ const disableDate = (date: CalendarDay) => {
+ return date.day === 25 || date.day === 20 || date.day === 22
+ }
+
+ const [show, setShow] = useState(false)
+ const [dpAbled, setDatePickerAbled] = useState([false, false])
+ const [desc1, setDesc1] = useState('10:00:00')
+ const [desc2, setDesc2] = useState('20:00:00')
+ const desc = useRef(0)
+
+ const setChooseValue = (chooseData: any) => {
+ console.log(
+ 'setChooseValue',
+ [...[chooseData[0][3], chooseData[1][3]]],
+ chooseData
+ )
+ const dateArr = [...[chooseData[0][3], chooseData[1][3]]]
+ setDate([...dateArr])
+ }
+ const confirm = (values: (string | number)[], options: any[]) => {
+ if (desc.current === 1) {
+ setDesc1(
+ options.map((option) => padZero(parseInt(option.text))).join(':')
+ )
+ } else {
+ setDesc2(
+ options.map((option) => padZero(parseInt(option.text))).join(':')
+ )
+ }
+ }
+
+ const showDatePicker = (e: any, index: number) => {
+ if (dpAbled[index - 1]) {
+ e.stopPropagation()
+ setShow(true)
+ desc.current = index
+ }
+ }
+
+ const openSwitch = () => {
+ setIsVisible(true)
+ }
+
+ const closeSwitch = () => {
+ setIsVisible(false)
+ }
+
+ return (
+ <>
+
+
+ {date && date.length ? `${date[0]} ${desc1}` : '请选择起始时间'}
+
+ -
+
+ {date && date.length ? `${date[1]} ${desc2}` : '请选择截止时间'}
+
+ |