Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

未验证 提交 8dd7c675 编写于 作者: O oasis-cloud 提交者： GitHub
浏览文件
操作

docs: imagepreview 组件增加点击缩略图切换示例 (#854) 

* docs: imagepreview 组件增加点击缩略图切换
上级 cc9663cb
隐藏空白更改
内联 并排
Showing with 350 addition and 122 deletion
src/packages/imagepreview/demo.taro.tsx
浏览文件 @ 8dd7c675
import React, { useState } from 'react'
import Taro from '@tarojs/taro'
import { Cell, ImagePreview } from '@/packages/nutui.react.taro'
import { useTranslate } from '@/sites/assets/locale/taro'
import Header from '@/sites/components/header'
import Taro from '@tarojs/taro'
interface T {
basic: string
......@@ -10,6 +10,7 @@ interface T {
withInitNo: string
withPagination: string
withVideos: string
thumb: string
}
const images = [
......@@ -35,6 +36,7 @@ const ImagePreviewDemo = () => {
withInitNo: '设置初始页码',
withPagination: '设置轮播指示器及颜色',
withVideos: '视频、图片预览',
thumb: '点击缩略图切换',
},
'en-US': {
basic: 'Basic usage',
......@@ -42,6 +44,7 @@ const ImagePreviewDemo = () => {
withInitNo: 'With Init No',
withPagination: 'With Pagination',
withVideos: 'With Videos',
thumb: 'Click image to switch',
},
})
......@@ -73,6 +76,7 @@ const ImagePreviewDemo = () => {
setShowPreview3(false)
}
const [init, setInit] = useState<any>(0)
return (
<>
<Header />
......@@ -80,6 +84,24 @@ const ImagePreviewDemo = () => {
<h2>{translated.basic}</h2>
<ImagePreview images={images} show={showPreview1} onClose={hideFn1} />
<Cell title={translated.showPreview} isLink onClick={showFn1} />
<h2>{translated.thumb}</h2>
<Cell style={{ position: 'relative', zIndex: 10000 }}>
{images.map((image, index) => (
<span
key={image.src}
onClick={() => setInit(index + 1)}
style={{ marginRight: '10px' }}
>
<img width="30px" height="30px" src={image.src} alt={image.src} />
</span>
))}
</Cell>
<ImagePreview
images={images}
show={init}
initNo={init}
onClose={hideFn2}
/>
<h2>{translated.withInitNo}</h2>
<ImagePreview
images={images}
......
src/packages/imagepreview/demo.tsx
浏览文件 @ 8dd7c675
......@@ -9,6 +9,7 @@ interface T {
withInitNo: string
withPagination: string
withVideos: string
thumb: string
}
const images = [
......@@ -57,6 +58,7 @@ const ImagePreviewDemo = () => {
withInitNo: '设置初始页码',
withPagination: '设置轮播指示器及颜色',
withVideos: '视频、图片预览',
thumb: '点击缩略图切换',
},
'en-US': {
basic: 'Basic usage',
......@@ -64,6 +66,7 @@ const ImagePreviewDemo = () => {
withInitNo: 'With Init No',
withPagination: 'With Pagination',
withVideos: 'With Videos',
thumb: 'Click image to switch',
},
})
......@@ -103,21 +106,46 @@ const ImagePreviewDemo = () => {
const hideFn4 = () => {
setShowPreview4(false)
}
const [init, setInit] = useState<any>(0)
return (
<>
<div className="demo">
<h2>{translated.basic}</h2>
<ImagePreview images={images} show={showPreview1} onClose={hideFn1} />
<Cell title={translated.showPreview} isLink onClick={showFn1} />
<h2>{translated.thumb}</h2>
<Cell style={{ position: 'relative', zIndex: 10000 }}>
{images.map((image, index) => (
<span
key={image.src}
onClick={() => setInit(index + 1)}
style={{ marginRight: '10px' }}
>
<img width={30} height={30} src={image.src} alt={image.src} />
</span>
))}
</Cell>
<ImagePreview
images={images}
show={init}
initNo={init}
onClose={hideFn2}
/>
<h2>{translated.withInitNo}</h2>
<ImagePreview
images={images}
show={showPreview2}
initNo={3}
initNo={init}
onClose={hideFn2}
/>
<Cell title={translated.withInitNo} isLink onClick={showFn2} />
<Cell
title={translated.withInitNo}
isLink
onClick={() => {
showFn2()
setTimeout(() => setInit(1), 3000)
}}
/>
<h2>{translated.withPagination}</h2>
<ImagePreview
images={images}
......
src/packages/imagepreview/doc.en-US.md
浏览文件 @ 8dd7c675
......@@ -58,6 +58,63 @@ export default App;
```
:::
### Click on the thumbnail to switch
:::demo
```tsx
import React, { useState } from 'react';
import { ImagePreview, Cell } from '@nutui/nutui-react';
const App = () => {
const images = [
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
}
];
const [init, setInit] = useState(0);
return (
<>
<Cell style={{ position: 'relative', zIndex: 10000 }}>
{images.map((image, index) =>
(<span
key={image.src}
onClick={() => setInit(index + 1)}
style={{ marginRight: '10px' }}
>
<img width={30}
height={30}
src={image.src}
alt={image.src}
/>
</span>)
)}
</Cell>
<ImagePreview
images={images}
show={init}
initNo={init}
onClose={hideFn2}
/>
</>
);
};
export default App;
```
:::
### With Init No
:::demo
......
src/packages/imagepreview/doc.md
浏览文件 @ 8dd7c675
# ImagePreview组件
# ImagePreview组件
### 介绍
......@@ -6,7 +6,6 @@
### 安装
```ts
// react
import { ImagePreview } from '@nutui/nutui-react'
......@@ -17,199 +16,264 @@ import { ImagePreview } from '@nutui/nutui-react'
### 基础用法
:::demo
```tsx
import React, { useState } from 'react';
import { ImagePreview, Cell } from '@nutui/nutui-react';
const App = () => {
const images = [
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
}
];
const [showPreview1, setShowPreview1] = useState(false);
const showFn1 = () => {
setShowPreview1(true)
const images = [
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
}
];
const [showPreview1, setShowPreview1] = useState(false);
const showFn1 = () => {
setShowPreview1(true)
}
const hideFn1 = () => {
setShowPreview1(false)
}
return (
<>
<ImagePreview images={images} show={showPreview1} onClose={hideFn1} />
<Cell title="展示图片预览" isLink onClick={showFn1} />
</>
);
};
export default App;
```
:::
### 点击缩略图切换
:::demo
```tsx
import React, { useState } from 'react';
import { ImagePreview, Cell } from '@nutui/nutui-react';
const hideFn1 =() => {
setShowPreview1(false)
const App = () => {
const images = [
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
}
];
const [init, setInit] = useState(0);
return (
<>
<ImagePreview images={images} show={showPreview1} onClose={hideFn1} />
<Cell title="展示图片预览" isLink onClick={showFn1} />
<Cell style={{ position: 'relative', zIndex: 10000 }}>
{images.map((image, index) =>
(<span
key={image.src}
onClick={() => setInit(index + 1)}
style={{ marginRight: '10px' }}
>
<img width={30}
height={30}
src={image.src}
alt={image.src}
/>
</span>)
)}
</Cell>
<ImagePreview
images={images}
show={init}
initNo={init}
onClose={hideFn2}
/>
</>
);
};
export default App;
```
:::
### 设置初始页码
:::demo
```tsx
import React, { useState } from 'react';
import { ImagePreview, Cell } from '@nutui/nutui-react';
const App = () => {
const images = [
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
}
];
const [showPreview2, setShowPreview2] = useState(false);
const showFn2 = () => {
setShowPreview2(true)
const images = [
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
}
];
const [showPreview2, setShowPreview2] = useState(false);
const hideFn2 =() => {
setShowPreview2(false)
}
const showFn2 = () => {
setShowPreview2(true)
}
const hideFn2 = () => {
setShowPreview2(false)
}
return (
<>
<ImagePreview images={images} initNo={3} show={showPreview2} onClose={hideFn2} />
<Cell title="设置初始页码" isLink onClick={showFn2} />
<ImagePreview images={images} initNo={3} show={showPreview2}
onClose={hideFn2} />
<Cell title="设置初始页码" isLink onClick={showFn2} />
</>
);
};
export default App;
```
:::
### 设置轮播指示器及颜色
:::demo
```tsx
import React, { useState } from 'react';
import { ImagePreview, Cell } from '@nutui/nutui-react';
const App = () => {
const images = [
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
}
];
const [showPreview3, setShowPreview3] = useState(false);
const showFn3 = () => {
setShowPreview3(true)
const images = [
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
}
];
const [showPreview3, setShowPreview3] = useState(false);
const hideFn3 =() => {
setShowPreview3(false)
}
const showFn3 = () => {
setShowPreview3(true)
}
const hideFn3 = () => {
setShowPreview3(false)
}
return (
<>
<ImagePreview images={images} show={showPreview3} paginationVisible paginationColor="red" onClose={hideFn3} />
<Cell title="设置轮播指示器及颜色" isLink onClick={showFn3} />
<ImagePreview images={images} show={showPreview3} paginationVisible
paginationColor="red" onClose={hideFn3} />
<Cell title="设置轮播指示器及颜色" isLink onClick={showFn3} />
</>
);
};
export default App;
```
:::
### 视频、图片预览
:::demo
```tsx
import React, { useState } from 'react';
import { ImagePreview, Cell } from '@nutui/nutui-react';
const App = () => {
const images = [
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
}
];
const videos = [
{
source: {
src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
type: 'video/mp4'
},
options: {
muted: true,
controls: true
}
},
{
source: {
src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
type: 'video/mp4'
},
options: {
muted: true,
controls: true
}
}
]
const [showPreview4, setShowPreview4] = useState(false);
const showFn4 = () => {
setShowPreview4(true)
const images = [
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
}
const hideFn4 =() => {
setShowPreview4(false)
];
const videos = [
{
source: {
src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
type: 'video/mp4'
},
options: {
muted: true,
controls: true
}
},
{
source: {
src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
type: 'video/mp4'
},
options: {
muted: true,
controls: true
}
}
]
const [showPreview4, setShowPreview4] = useState(false);
const showFn4 = () => {
setShowPreview4(true)
}
const hideFn4 = () => {
setShowPreview4(false)
}
return (
<>
<ImagePreview images={images} videos={videos} show={showPreview4} onClose={hideFn4} />
<Cell title="视频、图片预览" isLink onClick={showFn4} />
<ImagePreview images={images} videos={videos} show={showPreview4}
onClose={hideFn4} />
<Cell title="视频、图片预览" isLink onClick={showFn4} />
</>
);
};
export default App;
```
:::
:::
## API
......
src/packages/imagepreview/doc.taro.md
浏览文件 @ 8dd7c675
......@@ -55,6 +55,63 @@ const App = () => {
};
export default App;
```
:::
### 点击缩略图切换
:::demo
```tsx
import React, { useState } from 'react';
import { ImagePreview, Cell } from '@nutui/nutui-react-taro';
const App = () => {
const images = [
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
},
{
src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
}
];
const [init, setInit] = useState(0);
return (
<>
<Cell style={{ position: 'relative', zIndex: 10000 }}>
{images.map((image, index) =>
(<span
key={image.src}
onClick={() => setInit(index + 1)}
style={{ marginRight: '10px' }}
>
<img width={30}
height={30}
src={image.src}
alt={image.src}
/>
</span>)
)}
</Cell>
<ImagePreview
images={images}
show={init}
initNo={init}
onClose={hideFn2}
/>
</>
);
};
export default App;
```
:::
### 设置初始页码
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或