diff --git a/src/packages/image/demo.taro.tsx b/src/packages/image/demo.taro.tsx index 30d71099b8..afe034ebb8 100644 --- a/src/packages/image/demo.taro.tsx +++ b/src/packages/image/demo.taro.tsx @@ -1,10 +1,16 @@ import React from 'react' import Taro from '@tarojs/taro' -import { ScrollView, View } from '@tarojs/components' -import { Failure, Loading } from '@nutui/icons-react-taro' import { useTranslate } from '@/sites/assets/locale/taro' -import { Image, Cell, Row, Col } from '@/packages/nutui.react.taro' +import { Cell } 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' const ImageDemo = () => { const [translated] = useTranslate({ @@ -16,10 +22,7 @@ const ImageDemo = () => { loading: '加载中提示', error: '加载失败', lazyload: '图片懒加载', - default: '默认', - custom: '自定义', imageText: 'Image + text 模式', - text: '雪纺衫女2021年春季新款洋气轻熟上衣', }, 'en-US': { basic: 'Basic Usage', @@ -29,161 +32,43 @@ const ImageDemo = () => { loading: 'Loading', error: 'Error', lazyload: 'Lazyload', - default: 'Default', - custom: 'Custom', imageText: 'Image + text ', - text: 'Chiffon, 2021, spring, the new easy-to-wear blouse', }, }) - const src = - 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' return ( <>

{translated.basic}

- +

{translated.circle}

- - - - - - - - - - - - - - - +

{translated.loading}

- - - - {translated.default} - - - } - /> - {translated.custom} - - + -

{translated.error}

- - - - {translated.default} - - - } - /> - {translated.custom} - - +

{translated.imageText}

- { - console.log('image error') - }} - /> -
- {translated.text} -
+

{translated.fill}

- {[ - 'scaleToFill', - 'aspectFit', - 'aspectFill', - 'widthFix', - 'heightFix', - ].map((mode) => { - return ( - - - {mode} - - ) - })} +

{translated.position}

- {[ - 'top left', - 'top', - 'top right', - 'left', - 'center', - 'right', - 'bottom left', - 'bottom', - 'bottom right', - ].map((mode) => { - return ( - - - {mode} - - ) - })} +

{translated.lazyload}

- - {[ - ...new Array(3).fill(src), - 'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg', - 'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg', - ].map((_) => { - return - })} - +
) diff --git a/src/packages/image/demo.tsx b/src/packages/image/demo.tsx index 90bcbbc0e3..f6ba54fa6f 100644 --- a/src/packages/image/demo.tsx +++ b/src/packages/image/demo.tsx @@ -1,10 +1,14 @@ import React from 'react' -import { Failure, Loading } from '@nutui/icons-react' -import { Image } from './image' import { useTranslate } from '../../sites/assets/locale' -import Row from '@/packages/row' -import Col from '@/packages/col' import Cell from '@/packages/cell' +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 ImageDemo = () => { const [translated] = useTranslate({ @@ -16,10 +20,7 @@ const ImageDemo = () => { loading: '加载中提示', error: '加载失败', lazyload: '图片懒加载', - default: '默认', - custom: '自定义', imageText: 'Image + text 模式', - text: '雪纺衫女2021年春季新款洋气轻熟上衣', }, 'en-US': { basic: 'Basic Usage', @@ -29,223 +30,44 @@ const ImageDemo = () => { loading: 'Loading', error: 'Error', lazyload: 'Lazyload', - default: 'Default', - custom: 'Custom', imageText: 'image + text ', - text: 'Chiffon, 2021, spring, the new easy-to-wear blouse', }, }) - const src = - 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' - const placeholderImg = ( - - ) - - const fits = ['contain', 'cover', 'fill', 'none', 'scale-down'] - const position1 = ['left', 'center', 'right'] - const position2 = ['top', 'center', 'bottom'] - const imageData = [1, 2, 3, 4, 5, 6] - const style = ` - .demo .image-text { - margin-top: 5px; - text-align: center; - color: #999; - } - .demo .nut-row-flex-wrap .nut-col { - margin-bottom: 20px; - } - .lazy-box .nut-image{ - margin-bottom: 10px; - } - .lazy-box{width:100%} -` return ( <> -

{translated.basic}

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

{translated.fill}

- - {fits.map((i) => { - return ( - - -
{i}
- - ) - })} - + -

{translated.position}

- - {position2.map((i) => { - return ( - - -
contain
-
{i}
- - ) - })} - {position1.map((i) => { - return ( - - -
cover
-
{i}
- - ) - })} - + -

{translated.circle}

- - - -
contain
- - - -
cover
- - - -
cover
- - + -

{translated.loading}

- - - { - console.log('image onload') - }} - /> -
{translated.default}
- - - } /> -
{translated.custom}
- - + -

