Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 88f7bd06 编写于 作者: E eiinu 提交者： GitHub
浏览文件
操作

chore(image): icon 组件替换 (#772) 

* chore(image): icon 组件替换

* docs(image): 格式化 demo 代码
上级 c3bd6bb0
隐藏空白更改
内联 并排
Showing with 180 addition and 226 deletion
src/packages/image/demo.taro.tsx
浏览文件 @ 88f7bd06
import React from 'react'
import Taro from '@tarojs/taro'
import { CircleClose, Loading } from '@nutui/icons-react-taro'
import { useTranslate } from '@/sites/assets/locale/taro'
import { Image, Cell, Row, Col, Icon } from '@/packages/nutui.react.taro'
import { Image, Cell, Row, Col } from '@/packages/nutui.react.taro'
import '@/packages/image/demo.scss'
import Header from '@/sites/components/header'
import Taro from '@tarojs/taro'
const ImageDemo = () => {
const [translated] = useTranslate({
......@@ -44,18 +45,14 @@ const ImageDemo = () => {
<Cell>
<Row gutter={10}>
<Col span="8">
<Image width="80" height="80" showLoading />
<Image width="80" height="80" />
<div className="image-text">{translated.default}</div>
</Col>
<Col span="8">
<Image
width="80"
height="80"
slotLoding={
<>
<Icon name="loading" />
</>
}
slotLoding={<Loading className="nut-icon-loading" />}
/>
<div className="image-text">{translated.custom}</div>
</Col>
......@@ -66,13 +63,16 @@ const ImageDemo = () => {
<Cell>
<Row gutter={10}>
<Col span="8">
<Image src="#" width="80" height="80" showError />
<Image src="https://x" width="80" height="80" />
<div className="image-text">{translated.default}</div>
</Col>
<Col span="8">
<Image src="#" width="80" height="80" showError>
<Icon name="circle-close" />
</Image>
<Image
src="https://x"
width="100"
height="100"
slotError={<CircleClose />}
/>
<div className="image-text">{translated.custom}</div>
</Col>
</Row>
......
src/packages/image/demo.tsx
浏览文件 @ 88f7bd06
import React from 'react'
import { CircleClose, 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 Icon from '@/packages/icon'
import Cell from '@/packages/cell'
const ImageDemo = () => {
......@@ -153,7 +153,6 @@ const ImageDemo = () => {
<Image
width="100"
height="100"
showLoading
isLazy
onLoad={() => {
console.log('image onload')
......@@ -166,11 +165,7 @@ const ImageDemo = () => {
width="100"
height="100"
isLazy
slotLoding={
<>
<Icon name="loading" />
</>
}
slotLoding={<Loading className="nut-icon-loading" />}
/>
<div className="image-text">{translated.custom}</div>
</Col>
......@@ -185,7 +180,6 @@ const ImageDemo = () => {
src="https://x"
width="100"
height="100"
showError
onError={() => {
console.log('image error')
}}
......@@ -193,9 +187,12 @@ const ImageDemo = () => {
<div className="image-text">{translated.default}</div>
</Col>
<Col span="8">
<Image src="https://x" width="100" height="100" showError>
<Icon name="circle-close" />
</Image>
<Image
src="https://x"
width="100"
height="100"
slotError={<CircleClose />}
/>
<div className="image-text">{translated.custom}</div>
</Col>
</Row>
......@@ -210,8 +207,6 @@ const ImageDemo = () => {
height="150"
src={src}
isLazy
showError
showLoading
loadingImg={placeholderImg}
errorImg={placeholderImg}
/>
......
src/packages/image/doc.en-US.md
浏览文件 @ 88f7bd06
......@@ -23,7 +23,7 @@ import React from "react";
import { Image } from '@nutui/nutui-react';
const App = () => {
const src =
const src =
'//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg'
return <>
<Image src={src} width="100" height="100" />
......@@ -44,19 +44,18 @@ import React from "react";
import { Image } from '@nutui/nutui-react';
const App = () => {
const src =
const src =
'//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg'
return <>
<Image
src={src}
width="100"
height="100"
fit="contain"
src={src}
width="100"
height="100"
fit="contain"
/>
</>
}
export default App;
```
:::
......@@ -70,20 +69,19 @@ import React from "react";
import { Image } from '@nutui/nutui-react';
const App = () => {
const src =
const src =
'//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg'
return <>
<Image
src={src}
width="100"
height="100"
fit="contain"
position="left"
src={src}
width="100"
height="100"
fit="contain"
position="left"
/>
</>
}
export default App;
```
:::
......@@ -97,70 +95,67 @@ import React from "react";
import { Image } from '@nutui/nutui-react';
const App = () => {
const src =
const src =
'//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg'
return <>
<Image
src={src}
width="100"
height="100"
round
src={src}
width="100"
height="100"
round
/>
</>
}
export default App;
```
:::
### Loading
The Image component provides a default loading prompt and supports custom content through the loading slot.
The Image component provides a default loading prompt and supports custom content through `slotLoading`.
:::demo
```tsx
import React from "react";
import { Image, Icon } from '@nutui/nutui-react';
import { Image } from '@nutui/nutui-react';
import { Loading } from '@nutui/icons-react';
const App = () => {
const src =
const src =
'//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg'
return <>
<Image
width="100"
height="100"
showLoading
slotLoding={
<>
<Icon name="loading" />
</>
}
width="100"
height="100"
slotLoding={<Loading className="nut-icon-loading" />}
/>
</>
}
export default App;
```
:::
### Error
The Image component provides a default loading failure warning and supports custom content through the error slot.
The Image component provides a default loading failure warning and supports custom content through `slotError`.
:::demo
```tsx
import React from "react";
import { Image, Icon } from '@nutui/nutui-react';
import { Image } from '@nutui/nutui-react';
import { CircleClose } from '@nutui/icons-react';
const App = () => {
return <>
<Image src="https://x" width="100" height="100" showError>
<Icon name="circle-close" />
</Image>
<Image
src="https://x"
width="100"
height="100"
slotError={<CircleClose />}
/>
</>
}
export default App;
```
:::
......@@ -174,11 +169,11 @@ 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 = 'https://img12.360buyimg.com/imagetools/jfs/t1/180776/26/8319/4587/60c094a8E1ef2ec9d/940780b87700b1d3.png'
const style = `
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 = 'https://img12.360buyimg.com/imagetools/jfs/t1/180776/26/8319/4587/60c094a8E1ef2ec9d/940780b87700b1d3.png'
const style = `
.lazy-box{
width:100%
}
......@@ -187,29 +182,26 @@ const style = `
}
`
return <>
<style>{style}</style>
<style>{style}</style>
<Cell>
<div className="lazy-box">
<div className="lazy-box">
{imageData.map((item) => {
return (
return (
<Image
key={item}
height="150"
src={src}
isLazy
showError
showLoading
loadingImg={placeholderImg}
errorImg={placeholderImg}
key={item}
height="150"
src={src}
isLazy
loadingImg={placeholderImg}
errorImg={placeholderImg}
/>
)
)
})}
</div>
</div>
</Cell>
</>
}
export default App;
```
:::
......@@ -229,6 +221,8 @@ export default App;
| radius | Border Raduis | string \| number | - |
| showError | Whether to show error placeholder| boolean | `true` |
| showLoading | Whether to show loading placeholder | boolean | `true` |
| loading | Custom loading placeholder | ReactNode | `<Image />` |
| error | Custom error placeholder | ReactNode | `<ImageError />` |
| isLazy `v1.4.6` | Whether to show image lazyload | boolean | `false` |
| loadingImg `v1.4.6` | Set the prompt image during loading, which conflicts with `slotLoding` and has a higher priority than `slotLoding` | string | - |
| errorImg `v1.4.6` | Set the error prompt image, which conflicts with `slotError` and has a higher priority than `slotError` | string | - |
......@@ -253,13 +247,6 @@ export default App;
| bottom | Align Bottom |
| left | Align Left |
### Slots
| Attribute | Description |
|--------------|----------------------------------|
| loading | Custom loading placeholder |
| error | Custom error placeholder |
### Events
| Event | Description | Arguments |
......
src/packages/image/doc.md
浏览文件 @ 88f7bd06
......@@ -23,14 +23,13 @@ import React from "react";
import { Image } from '@nutui/nutui-react';
const App = () => {
const src =
const src =
'//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg'
return <>
<Image src={src} width="100" height="100" />
</>
}
export default App;
```
:::
......@@ -44,19 +43,18 @@ import React from "react";
import { Image } from '@nutui/nutui-react';
const App = () => {
const src =
const src =
'//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg'
return <>
<Image
src={src}
width="100"
height="100"
fit="contain"
src={src}
width="100"
height="100"
fit="contain"
/>
</>
}
export default App;
```
:::
......@@ -70,20 +68,19 @@ import React from "react";
import { Image } from '@nutui/nutui-react';
const App = () => {
const src =
const src =
'//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg'
return <>
<Image
src={src}
width="100"
height="100"
fit="contain"
position="left"
src={src}
width="100"
height="100"
fit="contain"
position="left"
/>
</>
}
export default App;
```
:::
......@@ -97,70 +94,67 @@ import React from "react";
import { Image } from '@nutui/nutui-react';
const App = () => {
const src =
const src =
'//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg'
return <>
<Image
src={src}
width="100"
height="100"
round
src={src}
width="100"
height="100"
round
/>
</>
}
export default App;
```
:::
### 加载中图片
`Image` 组件提供了默认的加载中提示，支持通过 `loading` 插槽自定义内容。
`Image` 组件提供了默认的加载中提示，支持通过 `slotLoading` 自定义内容。
:::demo
```tsx
import React from "react";
import { Image, Icon } from '@nutui/nutui-react';
import { Image } from '@nutui/nutui-react';
import { Loading } from '@nutui/icons-react';
const App = () => {
const src =
const src =
'//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg'
return <>
<Image
width="100"
height="100"
showLoading
slotLoding={
<>
<Icon name="loading" />
</>
}
width="100"
height="100"
slotLoding={<Loading className="nut-icon-loading" />}
/>
</>
}
export default App;
```
:::
### 加载失败
`Image` 组件提供了默认的加载失败提示，支持通过 `error` 插槽自定义内容。
`Image` 组件提供了默认的加载失败提示，支持通过 `slotError` 自定义内容。
:::demo
```tsx
import React from "react";
import { Image, Icon } from '@nutui/nutui-react';
import { Image } from '@nutui/nutui-react';
import { CircleClose } from '@nutui/icons-react';
const App = () => {
return <>
<Image src="https://x" width="100" height="100" showError>
<Icon name="circle-close" />
</Image>
<Image
src="https://x"
width="100"
height="100"
slotError={<CircleClose />}
/>
</>
}
export default App;
```
:::
......@@ -174,11 +168,11 @@ import React from "react";
import { Image,Cell } from '@nutui/nutui-react';
const App = () => {
const src =
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 = 'https://img12.360buyimg.com/imagetools/jfs/t1/180776/26/8319/4587/60c094a8E1ef2ec9d/940780b87700b1d3.png'
const style = `
const imageData = [1, 2, 3, 4, 5, 6]
const placeholderImg = 'https://img12.360buyimg.com/imagetools/jfs/t1/180776/26/8319/4587/60c094a8E1ef2ec9d/940780b87700b1d3.png'
const style = `
.lazy-box{
width:100%
}
......@@ -187,29 +181,26 @@ const style = `
}
`
return <>
<style>{style}</style>
<style>{style}</style>
<Cell>
<div className="lazy-box">
<div className="lazy-box">
{imageData.map((item) => {
return (
return (
<Image
key={item}
height="150"
src={src}
isLazy
showError
showLoading
loadingImg={placeholderImg}
errorImg={placeholderImg}
key={item}
height="150"
src={src}
isLazy
loadingImg={placeholderImg}
errorImg={placeholderImg}
/>
)
)
})}
</div>
</div>
</Cell>
</>
}
export default App;
```
:::
......@@ -230,6 +221,8 @@ export default App;
| radius | 圆角大小 | string \| number | - |
| showError | 是否展示图片加载失败| boolean | `true` |
| showLoading | 是否展示加载中图片 | boolean | `true` |
| slotLoding | 自定义加载中的提示内容 | ReactNode | `<Image />` |
| slotError | 自定义记载失败的提示内容 | ReactNode | `<ImageError />` |
| isLazy `v1.4.6` | 是否为懒加载图片 | boolean | `false` |
| loadingImg `v1.4.6` | 设置加载中提示图片，与slotLoding冲突，优先级高于slotLoding | string | - |
| errorImg `v1.4.6` | 设置错误提示图片，与slotError冲突，优先级高于slotError | string | - |
......@@ -254,13 +247,6 @@ export default App;
| bottom | 底部对齐 |
| left | 左侧对齐 |
### Slots
| 参数 | 说明 |
|--------------|----------------------------------|
| slotLoding | 自定义加载中的提示内容 |
| slotError | 自定义记载失败的提示内容 |
### Events
| 事件名 | 说明 | 回调参数 |
......
src/packages/image/doc.zh-TW.md
浏览文件 @ 88f7bd06
......@@ -23,14 +23,13 @@ import React from "react";
import { Image } from '@nutui/nutui-react';
const App = () => {
const src =
const src =
'//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg'
return <>
<Image src={src} width="100" height="100" />
</>
}
export default App;
```
:::
......@@ -44,19 +43,18 @@ import React from "react";
import { Image } from '@nutui/nutui-react';
const App = () => {
const src =
const src =
'//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg'
return <>
<Image
src={src}
width="100"
height="100"
fit="contain"
src={src}
width="100"
height="100"
fit="contain"
/>
</>
}
export default App;
```
:::
......@@ -70,20 +68,19 @@ import React from "react";
import { Image } from '@nutui/nutui-react';
const App = () => {
const src =
const src =
'//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg'
return <>
<Image
src={src}
width="100"
height="100"
fit="contain"
position="left"
src={src}
width="100"
height="100"
fit="contain"
position="left"
/>
</>
}
export default App;
```
:::
......@@ -97,69 +94,66 @@ import React from "react";
import { Image } from '@nutui/nutui-react';
const App = () => {
const src =
const src =
'//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg'
return <>
<Image
src={src}
width="100"
height="100"
round
src={src}
width="100"
height="100"
round
/>
</>
}
export default App;
```
:::
### 加載中圖片
`Image` 組件提供了默認的加載中提示，支持通過 `loading` 插槽自定義內容。
`Image` 組件提供了默認的加載中提示，支持通過 `slotLoading` 插槽自定義內容。
:::demo
```tsx
import React from "react";
import { Image, Icon } from '@nutui/nutui-react';
import { Image } from '@nutui/nutui-react';
import { Loading } from '@nutui/icons-react';
const App = () => {
const src =
const src =
'//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg'
return <>
<Image
width="100"
height="100"
showLoading
slotLoding={
<>
<Icon name="loading" />
</>
}
width="100"
height="100"
slotLoding={<Loading className="nut-icon-loading" />}
/>
</>
}
export default App;
```
:::
### 加載失敗
`Image` 組件提供了默認的加載失敗提示，支持通過 `error` 插槽自定義內容。
`Image` 組件提供了默認的加載失敗提示，支持通過 `slotError` 插槽自定義內容。
:::demo
```tsx
import React from "react";
import { Image, Icon } from '@nutui/nutui-react';
import { Image } from '@nutui/nutui-react';
import { CircleClose } from '@nutui/icons-react';
const App = () => {
return <>
<Image src="https://x" width="100" height="100" showError>
<Icon name="circle-close" />
</Image>
<Image
src="https://x"
width="100"
height="100"
slotError={<CircleClose />}
/>
</>
}
export default App;
```
:::
......@@ -173,11 +167,11 @@ 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 = 'https://img12.360buyimg.com/imagetools/jfs/t1/180776/26/8319/4587/60c094a8E1ef2ec9d/940780b87700b1d3.png'
const style = `
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 = 'https://img12.360buyimg.com/imagetools/jfs/t1/180776/26/8319/4587/60c094a8E1ef2ec9d/940780b87700b1d3.png'
const style = `
.lazy-box{
width:100%
}
......@@ -186,29 +180,26 @@ const style = `
}
`
return <>
<style>{style}</style>
<style>{style}</style>
<Cell>
<div className="lazy-box">
<div className="lazy-box">
{imageData.map((item) => {
return (
return (
<Image
key={item}
height="150"
src={src}
isLazy
showError
showLoading
loadingImg={placeholderImg}
errorImg={placeholderImg}
key={item}
height="150"
src={src}
isLazy
loadingImg={placeholderImg}
errorImg={placeholderImg}
/>
)
)
})}
</div>
</div>
</Cell>
</>
}
export default App;
```
:::
......@@ -229,6 +220,8 @@ export default App;
| radius | 圓角大小 | string \| number | - |
| showError | 是否展示圖片加載失敗| boolean | `true` |
| showLoading | 是否展示加載中圖片 | boolean | `true` |
| slotLoding | 自定義加載中的提示內容 | ReactNode | `<Image />` |
| slotError | 自定義記載失敗的提示內容 | ReactNode | `<ImageError />` |
| isLazy `v1.4.6` | 是否為懶加載圖片 | boolean | `false` |
| loadingImg `v1.4.6` | 設置加載中提示圖片，與slotLoding衝突，優先級高於slotLoding | string | - |
| errorImg `v1.4.6` | 設置錯誤提示圖片，與slotError衝突，優先級高於slotError | string | - |
......@@ -253,13 +246,6 @@ export default App;
| bottom | 底部對齊 |
| left | 左側對齊 |
### Slots
| 參數 | 說明 |
|--------------|----------------------------------|
| slotLoding | 自定義加載中的提示內容 |
| slotError | 自定義記載失敗的提示內容 |
### Events
| 事件名 | 說明 | 回調參數 |
......
src/packages/image/image.taro.tsx
浏览文件 @ 88f7bd06
import React, { FunctionComponent, useState, useEffect } from 'react'
import { Image as ImageIcon, ImageError } from '@nutui/icons-react-taro'
import { useConfig } from '@/packages/configprovider/configprovider.taro'
import Icon from '@/packages/icon/index.taro'
export interface ImageProps {
className: string
......@@ -16,7 +16,7 @@ export interface ImageProps {
showError: boolean
showLoading: boolean
slotLoding: React.ReactNode
slotError: React.ReactNode | string
slotError: React.ReactNode
onClick?: (e: MouseEvent) => void
onLoad?: () => void
onError?: () => void
......@@ -134,13 +134,13 @@ export const Image: FunctionComponent<
/>
{showLoading && loading ? (
<div className="nut-img-loading">
{slotLoding || children || <Icon name="image" />}
{slotLoding || children || <ImageIcon />}
</div>
) : null}
{showError && isError && !loading ? (
<div className="nut-img-error">
{slotError || children || <Icon name="image-error" />}
{slotError || children || <ImageError />}
</div>
) : null}
</div>
......
src/packages/image/image.tsx
浏览文件 @ 88f7bd06
import React, { FunctionComponent, useState, useEffect, useRef } from 'react'
import { Image as ImageIcon, ImageError } from '@nutui/icons-react'
import { useConfig } from '@/packages/configprovider'
import Icon from '@/packages/icon'
export interface ImageProps {
className: string
......@@ -16,7 +16,7 @@ export interface ImageProps {
showError: boolean
showLoading: boolean
slotLoding: React.ReactNode
slotError: React.ReactNode | string
slotError: React.ReactNode
isLazy?: boolean
loadingImg?: string
errorImg?: string
......@@ -208,13 +208,13 @@ export const Image: FunctionComponent<
)}
{loading && showLoading ? (
<div className="nut-img-loading" style={loadingBg}>
{!loadingImg && (slotLoding || children || <Icon name="image" />)}
{!loadingImg && (slotLoding || children || <ImageIcon />)}
</div>
) : null}
{isError && showError && !loading ? (
<div className="nut-img-error" style={errorBg}>
{!errorImg && (slotError || children || <Icon name="image-error" />)}
{!errorImg && (slotError || children || <ImageError />)}
</div>
) : null}
</div>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或