Skip to content

Commit 9ce77c4

Browse files
jqroomjqroom
committed
feat: 增加 demo 场景
1 parent 5b38d72 commit 9ce77c4

File tree

19 files changed

+11812
-3714
lines changed

19 files changed

+11812
-3714
lines changed

‎src/packages/cell/cell.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,4 +55,14 @@
5555
content: ' ';
5656
}
5757
}
58+
&-disabled {
59+
display: flex;
60+
align-items: center;
61+
color: #b5b5b5;
62+
font-size: 14px;
63+
font-family: PingFang SC;
64+
font-weight: 400;
65+
line-height: 20px;
66+
letter-spacing: 0px;
67+
}
5868
}

‎src/packages/cell/cell.taro.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React, { FunctionComponent, ReactNode, useContext } from 'react'
21
import classNames from 'classnames'
3-
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
2+
import React, { FunctionComponent, ReactNode, useContext } from 'react'
43
import { CellGroup } from '@/packages/cellgroup/cellgroup.taro'
54
import CellGroupContext from '@/packages/cellgroup/context'
5+
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
66

77
export interface CellProps extends BasicComponent {
88
title: ReactNode
@@ -11,6 +11,7 @@ export interface CellProps extends BasicComponent {
1111
radius: string | number
1212
align: 'flex-start' | 'center' | 'flex-end'
1313
clickable: boolean
14+
disabled: boolean
1415
onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
1516
}
1617

@@ -22,6 +23,7 @@ const defaultProps = {
2223
radius: '6px',
2324
align: 'flex-start',
2425
clickable: false,
26+
disabled: false,
2527
onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {},
2628
} as CellProps
2729

@@ -42,6 +44,7 @@ export const Cell: FunctionComponent<
4244
className,
4345
style,
4446
clickable,
47+
disabled,
4548
...rest
4649
} = {
4750
...defaultProps,
@@ -66,7 +69,10 @@ export const Cell: FunctionComponent<
6669
}
6770
return (
6871
<div
69-
className={`${classNames(classPrefix, className, clickable ? `${classPrefix}-clickable` : '')}`}
72+
className={classNames(classPrefix, className, {
73+
[`${classPrefix}-clickable`]: clickable,
74+
[`${classPrefix}-disabled`]: disabled,
75+
})}
7076
onClick={(event) => handleClick(event)}
7177
style={baseStyle}
7278
{...rest}

‎src/packages/cell/demos/taro/demo1.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import React from 'react'
1+
import { ArrowRight } from '@nutui/icons-react-taro'
22
import { Cell } from '@nutui/nutui-react-taro'
3+
import React from 'react'
34

45
const Demo1 = () => {
56
const testClick = (
@@ -17,7 +18,16 @@ const Demo1 = () => {
1718
onClick={(
1819
event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>
1920
) => testClick(event)}
21+
extra={
22+
<ArrowRight
23+
size={14}
24+
style={{
25+
alignItems: 'center',
26+
}}
27+
/>
28+
}
2029
/>
30+
<Cell title="禁用状态" disabled extra={<ArrowRight size={14} />} />
2131
<Cell title="圆角设置0" radius={0} />
2232
</>
2333
)

‎src/packages/cell/demos/taro/demo3.tsx‎

Lines changed: 33 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,40 @@
1-
import React from 'react'
1+
import { ArrowRight, User } from '@nutui/icons-react-taro'
22
import { Cell } from '@nutui/nutui-react-taro'
3-
import { User } from '@nutui/icons-react-taro'
3+
import React from 'react'
44

55
const Demo3 = () => {
66
return (
7-
<Cell
8-
title={
9-
<div style={{ display: 'inline-flex', alignItems: 'center' }}>
10-
<User />
11-
<span style={{ marginLeft: '5px' }}>我是标题</span>
12-
</div>
13-
}
14-
description={
15-
<span>
16-
我是描述<b style={{ color: 'red' }}>1</b>
17-
</span>
18-
}
19-
extra="描述文字"
20-
/>
7+
<Cell.Group>
8+
<Cell
9+
title={
10+
<div style={{ display: 'inline-flex', alignItems: 'center' }}>
11+
<User />
12+
<span style={{ marginLeft: '5px' }}>我是标题</span>
13+
</div>
14+
}
15+
description={
16+
<span>
17+
我是描述<b style={{ color: 'red' }}>1</b>
18+
</span>
19+
}
20+
extra={<ArrowRight size={14} />}
21+
/>
22+
23+
<Cell
24+
title={
25+
<div style={{ display: 'inline-flex', alignItems: 'center' }}>
26+
<User />
27+
<span style={{ marginLeft: '5px' }}>我是标题</span>
28+
</div>
29+
}
30+
description={
31+
<span>
32+
我是描述<b style={{ color: 'red' }}>1</b>
33+
</span>
34+
}
35+
extra={<ArrowRight size={14} />}
36+
/>
37+
</Cell.Group>
2138
)
2239
}
2340
export default Demo3

‎src/packages/cell/demos/taro/demo4.tsx‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,38 @@
1-
import React from 'react'
2-
import { Cell, Switch } from '@nutui/nutui-react-taro'
1+
import { BadgePercent } from '@nutui/icons-react'
2+
import { Cell, Image, Radio, Switch } from '@nutui/nutui-react-taro'
3+
import React, { useState } from 'react'
34

45
const App = () => {
6+
const [radioChecked, setRadioChecked] = useState(false)
7+
const handleRadioClick = () => {
8+
setRadioChecked((v) => !v)
9+
}
510
return (
611
<Cell.Group>
7-
<Cell title="Switch" extra={<Switch defaultChecked />} />
12+
<Cell align="center" title="Switch" extra={<Switch defaultChecked />} />
13+
<Cell
14+
align="center"
15+
title="BadgePercent"
16+
extra={<BadgePercent color="red" />}
17+
/>
18+
<Cell
19+
align="center"
20+
title="Image"
21+
extra={
22+
<Image
23+
width={20}
24+
height={20}
25+
src="https://img12.360buyimg.com/imagetools/jfs/t1/201375/12/18248/5407/61b0715dE35f02aa9/55eff706b7755414.png"
26+
/>
27+
}
28+
/>
29+
<Cell
30+
align="center"
31+
title="Radio"
32+
onClick={handleRadioClick}
33+
extra={<Radio checked={radioChecked} />}
34+
/>
35+
<Cell align="center" title="Radio" extra={<Radio checked />} />
836
</Cell.Group>
937
)
1038
}

‎src/packages/menu/demos/taro/demo6.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import React, { useState } from 'react'
1+
import { Filter } from '@nutui/icons-react'
2+
import { ArrowDown, Star } from '@nutui/icons-react-taro'
23
import { Menu } from '@nutui/nutui-react-taro'
3-
import { ArrowDown, Star, Filter } from '@nutui/icons-react-taro'
4+
import React, { useState } from 'react'
45

56
const Demo6 = () => {
67
const [options] = useState([

0 commit comments

Comments
 (0)