Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

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

提交 6249ecc8 编写于 作者: O oasis-cloud
浏览文件
操作

Merge branch 'chore/iconnode' of https://github.com/jdf2e/nutui-react into chore/iconnode

上级 50d91da2 15b4429f
隐藏空白更改
内联 并排
Showing with 393 addition and 463 deletion
src/packages/backtop/backtop.taro.tsx
浏览文件 @ 6249ecc8
import React, { FunctionComponent, useState } from 'react'
import React, { FunctionComponent, ReactNode, useState } from 'react'
import { usePageScroll, pageScrollTo } from '@tarojs/taro'
import Icon from '@/packages/icon/index.taro'
import { Top } from '@nutui/icons-react-taro'
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
declare const window: any
......@@ -15,7 +14,7 @@ export interface BackTopProps extends BasicComponent {
zIndex: number
isAnimation: boolean
duration: number
children?: HTMLElement | any
children?: ReactNode
style?: React.CSSProperties
onClick?: (event: MouseEvent) => void
}
......@@ -46,8 +45,6 @@ export const BackTop: FunctionComponent<
duration,
style,
onClick,
iconClassPrefix,
iconFontClassName,
} = {
...defaultProps,
...props,
......@@ -85,13 +82,7 @@ export const BackTop: FunctionComponent<
}}
>
{children || (
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
size="19px"
className="nut-backtop-main"
name="top"
/>
<Top width={19} height={19} className="nut-backtop-main" />
)}
</div>
</>
......
src/packages/backtop/backtop.tsx
浏览文件 @ 6249ecc8
import React, { FunctionComponent, useEffect, useState, useRef } from 'react'
import Icon from '@/packages/icon'
import React, {
FunctionComponent,
useEffect,
useState,
useRef,
ReactNode,
} from 'react'
import { Top } from '@nutui/icons-react'
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
declare const window: any
......@@ -14,7 +19,7 @@ export interface BackTopProps extends BasicComponent {
zIndex: number
isAnimation: boolean
duration: number
children?: HTMLElement | any
children?: ReactNode
style?: React.CSSProperties
onClick?: (event: MouseEvent) => void
}
......@@ -45,8 +50,6 @@ export const BackTop: FunctionComponent<
duration,
style,
onClick,
iconClassPrefix,
iconFontClassName,
} = {
...defaultProps,
...props,
......@@ -152,15 +155,7 @@ export const BackTop: FunctionComponent<
goTop(e)
}}
>
{children || (
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
size="19px"
className="nut-backtop-main"
name="top"
/>
)}
{children || <Top width={19} height={19} className="nut-backtop-main" />}
</div>
)
}
......
src/packages/backtop/demo.taro.tsx
浏览文件 @ 6249ecc8
import React from 'react'
import { BackTop, Icon } from '@/packages/nutui.react.taro'
import Taro from '@tarojs/taro'
import { Top } from '@nutui/icons-react-taro'
import { BackTop } 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 {
title: string
......@@ -141,7 +142,7 @@ const BackTopDemo = () => {
alignItems: 'center',
}}
>
<Icon size="12px" className="nut-backtop-main" name="top" />
<Top width={12} height={12} className="nut-backtop-main" />
<div style={{ fontSize: '12px' }}>{translated.backText}</div>
</div>
</BackTop>
......
src/packages/backtop/demo.tsx
浏览文件 @ 6249ecc8
import React from 'react'
import { Top } from '@nutui/icons-react'
import { BackTop } from './backtop'
import { useTranslate } from '../../sites/assets/locale'
import Icon from '@/packages/icon'
interface T {
title: string
......@@ -136,11 +136,11 @@ const BackTopDemo = () => {
alignItems: 'center',
}}
>
<Icon size="12px" className="nut-backtop-main" name="top" />
<Top width={12} height={12} />
<div style={{ fontSize: '12px' }}>{translated.backText}</div>
</div>
</BackTop>
<BackTop elId="elId" distance={200} bottom={50} onClick={handleClick} />
{/* <BackTop elId="elId" distance={200} bottom={50} onClick={handleClick} /> */}
</div>
</>
)
......
src/packages/backtop/doc.en-US.md
浏览文件 @ 6249ecc8
......@@ -129,7 +129,8 @@ export default App;
```tsx
import React from "react";
import { BackTop, Icon } from '@nutui/nutui-react';
import { BackTop } from '@nutui/nutui-react';
import { Top } from '@nutui/icons-react';
const App = () => {
const cellStyle = {
......@@ -183,7 +184,7 @@ const App = () => {
alignItems: 'center',
}}
>
<Icon size="12px" className="nut-backtop-main" name="top" />
<Top width={12} height={12} className="nut-backtop-main" />
<div style={{ fontSize: '12px' }}>TOP</div>
</div>
</BackTop>
......
src/packages/backtop/doc.md
浏览文件 @ 6249ecc8
......@@ -132,7 +132,8 @@ export default App;
```tsx
import React from "react";
import { BackTop,Icon } from '@nutui/nutui-react';
import { BackTop } from '@nutui/nutui-react';
import { Top } from '@nutui/icons-react';
const App = () => {
const cellStyle = {
......@@ -186,7 +187,7 @@ const App = () => {
alignItems: 'center',
}}
>
<Icon size="12px" className="nut-backtop-main" name="top" />
<Top width={12} height={12} className="nut-backtop-main" />
<div style={{ fontSize: '12px' }}>顶部</div>
</div>
</BackTop>
......
src/packages/backtop/doc.taro.md
浏览文件 @ 6249ecc8
......@@ -7,7 +7,7 @@
### 安装
```javascript
import { BackTop } from '@/packages/nutui.react.taro'
import { BackTop } from '@nutui/nutui-react-taro'
```
## 代码演示
......@@ -18,7 +18,7 @@ import { BackTop } from '@/packages/nutui.react.taro'
```tsx
import React from "react";
import { BackTop } from '@/packages/nutui.react.taro'
import { BackTop } from '@nutui/nutui-react-taro'
const App = () => {
const cellStyle = {
......@@ -74,7 +74,7 @@ export default App;
```tsx
import React from "react";
import { BackTop} from '@/packages/nutui.react.taro'
import { BackTop} from '@nutui/nutui-react-taro';
const App = () => {
const cellStyle = {
......@@ -129,7 +129,8 @@ export default App;
```tsx
import React from "react";
import { BackTop, Icon } from '@/packages/nutui.react.taro'
import { BackTop } from '@nutui/nutui-react-taro';
import { Top } from '@nutui/icons-react-taro';
const App = () => {
const cellStyle = {
......@@ -179,7 +180,7 @@ const App = () => {
alignItems: 'center',
}}
>
<Icon size="12px" className="nut-backtop-main" name="top" />
<Top width={12} height={12} className="nut-backtop-main" />
<div style={{ fontSize: '12px' }}>顶部</div>
</div>
</BackTop>
......@@ -197,7 +198,7 @@ export default App;
```tsx
import React from "react";
import { BackTop} from '@/packages/nutui.react.taro'
import { BackTop} from '@nutui/nutui-react-taro'
const App = () => {
const cellStyle = {
......
src/packages/backtop/doc.zh-TW.md
浏览文件 @ 6249ecc8
......@@ -131,8 +131,8 @@ export default App;
```tsx
import React from "react";
import { BackTop,Icon } from '@nutui/nutui-react';
import { BackTop } from '@nutui/nutui-react';
import { Top } from '@nutui/icons-react';
const App = () => {
const cellStyle = {
......@@ -186,7 +186,7 @@ const App = () => {
alignItems: 'center',
}}
>
<Icon size="12px" className="nut-backtop-main" name="top" />
<Top width={12} height={12} className="nut-backtop-main" />
<div style={{ fontSize: '12px' }}>顶部</div>
</div>
</BackTop>
......
src/packages/elevator/demo.taro.tsx
浏览文件 @ 6249ecc8
import React from 'react'
import Taro from '@tarojs/taro'
import { Jd } from '@nutui/icons-react-taro'
import { useTranslate } from '@/sites/assets/locale/taro'
import { Elevator, Icon } from '@/packages/nutui.react.taro'
import { Elevator } from '@/packages/nutui.react.taro'
import '@/packages/elevator/demo.scss'
import Header from '@/sites/components/header'
import Taro from '@tarojs/taro'
interface ElevatorData {
name: string
......@@ -519,7 +520,7 @@ const ElevatorDemo = () => {
{(value) => {
return (
<>
<Icon name="JD" size="12" />
<Jd width={12} height={12} />
<span style={{ marginLeft: '15px' }}>{value?.name}</span>
</>
)
......
src/packages/elevator/demo.tsx
浏览文件 @ 6249ecc8
import React from 'react'
import { Jd } from '@nutui/icons-react'
import { Elevator } from './elevator'
import { useTranslate } from '../../sites/assets/locale'
import Icon from '../icon'
import './demo.scss'
interface T {
......@@ -509,7 +509,7 @@ const ElevatorDemo = () => {
{(value) => {
return (
<>
<Icon name="JD" size="12" />
<Jd width={12} height={12} />
<span style={{ marginLeft: '15px' }}>{value?.name}</span>
</>
)
......
src/packages/elevator/doc.en-US.md
浏览文件 @ 6249ecc8
......@@ -378,7 +378,8 @@ export default App
```tsx
import React from 'react'
import { Elevator, Icon } from '@nutui/nutui-react'
import { Elevator } from '@nutui/nutui-react'
import { Jd } from '@nutui/icons-react'
const App = () => {
const dataList = [
......@@ -449,7 +450,7 @@ const App = () => {
{(value) => {
return (
<>
<Icon name="JD" size="12" />
<Jd width={12} height={12} />
<span style={{ marginLeft: '15px' }}>{value?.name}</span>
</>
)
......
src/packages/elevator/doc.md
浏览文件 @ 6249ecc8
......@@ -379,7 +379,8 @@ export default App
```tsx
import React from 'react'
import { Elevator, Icon } from '@nutui/nutui-react'
import { Elevator } from '@nutui/nutui-react'
import { Jd } from '@nutui/icons-react'
const App = () => {
const dataList = [
......@@ -450,7 +451,7 @@ const App = () => {
{(value) => {
return (
<>
<Icon name="JD" size="12" />
<Jd width={12} height={12} />
<span style={{ marginLeft: '15px' }}>{value?.name}</span>
</>
)
......
src/packages/elevator/doc.taro.md
浏览文件 @ 6249ecc8
......@@ -378,7 +378,8 @@ export default App
```tsx
import React from 'react'
import { Elevator, Icon } from '@nutui/nutui-react-taro'
import { Elevator } from '@nutui/nutui-react-taro'
import { Jd } from '@nutui/icons-react-taro'
const App = () => {
const dataList = [
......@@ -449,7 +450,7 @@ const App = () => {
{(value) => {
return (
<>
<Icon name="JD" size="12" />
<Jd width={12} height={12} />
<span style={{ marginLeft: '15px' }}>{value?.name}</span>
</>
)
......
src/packages/elevator/doc.zh-TW.md
浏览文件 @ 6249ecc8
......@@ -378,7 +378,8 @@ export default App
```tsx
import React from 'react'
import { Elevator, Icon } from '@nutui/nutui-react'
import { Elevator } from '@nutui/nutui-react'
import { Jd } from '@nutui/icons-react'
const App = () => {
const dataList = [
......@@ -449,7 +450,7 @@ const App = () => {
{(value) => {
return (
<>
<Icon name="JD" size="12" />
<Jd width={12} height={12} />
<span style={{ marginLeft: '15px' }}>{value?.name}</span>
</>
)
......
src/packages/fixednav/demo.taro.tsx
浏览文件 @ 6249ecc8
import React, { useState, MouseEvent } from 'react'
import { FixedNav, Drag, Icon } from '@/packages/nutui.react.taro'
import Header from '@/sites/components/header'
import Taro from '@tarojs/taro'
import { Retweet } from '@nutui/icons-react-taro'
import { FixedNav, Drag } from '@/packages/nutui.react.taro'
import Header from '@/sites/components/header'
import { useTranslate } from '@/sites/assets/locale/taro'
type TFixedNavDemo = {
......@@ -168,9 +169,7 @@ const FixedNavDemo = () => {
}
slotBtn={
<>
<Icon name="retweet" color="#fff">
{' '}
</Icon>
<Retweet color="#fff" />
<span className="text">
{visible4 ? translated.title4 : translated.title5}
</span>
......
src/packages/fixednav/demo.tsx
浏览文件 @ 6249ecc8
import React, { useState, MouseEvent } from 'react'
import { Retweet } from '@nutui/icons-react'
import { useTranslate } from '../../sites/assets/locale'
import { Icon } from '../icon/icon'
import { FixedNav } from './fixednav'
import Drag from '../drag'
......@@ -168,9 +168,7 @@ const FixedNavDemo = () => {
}
slotBtn={
<>
<Icon name="retweet" color="#fff">
{' '}
</Icon>
<Retweet color="#fff" />
<span className="text">
{visible4 ? translated.title4 : translated.title5}
</span>
......
src/packages/fixednav/doc.en-US.md
浏览文件 @ 6249ecc8
......@@ -309,8 +309,8 @@ export default App;
| type | navigation direction, optional left right | string | `right` |
| overlay | Whether to show the mask when expanding | boolean | `true` |
| position | fixed vertical position | object | `{top: 'auto', bottom: 'auto'}` |
| slotList | Customize expanded list content | HTMLElement | - |
| slotBtn | custom button | HTMLElement | - |
| slotList | Customize expanded list content | ReactNode | - |
| slotBtn | custom button | ReactNode | - |
### Event
......
src/packages/fixednav/doc.md
浏览文件 @ 6249ecc8
......@@ -313,8 +313,8 @@ export default App;
| type | 导航方向,可选值 left right | string | `right` |
| overlay | 展开时是否显示遮罩 | boolean | `true` |
| position | fixed 垂直位置 | object | `{top: 'auto', bottom: 'auto'}` |
| slotList | 自定义展开列表内容 | HTMLElement | - |
| slotBtn | 自定义按钮 | HTMLElement | - |
| slotList | 自定义展开列表内容 | ReactNode | - |
| slotBtn | 自定义按钮 | ReactNode | - |
### Event
......
src/packages/fixednav/doc.taro.md
浏览文件 @ 6249ecc8
......@@ -312,8 +312,8 @@ export default App;
| type | 导航方向,可选值 left right | string | `right` |
| overlay | 展开时是否显示遮罩 | boolean | `true` |
| position | fixed 垂直位置 | object | `{top: 'auto', bottom: 'auto'}` |
| slotList | 自定义展开列表内容 | HTMLElement | - |
| slotBtn | 自定义按钮 | HTMLElement | - |
| slotList | 自定义展开列表内容 | ReactNode | - |
| slotBtn | 自定义按钮 | ReactNode | - |
### Event
......
src/packages/fixednav/doc.zh-TW.md
浏览文件 @ 6249ecc8
......@@ -313,8 +313,8 @@ export default App;
| type | 導航方向,可選值 left right | string | `right` |
| overlay | 展開時是否顯示遮罩 | boolean | `true` |
| position | fixed 垂直位置 | object | `{top: 'auto', bottom: 'auto'}` |
| slotList | 自定義展開列表內容 | HTMLElement | - |
| slotBtn | 自定義按鈕 | HTMLElement | - |
| slotList | 自定義展開列表內容 | ReactNode | - |
| slotBtn | 自定義按鈕 | ReactNode | - |
### Event
......
src/packages/fixednav/fixednav.taro.tsx
浏览文件 @ 6249ecc8
import React, { FunctionComponent, MouseEvent } from 'react'
import classNames from 'classnames'
import Icon from '@/packages/icon/index.taro'
import { Left } from '@nutui/icons-react-taro'
import Overlay from '@/packages/overlay/index.taro'
import bem from '@/utils/bem'
import { useConfig } from '@/packages/configprovider/configprovider.taro'
......@@ -56,8 +56,6 @@ export const FixedNav: FunctionComponent<
type,
slotList,
slotBtn,
iconClassPrefix,
iconFontClassName,
...rest
} = {
...defaultProps,
......@@ -115,12 +113,7 @@ export const FixedNav: FunctionComponent<
<div className="nut-fixednav__btn" onClick={() => onUpdateValue()}>
{slotBtn || (
<>
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
name="left"
color="#fff"
/>
<Left color="#fff" />
<div className="text">
{visible
? activeText || locale.fixednav.activeText
......
src/packages/fixednav/fixednav.tsx
浏览文件 @ 6249ecc8
import React, { FunctionComponent, MouseEvent } from 'react'
import classNames from 'classnames'
import Icon from '@/packages/icon'
import { Left } from '@nutui/icons-react'
import Overlay from '@/packages/overlay'
import bem from '@/utils/bem'
import { useConfig } from '@/packages/configprovider'
......@@ -56,8 +56,6 @@ export const FixedNav: FunctionComponent<
type,
slotList,
slotBtn,
iconClassPrefix,
iconFontClassName,
...rest
} = {
...defaultProps,
......@@ -125,12 +123,7 @@ export const FixedNav: FunctionComponent<
<div className="nut-fixednav__btn" onClick={() => onUpdateValue()}>
{slotBtn || (
<>
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
name="left"
color="#fff"
/>
<Left color="#fff" />
<div className="text">
{visible
? activeText || locale.fixednav.activeText
......
src/packages/image/demo.taro.tsx
浏览文件 @ 6249ecc8
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
浏览文件 @ 6249ecc8
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
浏览文件 @ 6249ecc8
......@@ -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
浏览文件 @ 6249ecc8
......@@ -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
浏览文件 @ 6249ecc8
......@@ -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
浏览文件 @ 6249ecc8
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
浏览文件 @ 6249ecc8
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>
......
src/packages/progress/__tests__/__snapshots__/progress.spec.tsx.snap
浏览文件 @ 6249ecc8
......@@ -4,14 +4,16 @@ exports[`should render progress when use props 1`] = `
<DocumentFragment>
<div
class="nut-progress "
iconclassprefix="nut-icon"
iconfontclassname="nutui-iconfont"
>
<div
class="nut-progress-outer nut-progress-base"
style="border-radius: 12px; background: rgb(243, 243, 243);"
style="background: rgb(243, 243, 243);"
>
<div
class="nut-progress-inner"
style="width: 100%; border-radius: 12px;"
style="width: 100%;"
/>
</div>
<div
......
src/packages/progress/__tests__/progress.spec.tsx
浏览文件 @ 6249ecc8
......@@ -18,9 +18,7 @@ test('should render different height and color when use color height props', asy
/>
)
const inner = container.querySelector('.nut-progress-inner')
expect(inner?.getAttribute('style')).toBe(
'width: 50%; border-radius: 12px; background: blue;'
)
expect(inner?.getAttribute('style')).toBe('width: 50%; background: blue;')
const span = container.querySelector('.nut-progress-text span')
expect(span?.getAttribute('style')).toBe('color: red;')
})
......@@ -32,7 +30,11 @@ test('should hide percentage when use showText props', () => {
})
test('should render inside percentage when use textInside props', () => {
const { container } = render(<Progress percentage={50} textInside />)
const { container } = render(
<Progress percentage={50} textInside>
test
</Progress>
)
const text = container.querySelector('.nut-progress-text')
expect(text).toHaveClass('nut-progress-text nut-progress-insidetext')
})
......
src/packages/progress/demo.taro.tsx
浏览文件 @ 6249ecc8
......@@ -3,12 +3,13 @@ import Taro from '@tarojs/taro'
import { useTranslate } from '@/sites/assets/locale/taro'
import {
Cell,
Icon,
Progress,
Button,
Toast,
Image,
} from '@/packages/nutui.react.taro'
import Header from '@/sites/components/header'
import { Issue } from '@nutui/icons-react-taro'
interface T {
basic: string
......@@ -110,9 +111,10 @@ const ProgressDemo = () => {
<h2>{translated.customContent}</h2>
<Cell style={cellStyles}>
<Progress percentage={60} textInside>
<Icon
size={30}
name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
<Image
width="30px"
height="30px"
src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
/>
</Progress>
</Cell>
......@@ -143,8 +145,7 @@ const ProgressDemo = () => {
strokeColor="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
strokeWidth="15"
textType="icon"
iconName="issue"
iconColor="red"
icon={<Issue color="red" />}
/>
</Cell>
<h2>{translated.dynamicChange}</h2>
......
src/packages/progress/demo.tsx
浏览文件 @ 6249ecc8
import React, { useState } from 'react'
import { Issue } from '@nutui/icons-react'
import { useTranslate } from '../../sites/assets/locale'
import { Progress } from './progress'
import { Cell } from '@/packages/cell/cell'
import { Icon } from '@/packages/icon/icon'
import { Image } from '@/packages/image/image'
import { Button } from '@/packages/button/button'
import Toast from '../toast'
......@@ -100,9 +101,10 @@ const ProgressDemo = () => {
<h2>{translated.customContent}</h2>
<Cell style={cellStyles}>
<Progress percentage={60} textInside>
<Icon
size={30}
name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
<Image
width="30px"
height="30px"
src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
/>
</Progress>
</Cell>
......@@ -133,8 +135,7 @@ const ProgressDemo = () => {
strokeColor="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
strokeWidth="15"
textType="icon"
iconName="issue"
iconColor="red"
icon={<Issue color="red" />}
/>
</Cell>
<h2>{translated.dynamicChange}</h2>
......
src/packages/progress/doc.en-US.md
浏览文件 @ 6249ecc8
......@@ -8,7 +8,7 @@ Used to show the current progress of the operation.
```js
// react
import { Progress, Icon } from '@nutui/nutui-react';
import { Progress } from '@nutui/nutui-react';
```
## Demo
......@@ -123,7 +123,7 @@ export default App;
:::demo
```jsx
import React from "react";
import { Progress, Icon, Cell } from '@nutui/nutui-react';
import { Progress, Image, Cell } from '@nutui/nutui-react';
const App = () => {
return (
......@@ -133,9 +133,10 @@ const App = () => {
percentage={60}
textInside
>
<Icon
size={30}
name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
<Image
width="30px"
height="30px"
src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
/>
</Progress>
</Cell>
......@@ -189,7 +190,8 @@ export default App;
:::demo
```jsx
import React from "react";
import { Progress, Icon, Cell } from '@nutui/nutui-react';
import { Progress, Cell } from '@nutui/nutui-react';
import { Issue } from '@nutui/icons-react';
const App = () => {
return (
......@@ -213,8 +215,7 @@ const App = () => {
strokeColor="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
strokeWidth="15"
textType="icon"
iconName="issue"
iconColor="red"
icon={<Issue color="red" />}
/>
</Cell>
</>
......@@ -295,9 +296,10 @@ export default App;
| textBackground | Progress bar text background color setting | string | 同进度条颜色
| textType | Progress bar text type setting，`text`(展示文字)/`icon`(展示icon标签) | string | `text`
| status | The current state of the progress bar, `true`展示动画效果 | boolean | `false`
| iconName | Icon Name | string | `checked`
| iconColor | Icon Color | string | `#439422`
| iconSize | Icon Size | string | `16px`
| icon`1.5.0` | Custom Icon | ReactNode | `<Checked width={16} height={16} color="#439422"/>`
| iconName`v1.5.0 Abandon` | Icon Name | string | `checked`
| iconColor`v1.5.0 Abandon` | Icon Color | string | `#439422`
| iconSize`v1.5.0 Abandon` | Icon Size | string | `16px`
| rounded `v1.4.7 Abandon`| Whether the corners are rounded | boolean \| string | `true`
......
src/packages/progress/doc.md
浏览文件 @ 6249ecc8
......@@ -8,7 +8,7 @@
```js
// react
import { Progress, Icon } from '@nutui/nutui-react';
import { Progress } from '@nutui/nutui-react';
```
## 代码演示
......@@ -123,7 +123,7 @@ export default App;
:::demo
```jsx
import React from "react";
import { Progress, Icon, Cell } from '@nutui/nutui-react';
import { Progress, Image, Cell } from '@nutui/nutui-react';
const App = () => {
return (
......@@ -132,9 +132,10 @@ const App = () => {
percentage={60}
textInside
>
<Icon
size={30}
name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
<Image
width="30px"
height="30px"
src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
/>
</Progress>
</Cell>
......@@ -187,7 +188,8 @@ export default App;
:::demo
```jsx
import React from "react";
import { Progress, Icon, Cell } from '@nutui/nutui-react';
import { Progress, Cell } from '@nutui/nutui-react';
import { Issue } from '@nutui/icons-react';
const App = () => {
return (
......@@ -211,8 +213,7 @@ const App = () => {
strokeColor="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
strokeWidth="15"
textType="icon"
iconName="issue"
iconColor="red"
icon={<Issue color="red"/>}
/>
</Cell>
</>
......@@ -293,9 +294,10 @@ export default App;
| textBackground | 进度条文字背景颜色设置 | string | 同进度条颜色
| textType | 进度条文字类型，`text`(展示文字)/`icon`(展示icon标签) | string | `text`
| status | 进度条当前状态，`true`展示动画效果 | boolean | `false`
| iconName | Icon 名称 | string | `checked`
| iconColor | Icon 颜色 | string | `#439422`
| iconSize | Icon 大小 | string | `16px`
| icon`1.5.0` | 自定义图标 | ReactNode | `<Checked width={16} height={16} color="#439422"/>`
| iconName`v1.5.0 废弃` | Icon 名称 | string | `checked`
| iconColor`v1.5.0 废弃` | Icon 颜色 | string | `#439422`
| iconSize`v1.5.0 废弃` | Icon 大小 | string | `16px`
| rounded `v1.4.7 废弃`| 是否圆角 | boolean \| string | `true`
## 主题定制
......
src/packages/progress/doc.taro.md
浏览文件 @ 6249ecc8
......@@ -7,7 +7,7 @@
### 安装
```js
import { Progress, Icon } from '@nutui/nutui-react-taro';
import { Progress } from '@nutui/nutui-react-taro';
```
## 代码演示
......@@ -122,7 +122,7 @@ export default App;
:::demo
```jsx
import React from "react";
import { Progress, Icon, Cell } from '@nutui/nutui-react-taro';
import { Progress, Image, Cell } from '@nutui/nutui-react-taro';
const App = () => {
return (
......@@ -131,9 +131,10 @@ const App = () => {
percentage={60}
textInside
>
<Icon
size={30}
name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
<Image
width="30px"
height="30px"
src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
/>
</Progress>
</Cell>
......@@ -186,7 +187,8 @@ export default App;
:::demo
```jsx
import React from "react";
import { Progress, Icon, Cell } from '@nutui/nutui-react-taro';
import { Progress, Cell } from '@nutui/nutui-react-taro';
import { Issue } from '@nutui/icons-react-taro';
const App = () => {
return (
......@@ -210,8 +212,7 @@ const App = () => {
strokeColor="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
strokeWidth="15"
textType="icon"
iconName="issue"
iconColor="red"
icon={<Issue color="red" />}
/>
</Cell>
</>
......@@ -292,9 +293,10 @@ export default App;
| textBackground | 进度条文字背景颜色设置 | string | 同进度条颜色
| textType | 进度条文字类型，`text`(展示文字)/`icon`(展示icon标签) | string | `text`
| status | 进度条当前状态，`true`展示动画效果 | boolean | `false`
| iconName | Icon 名称 | string | `checked`
| iconColor | Icon 颜色 | string | `#439422`
| iconSize | Icon 大小 | string | `16px`
| icon`1.5.0` | 自定义图标 | ReactNode | `<Checked width={16} height={16} color="#439422"/>`
| iconName`v1.5.0 废弃` | Icon 名称 | string | `checked`
| iconColor`v1.5.0 废弃` | Icon 颜色 | string | `#439422`
| iconSize`v1.5.0 废弃` | Icon 大小 | string | `16px`
| rounded `v1.4.7 废弃`| 是否圆角 | boolean \| string | `true`
## 主题定制
......
src/packages/progress/doc.zh-TW.md
浏览文件 @ 6249ecc8
......@@ -8,7 +8,7 @@
```js
// react
import { Progress, Icon } from '@nutui/nutui-react';
import { Progress } from '@nutui/nutui-react';
```
## 代碼演示
......@@ -123,7 +123,7 @@ export default App;
:::demo
```jsx
import React from "react";
import { Progress, Icon, Cell } from '@nutui/nutui-react';
import { Progress, Image, Cell } from '@nutui/nutui-react';
const App = () => {
return (
......@@ -132,9 +132,10 @@ const App = () => {
percentage={60}
textInside
>
<Icon
size={30}
name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
<Image
width="30px"
height="30px"
src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
/>
</Progress>
</Cell>
......@@ -187,7 +188,8 @@ export default App;
:::demo
```jsx
import React from "react";
import { Progress, Icon, Cell } from '@nutui/nutui-react';
import { Progress, Cell } from '@nutui/nutui-react';
import { Issue } from '@nutui/icons-react';
const App = () => {
return (
......@@ -211,8 +213,7 @@ const App = () => {
strokeColor="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
strokeWidth="15"
textType="icon"
iconName="issue"
iconColor="red"
icon={<Issue color="red" />}
/>
</Cell>
</>
......@@ -293,9 +294,10 @@ export default App;
| textBackground | 进度条文字背景颜色设置 | string | 同进度条颜色
| textType | 进度条文字类型，`text`(展示文字)/`icon`(展示icon标签) | string | `text`
| status | 进度条当前状态，`true`展示动画效果 | boolean | `false`
| iconName | Icon 名称 | string | `checked`
| iconColor | Icon 颜色 | string | `#439422`
| iconSize | Icon 大小 | string | `16px`
| icon`1.5.0` | 自定义图标 | ReactNode | `<Checked width={16} height={16} color="#439422"/>`
| iconName`v1.5.0 废弃` | Icon 名称 | string | `checked`
| iconColor`v1.5.0 废弃` | Icon 颜色 | string | `#439422`
| iconSize`v1.5.0 废弃` | Icon 大小 | string | `16px`
| rounded `v1.4.7 废弃`| 是否圆角 | boolean \| string | `true`
## 主題定制
......
src/packages/progress/progress.taro.tsx
浏览文件 @ 6249ecc8
import React, { FunctionComponent, CSSProperties, ReactNode } from 'react'
import classNames from 'classnames'
import Icon from '@/packages/icon/index.taro'
import { Checked } from '@nutui/icons-react-taro'
import bem from '@/utils/bem'
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
......@@ -24,9 +24,7 @@ export interface ProgressProps extends BasicComponent {
textBackground: string
textType: TextType
status: boolean
iconName: string
iconColor: string
iconSize: string
icon: ReactNode
children: ReactNode
}
......@@ -46,9 +44,7 @@ const defaultProps = {
textBackground: 'linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)',
textType: 'text',
status: false,
iconName: 'checked',
iconColor: '#439422',
iconSize: '16px',
icon: null,
children: undefined,
} as ProgressProps
......@@ -71,12 +67,8 @@ export const Progress: FunctionComponent<
textBackground,
textType,
status,
iconName,
iconColor,
iconSize,
icon,
children,
iconClassPrefix,
iconFontClassName,
...rest
} = {
...defaultProps,
......@@ -171,13 +163,7 @@ export const Progress: FunctionComponent<
</span>
)}
{textType === 'icon' && (
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
size={iconSize}
name={iconName}
color={iconColor}
/>
<>{icon || <Checked width={16} height={16} color="#439422" />}</>
)}
</div>
)}
......
src/packages/progress/progress.tsx
浏览文件 @ 6249ecc8
import React, { FunctionComponent, CSSProperties, ReactNode } from 'react'
import classNames from 'classnames'
import Icon from '@/packages/icon'
import { Checked } from '@nutui/icons-react'
import bem from '@/utils/bem'
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
......@@ -24,9 +24,7 @@ export interface ProgressProps extends BasicComponent {
textBackground: string
textType: TextType
status: boolean
iconName: string
iconColor: string
iconSize: string
icon: ReactNode
children: ReactNode
}
......@@ -46,9 +44,7 @@ const defaultProps = {
textBackground: 'linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)',
textType: 'text',
status: false,
iconName: 'checked',
iconColor: '#439422',
iconSize: '16px',
icon: null,
children: undefined,
} as ProgressProps
......@@ -71,12 +67,8 @@ export const Progress: FunctionComponent<
textBackground,
textType,
status,
iconName,
iconColor,
iconSize,
icon,
children,
iconClassPrefix,
iconFontClassName,
...rest
} = {
...defaultProps,
......@@ -171,13 +163,7 @@ export const Progress: FunctionComponent<
</span>
)}
{textType === 'icon' && (
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
size={iconSize}
name={iconName}
color={iconColor}
/>
<>{icon || <Checked width={16} height={16} color="#439422" />}</>
)}
</div>
)}
......
src/packages/rate/demo.tsx
浏览文件 @ 6249ecc8
......@@ -52,8 +52,8 @@ const RateDemo = () => {
<Cell>
<Rate modelValue={3} />
</Cell>
<h2>{translated.halfStar}</h2>
<h2>{translated.halfStar}</h2>
<Cell>
<Rate allowHalf modelValue="3.5" />
</Cell>
......
src/packages/rate/rate.scss
浏览文件 @ 6249ecc8
......@@ -2,21 +2,32 @@
.nut-rate {
display: flex;
&-item {
display: flex;
flex-shrink: 0;
position: relative;
&__half {
position: absolute;
height: 100%;
width: 50% !important;
left: 0;
top: 0;
overflow: hidden;
}
&__icon {
color: $rate-icon-color;
cursor: pointer;
&--disabled {
color: $rate-icon-void-color;
}
&.nut-rate-item__icon.nut-rate-item__icon--half {
position: absolute;
width: 50% !important;
// width: 50% !important;
left: 0;
top: 0;
overflow: hidden;
......
src/packages/rate/rate.tsx
浏览文件 @ 6249ecc8
import React, { FunctionComponent, useEffect, useState } from 'react'
import classNames from 'classnames'
import { StarFillN } from '@nutui/icons-react'
import bem from '@/utils/bem'
import Icon from '@/packages/icon'
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
......@@ -12,8 +12,7 @@ export interface RateProps extends BasicComponent {
iconSize: string | number
activeColor: string
voidColor: string
checkedIcon: string
uncheckedIcon: string
checkedIcon: React.ReactNode
disabled: boolean
readonly: boolean
allowHalf: boolean
......@@ -29,8 +28,7 @@ const defaultProps = {
iconSize: 18,
activeColor: '',
voidColor: '',
checkedIcon: 'star-fill-n',
uncheckedIcon: 'star-n',
checkedIcon: null,
disabled: false,
readonly: false,
allowHalf: false,
......@@ -47,14 +45,11 @@ export const Rate: FunctionComponent<Partial<RateProps>> = (props) => {
activeColor,
voidColor,
checkedIcon,
uncheckedIcon,
disabled,
readonly,
allowHalf,
spacing,
onChange,
iconClassPrefix,
iconFontClassName,
} = {
...defaultProps,
...props,
......@@ -109,38 +104,44 @@ export const Rate: FunctionComponent<Partial<RateProps>> = (props) => {
onClick={(event) => onClick(event, n)}
style={{ marginRight: pxCheck(spacing) }}
>
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
size={iconSize}
className={classNames(bi('icon'), {
[bi('icon--disabled')]: disabled || n > score,
})}
name={n <= score ? checkedIcon : uncheckedIcon}
color={n <= score ? activeColor : voidColor}
/>
{allowHalf && score > n - 1 && (
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
className={`${bi('icon')} ${bi('icon--half')}`}
color={n <= score ? activeColor : voidColor}
size={iconSize}
name={checkedIcon}
/>
)}
{allowHalf && score < n - 1 && (
<Icon
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
className={`${bi('icon')} ${bi('icon--disabled')} ${bi(
'icon--half'
)}`}
color={voidColor}
size={iconSize}
name={uncheckedIcon}
/>
)}
<>
{checkedIcon || (
<StarFillN
width={iconSize}
height={iconSize}
color={n <= score ? activeColor : voidColor}
className={classNames(bi('icon'), {
[bi('icon--disabled')]: disabled || n > score,
})}
/>
)}
{(allowHalf && score > n - 1 && (
<div className={` ${bi('half')}`}>
{checkedIcon || (
<StarFillN
width={iconSize}
height={iconSize}
color={n <= score ? activeColor : voidColor}
className={`${bi('icon')} ${bi('icon--half')}`}
/>
)}
</div>
)) ||
(allowHalf && score < n - 1 && (
<div>
{checkedIcon || (
<StarFillN
width={iconSize}
height={iconSize}
color={voidColor}
className={`${bi('icon')} ${bi('icon--disabled')} ${bi(
'icon--half'
)}`}
/>
)}
</div>
))}
</>
</div>
)
})}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或