{translated.error}

- - - { - console.log('image error') - }} - /> -
{translated.default}
- - - } - /> -
{translated.custom}
- - +

{translated.imageText}

- { - console.log('image error') - }} - /> -
- {translated.text} -
+

{translated.lazyload}

-
- {imageData.map((item) => { - return ( - - ) - })} -
+
diff --git a/src/packages/image/demos/h5/demo1.tsx b/src/packages/image/demos/h5/demo1.tsx new file mode 100644 index 0000000000..28f54304c1 --- /dev/null +++ b/src/packages/image/demos/h5/demo1.tsx @@ -0,0 +1,18 @@ +import React from 'react' +import { Image } from '@nutui/nutui-react' + +const Demo1 = () => { + const src = + 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' + return ( + <> + { + console.log('click image') + }} + /> + + ) +} +export default Demo1 diff --git a/src/packages/image/demos/h5/demo2.tsx b/src/packages/image/demos/h5/demo2.tsx new file mode 100644 index 0000000000..8b4259fdd8 --- /dev/null +++ b/src/packages/image/demos/h5/demo2.tsx @@ -0,0 +1,28 @@ +import React from 'react' +import { Image, Row, Col } from '@nutui/nutui-react' + +const Demo2 = () => { + const fits = ['contain', 'cover', 'fill', 'none', 'scale-down'] + const src = + 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' + const imageText: React.CSSProperties = { + marginTop: 5, + textAlign: 'center', + color: '#999', + } + return ( + <> + + {fits.map((i) => { + return ( + + +
{i}
+ + ) + })} + + + ) +} +export default Demo2 diff --git a/src/packages/image/demos/h5/demo3.tsx b/src/packages/image/demos/h5/demo3.tsx new file mode 100644 index 0000000000..a82e8bce0e --- /dev/null +++ b/src/packages/image/demos/h5/demo3.tsx @@ -0,0 +1,51 @@ +import React from 'react' +import { Image, Row, Col } from '@nutui/nutui-react' + +const Demo3 = () => { + const position1 = ['left', 'center', 'right'] + const position2 = ['top', 'center', 'bottom'] + const src = + 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' + const imageText: React.CSSProperties = { + marginTop: 5, + textAlign: 'center', + color: '#999', + } + return ( + <> + + {position2.map((i) => { + return ( + + +
contain
+
{i}
+ + ) + })} + {position1.map((i) => { + return ( + + +
cover
+
{i}
+ + ) + })} + + + ) +} +export default Demo3 diff --git a/src/packages/image/demos/h5/demo4.tsx b/src/packages/image/demos/h5/demo4.tsx new file mode 100644 index 0000000000..51ae19aa2a --- /dev/null +++ b/src/packages/image/demos/h5/demo4.tsx @@ -0,0 +1,37 @@ +import React from 'react' +import { Image, Row, Col } from '@nutui/nutui-react' + +const Demo4 = () => { + const src = + 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' + const imageText: React.CSSProperties = { + marginTop: 5, + textAlign: 'center', + color: '#999', + } + return ( + <> + + + +
contain
+ + + +
cover
+ + + +
cover
+ + + + ) +} +export default Demo4 diff --git a/src/packages/image/demos/h5/demo5.tsx b/src/packages/image/demos/h5/demo5.tsx new file mode 100644 index 0000000000..d8a72d07e8 --- /dev/null +++ b/src/packages/image/demos/h5/demo5.tsx @@ -0,0 +1,33 @@ +import React from 'react' +import { Image, Row, Col } from '@nutui/nutui-react' +import { Loading } from '@nutui/icons-react' + +const Demo5 = () => { + const imageText: React.CSSProperties = { + marginTop: 5, + textAlign: 'center', + color: '#999', + } + return ( + <> + + + { + console.log('image onload') + }} + /> +
默认
+ + + } /> +
自定义
+ + + + ) +} +export default Demo5 diff --git a/src/packages/image/demos/h5/demo6.tsx b/src/packages/image/demos/h5/demo6.tsx new file mode 100644 index 0000000000..6238608650 --- /dev/null +++ b/src/packages/image/demos/h5/demo6.tsx @@ -0,0 +1,33 @@ +import React from 'react' +import { Image, Row, Col } from '@nutui/nutui-react' +import { Failure } from '@nutui/icons-react' + +const Demo6 = () => { + const imageText: React.CSSProperties = { + marginTop: 5, + textAlign: 'center', + color: '#999', + } + return ( + <> + + + { + console.log('image error') + }} + /> +
默认
+ + + } /> +
自定义
+ + + + ) +} +export default Demo6 diff --git a/src/packages/image/demos/h5/demo7.tsx b/src/packages/image/demos/h5/demo7.tsx new file mode 100644 index 0000000000..f575e79985 --- /dev/null +++ b/src/packages/image/demos/h5/demo7.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import { Image } from '@nutui/nutui-react' + +const Demo7 = () => { + return ( + <> + { + console.log('image error') + }} + /> +
雪纺衫女2021年春季新款洋气轻熟上衣
+ + ) +} +export default Demo7 diff --git a/src/packages/image/demos/h5/demo8.tsx b/src/packages/image/demos/h5/demo8.tsx new file mode 100644 index 0000000000..6c893e53f6 --- /dev/null +++ b/src/packages/image/demos/h5/demo8.tsx @@ -0,0 +1,46 @@ +import React from 'react' +import { Image, Cell } from '@nutui/nutui-react' + +const Demo8 = () => { + const src = + 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' + const imageData = [1, 2, 3, 4, 5, 6] + const placeholderImg = ( + + ) + const style = ` + .lazy-box{ + width:100% + } + .lazy-box .nut-image{ + margin-bottom: 10px; + } + ` + return ( + <> + + +
+ {imageData.map((item) => { + return ( + + ) + })} +
+ + + ) +} +export default Demo8 diff --git a/src/packages/image/demos/taro/demo1.tsx b/src/packages/image/demos/taro/demo1.tsx new file mode 100644 index 0000000000..6a55fcce12 --- /dev/null +++ b/src/packages/image/demos/taro/demo1.tsx @@ -0,0 +1,13 @@ +import React from 'react' +import { Image } from '@nutui/nutui-react-taro' + +const Demo1 = () => { + const src = + 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' + return ( + <> + + + ) +} +export default Demo1 diff --git a/src/packages/image/demos/taro/demo2.tsx b/src/packages/image/demos/taro/demo2.tsx new file mode 100644 index 0000000000..a700fa4e40 --- /dev/null +++ b/src/packages/image/demos/taro/demo2.tsx @@ -0,0 +1,45 @@ +import React from 'react' +import { Image, Row, Col } from '@nutui/nutui-react-taro' + +const Demo2 = () => { + const src = + 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' + return ( + <> + + + + + + + + + + + + + + + + + ) +} +export default Demo2 diff --git a/src/packages/image/demos/taro/demo3.tsx b/src/packages/image/demos/taro/demo3.tsx new file mode 100644 index 0000000000..d065a12fdc --- /dev/null +++ b/src/packages/image/demos/taro/demo3.tsx @@ -0,0 +1,26 @@ +import React from 'react' +import { Image, Row, Col } from '@nutui/nutui-react-taro' +import { Loading } from '@nutui/icons-react-taro' +import { View } from '@tarojs/components' + +const Demo3 = () => { + return ( + <> + + + + 默认 + + + } + /> + 自定义 + + + + ) +} +export default Demo3 diff --git a/src/packages/image/demos/taro/demo4.tsx b/src/packages/image/demos/taro/demo4.tsx new file mode 100644 index 0000000000..64316763cb --- /dev/null +++ b/src/packages/image/demos/taro/demo4.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { Image, Row, Col } from '@nutui/nutui-react-taro' +import { Failure } from '@nutui/icons-react-taro' +import { View } from '@tarojs/components' + +const Demo4 = () => { + return ( + <> + + + + 默认 + + + } /> + 自定义 + + + + ) +} +export default Demo4 diff --git a/src/packages/image/demos/taro/demo5.tsx b/src/packages/image/demos/taro/demo5.tsx new file mode 100644 index 0000000000..a2f3119d33 --- /dev/null +++ b/src/packages/image/demos/taro/demo5.tsx @@ -0,0 +1,26 @@ +import React from 'react' +import { Image } from '@nutui/nutui-react-taro' + +const Demo5 = () => { + return ( + <> + { + console.log('image error') + }} + /> +
+ 雪纺衫女2021年春季新款洋气轻熟上衣 +
+ + ) +} +export default Demo5 diff --git a/src/packages/image/demos/taro/demo6.tsx b/src/packages/image/demos/taro/demo6.tsx new file mode 100644 index 0000000000..fbd4ec7ee0 --- /dev/null +++ b/src/packages/image/demos/taro/demo6.tsx @@ -0,0 +1,27 @@ +import React from 'react' +import { Cell, Col, Image } from '@nutui/nutui-react-taro' + +const Demo6 = () => { + const src = + 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' + return ( + <> + + {[ + 'scaleToFill', + 'aspectFit', + 'aspectFill', + 'widthFix', + 'heightFix', + ].map((mode) => { + return ( + + + + ) + })} + + + ) +} +export default Demo6 diff --git a/src/packages/image/demos/taro/demo7.tsx b/src/packages/image/demos/taro/demo7.tsx new file mode 100644 index 0000000000..ddf83d36f9 --- /dev/null +++ b/src/packages/image/demos/taro/demo7.tsx @@ -0,0 +1,31 @@ +import React from 'react' +import { Cell, Col, Image } from '@nutui/nutui-react-taro' + +const Demo7 = () => { + const src = + 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' + return ( + <> + + {[ + 'top', + 'bottom', + 'center', + 'left', + 'right', + 'top left', + 'top right', + 'bottom left', + 'bottom right', + ].map((mode) => { + return ( + + + + ) + })} + + + ) +} +export default Demo7 diff --git a/src/packages/image/demos/taro/demo8.tsx b/src/packages/image/demos/taro/demo8.tsx new file mode 100644 index 0000000000..4f292170d1 --- /dev/null +++ b/src/packages/image/demos/taro/demo8.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { Image } from '@nutui/nutui-react-taro' +import { ScrollView } from '@tarojs/components' + +const Demo8 = () => { + const src = + 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' + return ( + <> + + {[ + ...new Array(3).fill(src), + 'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg', + 'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg', + ].map((_) => { + return + })} + + + ) +} +export default Demo8 diff --git a/src/packages/image/doc.en-US.md b/src/packages/image/doc.en-US.md index 85c7efe20e..8c48bb17c5 100644 --- a/src/packages/image/doc.en-US.md +++ b/src/packages/image/doc.en-US.md @@ -18,24 +18,7 @@ The basic usage is the same as that of the native IMG tag. You can set the nativ :::demo -```tsx -import React from "react"; -import { Image } from '@nutui/nutui-react'; - -const App = () => { - const src = 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' - return <> - { - console.log('click image') - }} - /> - -} -export default App; - -``` + ::: @@ -45,33 +28,7 @@ The `fit` attribute is used to set the image filling mode, which is equivalent t :::demo -```tsx -import React from "react"; -import { Image, Row, Col } from '@nutui/nutui-react'; - -const App = () => { - const fits = ['contain', 'cover', 'fill', 'none', 'scale-down'] - const src = 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' - const imageText = { - marginTop: 5, - textAlign: 'center', - color: '#999' - } - return <> - - {fits.map((i) => { - return ( - - -
{i}
- - ) - })} - - -} -export default App; -``` + ::: @@ -81,56 +38,7 @@ The position property can be used to set the position of the picture, which is e :::demo -```tsx -import React from "react"; -import { Image, Row, Col } from '@nutui/nutui-react'; - -const App = () => { - const position1 = ['left', 'center', 'right'] - const position2 = ['top', 'center', 'bottom'] - const src = 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' - const imageText = { - marginTop: 5, - textAlign: 'center', - color: '#999' - } - return <> - - {position2.map((i) => { - return ( - - -
contain
-
{i}
- - ) - })} - {position1.map((i) => { - return ( - - -
cover
-
{i}
- - ) - })} - - -} -export default App; -``` + ::: @@ -140,54 +48,7 @@ The round attribute allows you to set the image to be round. Note that if the im :::demo -```tsx -import React from "react"; -import { Image, Row, Col } from '@nutui/nutui-react'; - -const App = () => { - const src = 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' - const imageText = { - marginTop: 5, - textAlign: 'center', - color: '#999' - } - return <> - - - -
contain
- - - -
cover
- - - -
cover
- - - -} -export default App; -``` + ::: @@ -197,40 +58,7 @@ The Image component provides a default loading prompt and supports custom conten :::demo -```tsx -import React from "react"; -import { Image, Row, Col } from '@nutui/nutui-react'; -import { Loading } from '@nutui/icons-react'; - -const App = () => { - const src = 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' - const imageText = { - marginTop: 5, - textAlign: 'center', - color: '#999' - } - return <> - - - { - console.log('image onload') - }} - /> -
Default
- - - } /> -
Custom
- - - -} -export default App; -``` + ::: @@ -240,44 +68,7 @@ The Image component provides a default loading failure warning and supports cust :::demo -```tsx -import React from "react"; -import { Image, Row, Col } from '@nutui/nutui-react'; -import { Failure } from '@nutui/icons-react'; - -const App = () => { - const imageText = { - marginTop: 5, - textAlign: 'center', - color: '#999' - } - return <> - - - { - console.log('image error') - }} - /> -
Default
- - - } - /> -
Custom
- - - -} -export default App; -``` + ::: @@ -287,32 +78,7 @@ export default App; :::demo -```tsx -import React from "react"; -import { Image } from '@nutui/nutui-react'; - -const App = () => { - return <> - { - console.log('image error') - }} - /> -
- Chiffon, 2021, spring, the new easy-to-wear blouse -
- -} -export default App; -``` + ::: @@ -322,52 +88,7 @@ The Image component provides lazy loading of images, which can be realized by co :::demo -```tsx -import React from "react"; -import { Image,Cell } from '@nutui/nutui-react'; - -const App = () => { - const src = - '//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg' - const imageData = [1, 2, 3, 4, 5, 6] - const placeholderImg = ( - - ) - const style = ` - .lazy-box{ - width:100% - } - .lazy-box .nut-image{ - margin-bottom: 10px; - } - ` - return <> - - -
- {imageData.map((item) => { - return ( - - ) - })} -
- - -} -export default App; -``` + ::: diff --git a/src/packages/image/doc.md b/src/packages/image/doc.md index 246e42edb4..0b49566bf6 100644 --- a/src/packages/image/doc.md +++ b/src/packages/image/doc.md @@ -18,23 +18,7 @@ import { Image } from '@nutui/nutui-react'; :::demo -```tsx -import React from "react"; -import { Image } from '@nutui/nutui-react'; - -const App = () => { - const src = 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' - return <> - { - console.log('click image') - }} - /> - -} -export default App; -``` + ::: @@ -44,33 +28,7 @@ export default App; :::demo -```tsx -import React from "react"; -import { Image, Row, Col } from '@nutui/nutui-react'; - -const App = () => { - const fits = ['contain', 'cover', 'fill', 'none', 'scale-down'] - const src = 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' - const imageText = { - marginTop: 5, - textAlign: 'center', - color: '#999' - } - return <> - - {fits.map((i) => { - return ( - - -
{i}
- - ) - })} - - -} -export default App; -``` + ::: @@ -80,56 +38,7 @@ export default App; :::demo -```tsx -import React from "react"; -import { Image, Row, Col } from '@nutui/nutui-react'; - -const App = () => { - const position1 = ['left', 'center', 'right'] - const position2 = ['top', 'center', 'bottom'] - const src = 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' - const imageText = { - marginTop: 5, - textAlign: 'center', - color: '#999' - } - return <> - - {position2.map((i) => { - return ( - - -
contain
-
{i}
- - ) - })} - {position1.map((i) => { - return ( - - -
cover
-
{i}
- - ) - })} - - -} -export default App; -``` + ::: @@ -139,54 +48,7 @@ export default App; :::demo -```tsx -import React from "react"; -import { Image, Row, Col } from '@nutui/nutui-react'; - -const App = () => { - const src = 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' - const imageText = { - marginTop: 5, - textAlign: 'center', - color: '#999' - } - return <> - - - -
contain
- - - -
cover
- - - -
cover
- - - -} -export default App; -``` + ::: @@ -196,40 +58,7 @@ export default App; :::demo -```tsx -import React from "react"; -import { Image, Row, Col } from '@nutui/nutui-react'; -import { Loading } from '@nutui/icons-react'; - -const App = () => { - const src = 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' - const imageText = { - marginTop: 5, - textAlign: 'center', - color: '#999' - } - return <> - - - { - console.log('image onload') - }} - /> -
默认
- - - } /> -
自定义
- - - -} -export default App; -``` + ::: @@ -239,44 +68,7 @@ export default App; :::demo -```tsx -import React from "react"; -import { Image, Row, Col } from '@nutui/nutui-react'; -import { Failure } from '@nutui/icons-react'; - -const App = () => { - const imageText = { - marginTop: 5, - textAlign: 'center', - color: '#999' - } - return <> - - - { - console.log('image error') - }} - /> -
默认
- - - } - /> -
自定义
- - - -} -export default App; -``` + ::: @@ -286,28 +78,7 @@ export default App; :::demo -```tsx -import React from "react"; -import { Image } from '@nutui/nutui-react'; - -const App = () => { - return <> - { - console.log('image error') - }} - /> -
- 雪纺衫女2021年春季新款洋气轻熟上衣 -
- -} -export default App; -``` + ::: @@ -317,52 +88,7 @@ export default App; :::demo -```tsx -import React from "react"; -import { Image,Cell } from '@nutui/nutui-react'; - -const App = () => { - const src = - '//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg' - const imageData = [1, 2, 3, 4, 5, 6] - const placeholderImg = ( - - ) - const style = ` - .lazy-box{ - width:100% - } - .lazy-box .nut-image{ - margin-bottom: 10px; - } - ` - return <> - - -
- {imageData.map((item) => { - return ( - - ) - })} -
- - -} -export default App; -``` + ::: diff --git a/src/packages/image/doc.taro.md b/src/packages/image/doc.taro.md index 9ff4b98fbc..2512ff6966 100644 --- a/src/packages/image/doc.taro.md +++ b/src/packages/image/doc.taro.md @@ -18,19 +18,7 @@ import { Image } from '@nutui/nutui-react-taro'; :::demo -```tsx -import React from "react"; -import { Image } from '@nutui/nutui-react-taro'; - -const App = () => { - const src = - 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' - return <> - - -} -export default App; -``` + ::: @@ -40,51 +28,7 @@ export default App; :::demo -```tsx -import React from "react"; -import { Image, Row, Col } from '@nutui/nutui-react-taro'; - -const App = () => { - const src = - 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' - return <> - - - - - - - - - - - - - - - - -} -export default App; -``` + ::: @@ -94,34 +38,7 @@ export default App; :::demo -```tsx -import React from "react"; -import { Image, Row, Col } from '@nutui/nutui-react-taro'; -import { Loading } from '@nutui/icons-react-taro'; -import { View } from '@tarojs/components' - -const App = () => { - const src = - 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' - return <> - - - - 默认 - - - } - /> - 自定义 - - - -} -export default App; -``` + ::: @@ -131,33 +48,7 @@ export default App; :::demo -```tsx -import React from "react"; -import { Image, Row, Col } from '@nutui/nutui-react-taro'; -import { Failure } from '@nutui/icons-react-taro'; -import { View } from '@tarojs/components' - -const App = () => { - return <> - - - - 默认 - - - } - /> - 自定义 - - - -} -export default App; -``` + ::: @@ -167,32 +58,7 @@ export default App; :::demo -```tsx -import React from "react"; -import { Image } from '@nutui/nutui-react-taro'; - -const App = () => { - return <> - { - console.log('image error') - }} - /> -
- 雪纺衫女2021年春季新款洋气轻熟上衣 -
- -} -export default App; -``` + ::: @@ -200,32 +66,7 @@ export default App; :::demo -```tsx -import React from "react"; -import { Cell, Col, Image } from '@nutui/nutui-react-taro'; -import { Failure } from '@nutui/icons-react-taro'; - -const App = () => { - return <> - - {[ - 'scaleToFill', - 'aspectFit', - 'aspectFill', - 'widthFix', - 'heightFix', - ].map((mode) => { - return ( - - - - ) - })} - - -} -export default App; -``` + ::: @@ -233,36 +74,7 @@ export default App; :::demo -```tsx -import React from "react"; -import { Cell, Col, Image } from '@nutui/nutui-react-taro'; -import { Failure } from '@nutui/icons-react-taro'; - -const App = () => { - return <> - - {[ - 'top', - 'bottom', - 'center', - 'left', - 'right', - 'top left', - 'top right', - 'bottom left', - 'bottom right', - ].map((mode) => { - return ( - - - - ) - })} - - -} -export default App; -``` + ::: @@ -270,26 +82,7 @@ export default App; :::demo -```tsx -import React from 'react' -import { Image } from '@nutui/nutui-react-taro' -import { ScrollView } from '@tarojs/components' - -const App = () => { - return <> - - {[ - ...new Array(3).fill(src), - 'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg', - 'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg', - ].map((_) => { - return - })} - - -} -export default App -``` + ::: diff --git a/src/packages/image/doc.zh-TW.md b/src/packages/image/doc.zh-TW.md index 2d8a710656..eccc968685 100644 --- a/src/packages/image/doc.zh-TW.md +++ b/src/packages/image/doc.zh-TW.md @@ -18,23 +18,7 @@ import { Image } from '@nutui/nutui-react'; :::demo -```tsx -import React from "react"; -import { Image } from '@nutui/nutui-react'; - -const App = () => { - const src = 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' - return <> - { - console.log('click image') - }} - /> - -} -export default App; -``` + ::: @@ -44,33 +28,7 @@ export default App; :::demo -```tsx -import React from "react"; -import { Image, Row, Col } from '@nutui/nutui-react'; - -const App = () => { - const fits = ['contain', 'cover', 'fill', 'none', 'scale-down'] - const src = 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' - const imageText = { - marginTop: 5, - textAlign: 'center', - color: '#999' - } - return <> - - {fits.map((i) => { - return ( - - -
{i}
- - ) - })} - - -} -export default App; -``` + ::: @@ -80,56 +38,7 @@ export default App; :::demo -```tsx -import React from "react"; -import { Image, Row, Col } from '@nutui/nutui-react'; - -const App = () => { - const position1 = ['left', 'center', 'right'] - const position2 = ['top', 'center', 'bottom'] - const src = 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' - const imageText = { - marginTop: 5, - textAlign: 'center', - color: '#999' - } - return <> - - {position2.map((i) => { - return ( - - -
contain
-
{i}
- - ) - })} - {position1.map((i) => { - return ( - - -
cover
-
{i}
- - ) - })} - - -} -export default App; -``` + ::: @@ -139,54 +48,7 @@ export default App; :::demo -```tsx -import React from "react"; -import { Image, Row, Col } from '@nutui/nutui-react'; - -const App = () => { - const src = 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' - const imageText = { - marginTop: 5, - textAlign: 'center', - color: '#999' - } - return <> - - - -
contain
- - - -
cover
- - - -
cover
- - - -} -export default App; -``` + ::: @@ -196,40 +58,7 @@ export default App; :::demo -```tsx -import React from "react"; -import { Image, Row, Col } from '@nutui/nutui-react'; -import { Loading } from '@nutui/icons-react'; - -const App = () => { - const src = 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' - const imageText = { - marginTop: 5, - textAlign: 'center', - color: '#999' - } - return <> - - - { - console.log('image onload') - }} - /> -
默认
- - - } /> -
自定义
- - - -} -export default App; -``` + ::: @@ -239,44 +68,7 @@ export default App; :::demo -```tsx -import React from "react"; -import { Image, Row, Col } from '@nutui/nutui-react'; -import { Failure } from '@nutui/icons-react'; - -const App = () => { - const imageText = { - marginTop: 5, - textAlign: 'center', - color: '#999' - } - return <> - - - { - console.log('image error') - }} - /> -
默认
- - - } - /> -
自定义
- - - -} -export default App; -``` + ::: @@ -286,32 +78,7 @@ export default App; :::demo -```tsx -import React from "react"; -import { Image } from '@nutui/nutui-react'; - -const App = () => { - return <> - { - console.log('image error') - }} - /> -
- 雪紡衫女2021年春季新款洋氣輕熟上衣 -
- -} -export default App; -``` + ::: @@ -321,52 +88,7 @@ export default App; :::demo -```tsx -import React from "react"; -import { Image,Cell } from '@nutui/nutui-react'; - -const App = () => { - const src = - '//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg' - const imageData = [1, 2, 3, 4, 5, 6] - const placeholderImg = ( - - ) - const style = ` - .lazy-box{ - width:100% - } - .lazy-box .nut-image{ - margin-bottom: 10px; - } -` - return <> - - -
- {imageData.map((item) => { - return ( - - ) - })} -
- - -} -export default App; -``` + :::