diff --git a/src/packages/overlay/demo.taro.tsx b/src/packages/overlay/demo.taro.tsx index b81d4e34ce..19074dbb2c 100644 --- a/src/packages/overlay/demo.taro.tsx +++ b/src/packages/overlay/demo.taro.tsx @@ -1,99 +1,43 @@ -import React, { useState } from 'react' +import React from 'react' import Taro from '@tarojs/taro' import { useTranslate } from '@/sites/assets/locale/taro' -import { Button, Cell, Overlay } from '@/packages/nutui.react.taro' +import { Cell } from '@/packages/nutui.react.taro' import '@/packages/overlay/demo.scss' import Header from '@/sites/components/header' +import Demo2 from './demos/taro/demo2' +import Demo3 from './demos/taro/demo3' +import Demo1 from './demos/taro/demo1' +import Demo4 from './demos/taro/demo4' +import Demo5 from './demos/taro/demo5' +import Demo6 from './demos/taro/demo6' -interface T { - '84aa6bce': string - '2a9e4928': string - duration: string - lockscroll: string - abbf9359: string - ec0d7acf: string - ce1e18a2: string - closeClickLay: string -} const OverlayDemo = () => { - const [translated] = useTranslate({ + const [translated] = useTranslate({ 'zh-CN': { '84aa6bce': '基础用法', - '2a9e4928': '显示遮罩层', duration: '设置动画时间', lockscroll: '不锁定背景滚动', abbf9359: '自定义遮罩样式', ec0d7acf: '嵌套内容', - ce1e18a2: '这里是正文', closeClickLay: '点击遮罩不关闭', }, 'zh-TW': { '84aa6bce': '基礎用法', - '2a9e4928': '顯示遮罩層', duration: '設置動畫時間', lockscroll: '不鎖定背景滾動', abbf9359: '自定義遮罩樣式', ec0d7acf: '嵌套內容', - ce1e18a2: '這裡是正文', closeClickLay: '點擊遮罩不關閉', }, 'en-US': { '84aa6bce': 'Basic usage', - '2a9e4928': 'Show mask layer', duration: 'Set animation time', lockscroll: 'Do not lock background scrolling', abbf9359: 'Custom mask style', ec0d7acf: 'Nested content', - ce1e18a2: 'here is the text', closeClickLay: 'Click the mask not to close', }, }) - - const [visible, setVisible] = useState(false) - const [visible2, setVisible2] = useState(false) - const [visible3, setVisible3] = useState(false) - const [visible4, setVisible4] = useState(false) - const [visible5, setVisible5] = useState(false) - const [visible6, setVisible6] = useState(false) - - const handleToggleShow = () => { - setVisible(true) - } - const handleToggleShow2 = () => { - setVisible2(true) - } - const handleToggleShow3 = () => { - console.log('visible3', visible3) - setVisible3(true) - } - const handleToggleShow4 = () => { - setVisible4(true) - } - const handleToggleShow5 = () => { - setVisible5(true) - } - const handleToggleShow6 = () => { - setVisible6(true) - } - - const onClose = () => { - setVisible(false) - } - const onClose2 = () => { - setVisible2(false) - } - const onClose3 = () => { - setVisible3(false) - } - const onClose4 = () => { - setVisible4(false) - } - const onClose5 = () => { - setVisible5(false) - } - const onClose6 = () => { - setVisible6(false) - } return ( <>
@@ -102,85 +46,27 @@ const OverlayDemo = () => { >

{translated['84aa6bce']}

- - { - console.log('afterShow') - }} - /> + -

{translated.abbf9359}

- - + -

{translated.duration}

- - { - console.log('afterShow') - }} - afterClose={() => { - console.log('afterClose') - }} - /> + -

{translated.lockscroll}

- - + -

{translated.ec0d7acf}

- - -
-
{translated.ce1e18a2}
-
- + -

{translated.closeClickLay}

- - -
-
- {translated.ce1e18a2} -
-
- + diff --git a/src/packages/overlay/demo.tsx b/src/packages/overlay/demo.tsx index 5e47da9a25..381686b343 100644 --- a/src/packages/overlay/demo.tsx +++ b/src/packages/overlay/demo.tsx @@ -1,186 +1,68 @@ -import React, { useState } from 'react' +import React from 'react' import { useTranslate } from '../../sites/assets/locale' -import { Overlay } from './overlay' import Cell from '@/packages/cell' -import Button from '@/packages/button' import './demo.scss' - -interface T { - '84aa6bce': string - '2a9e4928': string - duration: string - lockscroll: string - abbf9359: string - ec0d7acf: string - ce1e18a2: string - closeClickLay: string -} +import Demo1 from './demos/h5/demo1' +import Demo2 from './demos/h5/demo2' +import Demo3 from './demos/h5/demo3' +import Demo4 from './demos/h5/demo4' +import Demo5 from './demos/h5/demo5' +import Demo6 from './demos/h5/demo6' const OverlayDemo = () => { - const [translated] = useTranslate({ + const [translated] = useTranslate({ 'zh-CN': { '84aa6bce': '基础用法', - '2a9e4928': '显示遮罩层', duration: '设置动画时间', lockscroll: '不锁定背景滚动', abbf9359: '自定义遮罩样式', ec0d7acf: '嵌套内容', - ce1e18a2: '这里是正文', closeClickLay: '点击遮罩不关闭', }, 'zh-TW': { '84aa6bce': '基礎用法', - '2a9e4928': '顯示遮罩層', duration: '設置動畫時間', lockscroll: '不鎖定背景滾動', abbf9359: '自定義遮罩樣式', ec0d7acf: '嵌套內容', - ce1e18a2: '這裡是正文', closeClickLay: '點擊遮罩不關閉', }, 'en-US': { '84aa6bce': 'Basic usage', - '2a9e4928': 'Show mask layer', duration: 'Set animation time', lockscroll: 'Do not lock background scrolling', abbf9359: 'Custom mask style', ec0d7acf: 'Nested content', - ce1e18a2: 'here is the text', closeClickLay: 'Click the mask not to close', }, }) - const [visible, setVisible] = useState(false) - const [visible2, setVisible2] = useState(false) - const [visible3, setVisible3] = useState(false) - const [visible4, setVisible4] = useState(false) - const [visible5, setVisible5] = useState(false) - const [visible6, setVisible6] = useState(false) - - const handleToggleShow = () => { - setVisible(true) - } - const handleToggleShow2 = () => { - setVisible2(true) - } - const handleToggleShow3 = () => { - setVisible3(true) - } - const handleToggleShow4 = () => { - setVisible4(true) - } - const handleToggleShow5 = () => { - setVisible5(true) - } - const handleToggleShow6 = () => { - setVisible6(true) - } - - const onClose = () => { - setVisible(false) - } - const onClose2 = () => { - setVisible2(false) - } - const onClose3 = () => { - setVisible3(false) - } - const onClose4 = () => { - setVisible4(false) - } - const onClose5 = () => { - setVisible5(false) - } - const onClose6 = () => { - setVisible6(false) - } return ( <>

{translated['84aa6bce']}

- - { - console.log('afterShow') - }} - afterClose={() => { - console.log('afterClose') - }} - /> + -

{translated.abbf9359}

- - + -

{translated.duration}

- - { - console.log('afterShow') - }} - afterClose={() => { - console.log('afterClose') - }} - /> + -

{translated.lockscroll}

- - + -

{translated.ec0d7acf}

- - -
-
{translated.ce1e18a2}
-
- + -

{translated.closeClickLay}

- - -
-
- {translated.ce1e18a2} -
-
- +
diff --git a/src/packages/overlay/demos/h5/demo1.tsx b/src/packages/overlay/demos/h5/demo1.tsx new file mode 100644 index 0000000000..406d07ce78 --- /dev/null +++ b/src/packages/overlay/demos/h5/demo1.tsx @@ -0,0 +1,31 @@ +import React, { useState } from 'react' +import { Button, Overlay } from '@nutui/nutui-react' + +const Demo1 = () => { + const [visible, setVisible] = useState(false) + const handleToggleShow = () => { + setVisible(true) + } + const onClose = () => { + setVisible(false) + } + return ( + <> + + { + console.log('afterShow') + }} + afterClose={() => { + console.log('afterClose') + }} + /> + + ) +} +export default Demo1 diff --git a/src/packages/overlay/demos/h5/demo2.tsx b/src/packages/overlay/demos/h5/demo2.tsx new file mode 100644 index 0000000000..58d37d33de --- /dev/null +++ b/src/packages/overlay/demos/h5/demo2.tsx @@ -0,0 +1,28 @@ +import React, { useState } from 'react' +import { Button, Overlay } from '@nutui/nutui-react' + +const Demo2 = () => { + const [visible, setVisible] = useState(false) + const handleToggleShow = () => { + setVisible(true) + } + const onClose = () => { + setVisible(false) + } + return ( + <> + + + + ) +} +export default Demo2 diff --git a/src/packages/overlay/demos/h5/demo3.tsx b/src/packages/overlay/demos/h5/demo3.tsx new file mode 100644 index 0000000000..85e21cab49 --- /dev/null +++ b/src/packages/overlay/demos/h5/demo3.tsx @@ -0,0 +1,32 @@ +import React, { useState } from 'react' +import { Button, Overlay } from '@nutui/nutui-react' + +const Demo3 = () => { + const [visible, setVisible] = useState(false) + const handleToggleShow = () => { + setVisible(true) + } + const onClose = () => { + setVisible(false) + } + return ( + <> + + { + console.log('afterShow') + }} + afterClose={() => { + console.log('afterClose') + }} + /> + + ) +} +export default Demo3 diff --git a/src/packages/overlay/demos/h5/demo4.tsx b/src/packages/overlay/demos/h5/demo4.tsx new file mode 100644 index 0000000000..d4dc4fdbbd --- /dev/null +++ b/src/packages/overlay/demos/h5/demo4.tsx @@ -0,0 +1,21 @@ +import React, { useState } from 'react' +import { Button, Overlay } from '@nutui/nutui-react' + +const Demo4 = () => { + const [visible, setVisible] = useState(false) + const handleToggleShow = () => { + setVisible(true) + } + const onClose = () => { + setVisible(false) + } + return ( + <> + + + + ) +} +export default Demo4 diff --git a/src/packages/overlay/demos/h5/demo5.tsx b/src/packages/overlay/demos/h5/demo5.tsx new file mode 100644 index 0000000000..b887a8276c --- /dev/null +++ b/src/packages/overlay/demos/h5/demo5.tsx @@ -0,0 +1,41 @@ +import React, { useState } from 'react' +import { Button, Overlay } from '@nutui/nutui-react' + +const Demo5 = () => { + const [visible, setVisible] = useState(false) + const wrapperStyle = { + display: 'flex', + height: '100%', + alignItems: 'center', + justifyContent: 'center', + } + const contentStyle = { + display: 'flex', + width: '150px', + height: '150px', + background: '#fff', + borderRadius: '8px', + alignItems: 'center', + justifyContent: 'center', + color: 'red', + } + const handleToggleShow = () => { + setVisible(true) + } + const onClose = () => { + setVisible(false) + } + return ( + <> + + +
+
这里是正文
+
+ + + ) +} +export default Demo5 diff --git a/src/packages/overlay/demos/h5/demo6.tsx b/src/packages/overlay/demos/h5/demo6.tsx new file mode 100644 index 0000000000..4db108d386 --- /dev/null +++ b/src/packages/overlay/demos/h5/demo6.tsx @@ -0,0 +1,43 @@ +import React, { useState } from 'react' +import { Button, Overlay } from '@nutui/nutui-react' + +const Demo6 = () => { + const [visible, setVisible] = useState(false) + const wrapperStyle = { + display: 'flex', + height: '100%', + alignItems: 'center', + justifyContent: 'center', + } + const contentStyle = { + display: 'flex', + width: '150px', + height: '150px', + background: '#fff', + borderRadius: '8px', + alignItems: 'center', + justifyContent: 'center', + color: 'red', + } + const handleToggleShow = () => { + setVisible(true) + } + const onClose = () => { + setVisible(false) + } + return ( + <> + + +
+
+ 这里是正文 +
+
+ + + ) +} +export default Demo6 diff --git a/src/packages/overlay/demos/taro/demo1.tsx b/src/packages/overlay/demos/taro/demo1.tsx new file mode 100644 index 0000000000..7293cac53c --- /dev/null +++ b/src/packages/overlay/demos/taro/demo1.tsx @@ -0,0 +1,31 @@ +import React, { useState } from 'react' +import { Button, Overlay } from '@nutui/nutui-react-taro' + +const Demo1 = () => { + const [visible, setVisible] = useState(false) + const handleToggleShow = () => { + setVisible(true) + } + const onClose = () => { + setVisible(false) + } + return ( + <> + + { + console.log('afterShow') + }} + afterClose={() => { + console.log('afterClose') + }} + /> + + ) +} +export default Demo1 diff --git a/src/packages/overlay/demos/taro/demo2.tsx b/src/packages/overlay/demos/taro/demo2.tsx new file mode 100644 index 0000000000..73e6ca1d25 --- /dev/null +++ b/src/packages/overlay/demos/taro/demo2.tsx @@ -0,0 +1,28 @@ +import React, { useState } from 'react' +import { Button, Overlay } from '@nutui/nutui-react-taro' + +const Demo2 = () => { + const [visible, setVisible] = useState(false) + const handleToggleShow = () => { + setVisible(true) + } + const onClose = () => { + setVisible(false) + } + return ( + <> + + + + ) +} +export default Demo2 diff --git a/src/packages/overlay/demos/taro/demo3.tsx b/src/packages/overlay/demos/taro/demo3.tsx new file mode 100644 index 0000000000..1e2b1f3d95 --- /dev/null +++ b/src/packages/overlay/demos/taro/demo3.tsx @@ -0,0 +1,32 @@ +import React, { useState } from 'react' +import { Button, Overlay } from '@nutui/nutui-react-taro' + +const Demo3 = () => { + const [visible, setVisible] = useState(false) + const handleToggleShow = () => { + setVisible(true) + } + const onClose = () => { + setVisible(false) + } + return ( + <> + + { + console.log('afterShow') + }} + afterClose={() => { + console.log('afterClose') + }} + /> + + ) +} +export default Demo3 diff --git a/src/packages/overlay/demos/taro/demo4.tsx b/src/packages/overlay/demos/taro/demo4.tsx new file mode 100644 index 0000000000..3f369cdb93 --- /dev/null +++ b/src/packages/overlay/demos/taro/demo4.tsx @@ -0,0 +1,21 @@ +import React, { useState } from 'react' +import { Button, Overlay } from '@nutui/nutui-react-taro' + +const Demo4 = () => { + const [visible, setVisible] = useState(false) + const handleToggleShow = () => { + setVisible(true) + } + const onClose = () => { + setVisible(false) + } + return ( + <> + + + + ) +} +export default Demo4 diff --git a/src/packages/overlay/demos/taro/demo5.tsx b/src/packages/overlay/demos/taro/demo5.tsx new file mode 100644 index 0000000000..8e7a534a24 --- /dev/null +++ b/src/packages/overlay/demos/taro/demo5.tsx @@ -0,0 +1,42 @@ +import React, { useState } from 'react' +import { Button, Overlay } from '@nutui/nutui-react-taro' + +const Demo5 = () => { + const [visible, setVisible] = useState(false) + + const wrapperStyle = { + display: 'flex', + height: '100%', + alignItems: 'center', + justifyContent: 'center', + } + const contentStyle = { + display: 'flex', + width: '150px', + height: '150px', + background: '#fff', + borderRadius: '8px', + alignItems: 'center', + justifyContent: 'center', + color: 'red', + } + const handleToggleShow = () => { + setVisible(true) + } + const onClose = () => { + setVisible(false) + } + return ( + <> + + +
+
这里是正文
+
+ + + ) +} +export default Demo5 diff --git a/src/packages/overlay/demos/taro/demo6.tsx b/src/packages/overlay/demos/taro/demo6.tsx new file mode 100644 index 0000000000..7094b4ef0b --- /dev/null +++ b/src/packages/overlay/demos/taro/demo6.tsx @@ -0,0 +1,43 @@ +import React, { useState } from 'react' +import { Button, Overlay } from '@nutui/nutui-react-taro' + +const Demo6 = () => { + const [visible, setVisible] = useState(false) + const wrapperStyle = { + display: 'flex', + height: '100%', + alignItems: 'center', + justifyContent: 'center', + } + const contentStyle = { + display: 'flex', + width: '150px', + height: '150px', + background: '#fff', + borderRadius: '8px', + alignItems: 'center', + justifyContent: 'center', + color: 'red', + } + const handleToggleShow = () => { + setVisible(true) + } + const onClose = () => { + setVisible(false) + } + return ( + <> + + +
+
+ 这里是正文 +
+
+ + + ) +} +export default Demo6 diff --git a/src/packages/overlay/doc.en-US.md b/src/packages/overlay/doc.en-US.md index 75da3f9699..dd91cba537 100644 --- a/src/packages/overlay/doc.en-US.md +++ b/src/packages/overlay/doc.en-US.md @@ -16,39 +16,7 @@ import { OverLay } from '@nutui/nutui-react'; :::demo -```tsx -import React, { useState } from "react"; -import { Button, Overlay } from '@nutui/nutui-react'; - -const App = () => { - const [visible, setVisible] = useState(false) - const handleToggleShow = () => { - setVisible(true) - } - const onClose = () => { - setVisible(false) - } - return ( - <> - - { - console.log('afterShow') - }} - afterClose={() => { - console.log('afterClose') - }} - /> - - ) -} -export default App; -``` + ::: @@ -56,36 +24,7 @@ export default App; :::demo -```tsx -import React, { useState } from "react"; -import { Button, Overlay } from '@nutui/nutui-react'; - -const App = () => { - const [visible, setVisible] = useState(false) - const handleToggleShow = () => { - setVisible(true) - } - const onClose = () => { - setVisible(false) - } - return ( - <> - - - - ) -} -export default App; -``` + ::: @@ -93,40 +32,7 @@ export default App; :::demo -```tsx -import React, { useState } from "react"; -import { Button, Overlay } from '@nutui/nutui-react'; - -const App = () => { - const [visible, setVisible] = useState(false) - const handleToggleShow = () => { - setVisible(true) - } - const onClose = () => { - setVisible(false) - } - return ( - <> - - { - console.log('afterShow') - }} - afterClose={() => { - console.log('afterClose') - }} - /> - - ) -} -export default App; -``` + ::: @@ -134,29 +40,7 @@ export default App; :::demo -```tsx -import React, { useState } from "react"; -import { Button, Overlay } from '@nutui/nutui-react'; - -const App = () => { - const [visible, setVisible] = useState(false) - const handleToggleShow = () => { - setVisible(true) - } - const onClose = () => { - setVisible(false) - } - return ( - <> - - - - ) -} -export default App; -``` + ::: @@ -164,49 +48,7 @@ export default App; :::demo -```tsx -import React, { useState } from "react"; -import { Button, Overlay } from '@nutui/nutui-react'; - -const App = () => { - const [visible, setVisible] = useState(false) - const wrapperStyle = { - display: 'flex', - height: '100%', - alignItems: 'center', - justifyContent: 'center' - } - const contentStyle = { - display: 'flex', - width: '150px', - height: '150px', - background: '#fff', - borderRadius: '8px', - alignItems: 'center', - justifyContent: 'center', - color: 'red' - } - const handleToggleShow = () => { - setVisible(true) - } - const onClose = () => { - setVisible(false) - } - return ( - <> - - -
-
here is the text
-
- - - ) -} -export default App; -``` + ::: @@ -214,49 +56,7 @@ export default App; :::demo -```tsx -import React, { useState } from "react"; -import { Button, Overlay } from '@nutui/nutui-react'; - -const App = () => { - const [visible, setVisible] = useState(false) - const wrapperStyle = { - display: 'flex', - height: '100%', - alignItems: 'center', - justifyContent: 'center' - } - const contentStyle = { - display: 'flex', - width: '150px', - height: '150px', - background: '#fff', - borderRadius: '8px', - alignItems: 'center', - justifyContent: 'center', - color: 'red' - } - const handleToggleShow = () => { - setVisible(true) - } - const onClose = () => { - setVisible(false) - } - return ( - <> - - -
-
here is the text
-
- - - ) -} -export default App; -``` + ::: diff --git a/src/packages/overlay/doc.md b/src/packages/overlay/doc.md index ebbbdeda67..ff577c8ed0 100644 --- a/src/packages/overlay/doc.md +++ b/src/packages/overlay/doc.md @@ -16,39 +16,7 @@ import { OverLay } from '@nutui/nutui-react'; :::demo -```tsx -import React, { useState } from "react"; -import { Button, Overlay } from '@nutui/nutui-react'; - -const App = () => { - const [visible, setVisible] = useState(false) - const handleToggleShow = () => { - setVisible(true) - } - const onClose = () => { - setVisible(false) - } - return ( - <> - - { - console.log('afterShow') - }} - afterClose={() => { - console.log('afterClose') - }} - /> - - ) -} -export default App; -``` + ::: @@ -56,36 +24,7 @@ export default App; :::demo -```tsx -import React, { useState } from "react"; -import { Button, Overlay } from '@nutui/nutui-react'; - -const App = () => { - const [visible, setVisible] = useState(false) - const handleToggleShow = () => { - setVisible(true) - } - const onClose = () => { - setVisible(false) - } - return ( - <> - - - - ) -} -export default App; -``` + ::: @@ -93,40 +32,7 @@ export default App; :::demo -```tsx -import React, { useState } from "react"; -import { Button, Overlay } from '@nutui/nutui-react'; - -const App = () => { - const [visible, setVisible] = useState(false) - const handleToggleShow = () => { - setVisible(true) - } - const onClose = () => { - setVisible(false) - } - return ( - <> - - { - console.log('afterShow') - }} - afterClose={() => { - console.log('afterClose') - }} - /> - - ) -} -export default App; -``` + ::: @@ -134,29 +40,7 @@ export default App; :::demo -```tsx -import React, { useState } from "react"; -import { Button, Overlay } from '@nutui/nutui-react'; - -const App = () => { - const [visible, setVisible] = useState(false) - const handleToggleShow = () => { - setVisible(true) - } - const onClose = () => { - setVisible(false) - } - return ( - <> - - - - ) -} -export default App; -``` + ::: @@ -164,50 +48,7 @@ export default App; :::demo -```tsx -import React, { useState } from "react"; -import { Button, Overlay } from '@nutui/nutui-react'; - - -const App = () => { - const [visible, setVisible] = useState(false) - const wrapperStyle = { - display: 'flex', - height: '100%', - alignItems: 'center', - justifyContent: 'center' - } - const contentStyle = { - display: 'flex', - width: '150px', - height: '150px', - background: '#fff', - borderRadius: '8px', - alignItems: 'center', - justifyContent: 'center', - color: 'red' - } - const handleToggleShow = () => { - setVisible(true) - } - const onClose = () => { - setVisible(false) - } - return ( - <> - - -
-
这里是正文
-
- - - ) -} -export default App; -``` + ::: @@ -215,49 +56,7 @@ export default App; :::demo -```tsx -import React, { useState } from "react"; -import { Button, Overlay } from '@nutui/nutui-react'; - -const App = () => { - const [visible, setVisible] = useState(false) - const wrapperStyle = { - display: 'flex', - height: '100%', - alignItems: 'center', - justifyContent: 'center' - } - const contentStyle = { - display: 'flex', - width: '150px', - height: '150px', - background: '#fff', - borderRadius: '8px', - alignItems: 'center', - justifyContent: 'center', - color: 'red' - } - const handleToggleShow = () => { - setVisible(true) - } - const onClose = () => { - setVisible(false) - } - return ( - <> - - -
-
这里是正文
-
- - - ) -} -export default App; -``` + ::: diff --git a/src/packages/overlay/doc.taro.md b/src/packages/overlay/doc.taro.md index 7b702172fc..73b732328f 100644 --- a/src/packages/overlay/doc.taro.md +++ b/src/packages/overlay/doc.taro.md @@ -16,39 +16,7 @@ import { OverLay } from '@nutui/nutui-react-taro'; :::demo -```tsx -import React, { useState } from "react"; -import { Button, Overlay } from '@nutui/nutui-react-taro'; - -const App = () => { - const [visible, setVisible] = useState(false) - const handleToggleShow = () => { - setVisible(true) - } - const onClose = () => { - setVisible(false) - } - return ( - <> - - { - console.log('afterShow') - }} - afterClose={() => { - console.log('afterClose') - }} - /> - - ) -} -export default App; -``` + ::: @@ -56,36 +24,7 @@ export default App; :::demo -```tsx -import React, { useState } from "react"; -import { Button, Overlay } from '@nutui/nutui-react-taro'; - -const App = () => { - const [visible, setVisible] = useState(false) - const handleToggleShow = () => { - setVisible(true) - } - const onClose = () => { - setVisible(false) - } - return ( - <> - - - - ) -} -export default App; -``` + ::: @@ -93,40 +32,7 @@ export default App; :::demo -```tsx -import React, { useState } from "react"; -import { Button, Overlay } from '@nutui/nutui-react-taro'; - -const App = () => { - const [visible, setVisible] = useState(false) - const handleToggleShow = () => { - setVisible(true) - } - const onClose = () => { - setVisible(false) - } - return ( - <> - - { - console.log('afterShow') - }} - afterClose={() => { - console.log('afterClose') - }} - /> - - ) -} -export default App; -``` + ::: @@ -134,29 +40,7 @@ export default App; :::demo -```tsx -import React, { useState } from "react"; -import { Button, Overlay } from '@nutui/nutui-react-taro'; - -const App = () => { - const [visible, setVisible] = useState(false) - const handleToggleShow = () => { - setVisible(true) - } - const onClose = () => { - setVisible(false) - } - return ( - <> - - - - ) -} -export default App; -``` + ::: @@ -164,50 +48,7 @@ export default App; :::demo -```tsx -import React, { useState } from "react"; -import { Button, Overlay } from '@nutui/nutui-react-taro'; - -const App = () => { - const [visible, setVisible] = useState(false) - - const wrapperStyle = { - display: 'flex', - height: '100%', - alignItems: 'center', - justifyContent: 'center' - } - const contentStyle = { - display: 'flex', - width: '150px', - height: '150px', - background: '#fff', - borderRadius: '8px', - alignItems: 'center', - justifyContent: 'center', - color: 'red' - } - const handleToggleShow = () => { - setVisible(true) - } - const onClose = () => { - setVisible(false) - } - return ( - <> - - -
-
这里是正文
-
- - - ) -} -export default App; -``` + ::: @@ -215,49 +56,7 @@ export default App; :::demo -```tsx -import React, { useState } from "react"; -import { Button, Overlay } from '@nutui/nutui-react-taro'; - -const App = () => { - const [visible, setVisible] = useState(false) - const wrapperStyle = { - display: 'flex', - height: '100%', - alignItems: 'center', - justifyContent: 'center' - } - const contentStyle = { - display: 'flex', - width: '150px', - height: '150px', - background: '#fff', - borderRadius: '8px', - alignItems: 'center', - justifyContent: 'center', - color: 'red' - } - const handleToggleShow = () => { - setVisible(true) - } - const onClose = () => { - setVisible(false) - } - return ( - <> - - -
-
这里是正文
-
- - - ) -} -export default App; -``` + ::: diff --git a/src/packages/overlay/doc.zh-TW.md b/src/packages/overlay/doc.zh-TW.md index bd18cf9e5d..ea56019335 100644 --- a/src/packages/overlay/doc.zh-TW.md +++ b/src/packages/overlay/doc.zh-TW.md @@ -16,39 +16,7 @@ import { OverLay } from '@nutui/nutui-react'; :::demo -```tsx -import React, { useState } from "react"; -import { Button, Overlay } from '@nutui/nutui-react'; - -const App = () => { - const [visible, setVisible] = useState(false) - const handleToggleShow = () => { - setVisible(true) - } - const onClose = () => { - setVisible(false) - } - return ( - <> - - { - console.log('afterShow') - }} - afterClose={() => { - console.log('afterClose') - }} - /> - - ) -} -export default App; -``` + ::: @@ -56,36 +24,7 @@ export default App; :::demo -```tsx -import React, { useState } from "react"; -import { Button, Overlay } from '@nutui/nutui-react'; - -const App = () => { - const [visible, setVisible] = useState(false) - const handleToggleShow = () => { - setVisible(true) - } - const onClose = () => { - setVisible(false) - } - return ( - <> - - - - ) -} -export default App; -``` + ::: @@ -93,40 +32,7 @@ export default App; :::demo -```tsx -import React, { useState } from "react"; -import { Button, Overlay } from '@nutui/nutui-react'; - -const App = () => { - const [visible, setVisible] = useState(false) - const handleToggleShow = () => { - setVisible(true) - } - const onClose = () => { - setVisible(false) - } - return ( - <> - - { - console.log('afterShow') - }} - afterClose={() => { - console.log('afterClose') - }} - /> - - ) -} -export default App; -``` + ::: @@ -134,29 +40,7 @@ export default App; :::demo -```tsx -import React, { useState } from "react"; -import { Button, Overlay } from '@nutui/nutui-react'; - -const App = () => { - const [visible, setVisible] = useState(false) - const handleToggleShow = () => { - setVisible(true) - } - const onClose = () => { - setVisible(false) - } - return ( - <> - - - - ) -} -export default App; -``` + ::: @@ -164,49 +48,7 @@ export default App; :::demo -```tsx -import React, { useState } from "react"; -import { Button, Overlay } from '@nutui/nutui-react'; - -const App = () => { - const [visible, setVisible] = useState(false) - const wrapperStyle = { - display: 'flex', - height: '100%', - alignItems: 'center', - justifyContent: 'center' - } - const contentStyle = { - display: 'flex', - width: '150px', - height: '150px', - background: '#fff', - borderRadius: '8px', - alignItems: 'center', - justifyContent: 'center', - color: 'red' - } - const handleToggleShow2 = () => { - setVisible(true) - } - const onClose = () => { - setVisible(false) - } - return ( - <> - - -
-
這裏是正文
-
- - - ) -} -export default App; -``` + ::: @@ -214,49 +56,7 @@ export default App; :::demo -```tsx -import React, { useState } from "react"; -import { Button, Overlay } from '@nutui/nutui-react'; - -const App = () => { - const [visible, setVisible] = useState(false) - const wrapperStyle = { - display: 'flex', - height: '100%', - alignItems: 'center', - justifyContent: 'center' - } - const contentStyle = { - display: 'flex', - width: '150px', - height: '150px', - background: '#fff', - borderRadius: '8px', - alignItems: 'center', - justifyContent: 'center', - color: 'red' - } - const handleToggleShow = () => { - setVisible(true) - } - const onClose = () => { - setVisible(false) - } - return ( - <> - - -
-
這裏是正文
-
- - - ) -} -export default App; -``` + :::