Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui-react
提交
02b5b88f
N
nutui-react
项目概览
京东前端
/
nutui-react
通知
0
Star
2
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui-react
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
02b5b88f
编写于
7月 22, 2022
作者:
拧
拧巴的猫
提交者:
GitHub
7月 22, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: cell组件props补全+demo和文档国际化+单元测试修改 (#154)
* fix: cell组件props补全+demo和文档国际化+单元测试修改 * fix: cell Pr修改 * fix: cell 用例修改
上级
246ec74e
变更
13
隐藏空白更改
内联
并排
Showing
13 changed file
with
915 addition
and
253 deletion
+915
-253
src/packages/cell/__test__/__snapshots__/cell.spec.tsx.snap
src/packages/cell/__test__/__snapshots__/cell.spec.tsx.snap
+46
-23
src/packages/cell/__test__/cell.spec.tsx
src/packages/cell/__test__/cell.spec.tsx
+13
-7
src/packages/cell/cell.scss
src/packages/cell/cell.scss
+29
-15
src/packages/cell/cell.tsx
src/packages/cell/cell.tsx
+67
-39
src/packages/cell/demo.tsx
src/packages/cell/demo.tsx
+159
-18
src/packages/cell/doc.en-US.md
src/packages/cell/doc.en-US.md
+171
-44
src/packages/cell/doc.md
src/packages/cell/doc.md
+156
-29
src/packages/cell/doc.zh-TW.md
src/packages/cell/doc.zh-TW.md
+170
-43
src/packages/cellgroup/__test__/__snapshots__/cellgroup.spec.tsx.snap
.../cellgroup/__test__/__snapshots__/cellgroup.spec.tsx.snap
+22
-4
src/packages/cellgroup/cellgroup.scss
src/packages/cellgroup/cellgroup.scss
+14
-0
src/packages/cellgroup/cellgroup.tsx
src/packages/cellgroup/cellgroup.tsx
+16
-4
src/packages/tag/demo.tsx
src/packages/tag/demo.tsx
+11
-11
src/styles/variables.scss
src/styles/variables.scss
+41
-16
未找到文件。
src/packages/cell/__test__/__snapshots__/cell.spec.tsx.snap
浏览文件 @
02b5b88f
...
...
@@ -4,17 +4,26 @@ exports[`prop icon 1`] = `
<div>
<div
class="nut-cell nut-cell--clickable "
style="border-radius: 6px;"
>
<div
class="nut-cell__
title nut-cell__title--
icon"
class="nut-cell__icon"
>
<i
class="
nut-cell__
icon nut-icon nutui-iconfont nut-icon-my "
class="icon nut-icon nutui-iconfont nut-icon-my "
/>
姓名
</div>
<div
class="nut-cell__desc"
class="nut-cell__title"
>
<div
class="nut-cell__maintitle"
>
姓名
</div>
</div>
<div
class="nut-cell__value"
>
张三
</div>
...
...
@@ -29,14 +38,19 @@ exports[`prop isLink 1`] = `
<div>
<div
class="nut-cell nut-cell--clickable "
style="border-radius: 6px;"
>
<div
class="nut-cell__title"
>
URL 跳转
<div
class="nut-cell__maintitle"
>
URL 跳转
</div>
</div>
<div
class="nut-cell__
desc
"
class="nut-cell__
value
"
>
https://m.jd.com/
</div>
...
...
@@ -47,30 +61,33 @@ exports[`prop isLink 1`] = `
</div>
`;
exports[`prop title desc subtitle 1`] = `
<div
class="nut-cell "
data-testid="prop"
>
exports[`prop title desc subtitle test 1`] = `
<div>
<div
class="nut-cell__title"
class="nut-cell "
data-testid="prop"
style="border-radius: 6px;"
>
<div
class="nut-cell__
main
title"
class="nut-cell__title"
>
我是标题
<div
class="nut-cell__maintitle"
>
我是标题
</div>
<div
class="nut-cell__subtitle"
>
副标题描述
</div>
</div>
<div
class="nut-cell__
subtitl
e"
class="nut-cell__
valu
e"
>
副标题描述
描述文字
</div>
</div>
<div
class="nut-cell__desc"
>
描述文字
</div>
</div>
`;
...
...
@@ -78,6 +95,7 @@ exports[`slot default test 1`] = `
<div>
<div
class="nut-cell "
style="border-radius: 6px;"
>
<div>
自定义内容
...
...
@@ -86,15 +104,20 @@ exports[`slot default test 1`] = `
</div>
`;
exports[`slot
extra
1`] = `
exports[`slot
linkSlot
1`] = `
<div>
<div
class="nut-cell "
style="border-radius: 6px;"
>
<div
class="nut-cell__title"
>
Switch
<div
class="nut-cell__maintitle"
>
Switch
</div>
</div>
<div
class="nut-switch switch-open nut-switch-base "
...
...
src/packages/cell/__test__/cell.spec.tsx
浏览文件 @
02b5b88f
...
...
@@ -6,7 +6,7 @@ import { Switch } from '../../switch/switch'
const
classPrefix
=
`nut-avatar`
test
(
'
prop title desc subtitle
'
,
()
=>
{
test
(
'
prop title desc subtitle
test
'
,
()
=>
{
const
{
getByTestId
,
container
}
=
render
(
<>
<
Cell
...
...
@@ -17,17 +17,23 @@ test('prop title desc subtitle', () => {
/>
</>
)
expect
(
container
).
toContainHTML
(
'
<div class="nut-cell__title"><div class="nut-cell__maintitle">我是标题</div><div class="nut-cell__subtitle">副标题描述</div></div><div class="nut-cell__desc">描述文字</div>
'
expect
(
container
.
querySelector
(
'
.nut-cell__maintitle
'
)?.
innerHTML
).
toBe
(
'
我是标题
'
)
expect
(
getByTestId
(
'
prop
'
)).
toMatchSnapshot
()
expect
(
container
.
querySelector
(
'
.nut-cell__subtitle
'
)?.
innerHTML
).
toBe
(
'
副标题描述
'
)
expect
(
container
.
querySelector
(
'
.nut-cell__value
'
)?.
innerHTML
).
toBe
(
'
描述文字
'
)
expect
(
container
).
toMatchSnapshot
()
})
test
(
'
prop desc-text-align left
'
,
()
=>
{
const
{
container
}
=
render
(
<
Cell
data
-
testid
=
"prop"
descTextAlign
=
"left"
desc
=
"张三"
/>
)
expect
(
container
.
querySelector
(
'
.nut-cell__
desc
'
)).
toHaveAttribute
(
expect
(
container
.
querySelector
(
'
.nut-cell__
value
'
)).
toHaveAttribute
(
'
style
'
,
'
text-align: left; flex: 1;
'
)
...
...
@@ -65,9 +71,9 @@ test('slot default test', () => {
expect
(
container
).
toMatchSnapshot
()
})
test
(
'
slot
extra
'
,
()
=>
{
test
(
'
slot
linkSlot
'
,
()
=>
{
const
{
container
}
=
render
(
<
Cell
title
=
"Switch"
extra
=
{
<
Switch
checked
/>
}
/>
<
Cell
title
=
"Switch"
linkSlot
=
{
<
Switch
checked
/>
}
/>
)
expect
(
container
.
querySelector
(
'
.nut-switch
'
)).
toBeInTheDocument
()
expect
(
container
).
toMatchSnapshot
()
...
...
src/packages/cell/cell.scss
浏览文件 @
02b5b88f
...
...
@@ -3,11 +3,10 @@
.nut-cell
{
position
:
relative
;
display
:
flex
;
align-items
:
center
;
width
:
100%
;
line-height
:
20px
;
padding
:
13px
16px
;
background
:
$
white
;
line-height
:
$cell-line-height
;
padding
:
$cell-padding
;
background
:
$
cell-background
;
border-radius
:
$cell-border-radius
;
box-shadow
:
0px
1px
7px
0px
rgba
(
237
,
238
,
241
,
1
);
font-size
:
$cell-title-font
;
...
...
@@ -17,7 +16,22 @@
&
:last-child
{
&
::after
{
border
:
0
;
border
:
0
!
important
;
}
}
&
--center
{
align-items
:
center
;
}
&
--large
{
font-size
:
$cell-large-title-font
;
padding
:
$cell-large-padding
;
.nut-cell__title-desc
{
font-size
:
$cell-large-title-desc-font
;
}
.nut-cell__subtitle
{
font-size
:
$cell-large-title-desc-font
;
}
}
...
...
@@ -26,10 +40,9 @@
box-sizing
:
border-box
;
content
:
' '
;
pointer-events
:
none
;
right
:
16px
;
right
:
$cell-after-right
;
bottom
:
0
;
left
:
16px
;
border-bottom
:
2px
solid
#f5f6f7
;
transform
:
scaleY
(
0
.5
);
}
...
...
@@ -53,27 +66,28 @@
content
:
' '
;
}
}
&
__icon
{
display
:
flex
;
flex-direction
:
row
;
margin-right
:
$cell-default-icon-margin
;
}
&
__title
{
display
:
flex
;
flex-direction
:
column
;
flex
:
1
;
&
--icon
{
flex-direction
:
row
;
overflow
:
hidden
;
}
}
&
__icon
{
margin-right
:
10px
;
}
&
__subtitle
{
font-size
:
$cell-title-desc-font
;
}
&
__
desc
{
&
__
value
{
display
:
inline-block
;
text-align
:
right
;
font-size
:
$cell-desc-font
;
color
:
$cell-desc-color
;
&
--alone
{
color
:
$cell-color
;
}
}
&
__link
{
color
:
#979797
;
...
...
src/packages/cell/cell.tsx
浏览文件 @
02b5b88f
...
...
@@ -4,50 +4,63 @@ import bem from '@/utils/bem'
import
Icon
from
'
@/packages/icon
'
export
interface
CellProps
{
title
:
string
subTitle
:
string
title
:
ReactNode
subTitle
:
ReactNode
desc
:
string
descTextAlign
:
string
isLink
:
boolean
icon
:
string
roundRadius
:
string
|
number
url
:
string
to
:
string
replace
:
boolean
url
:
string
icon
:
string
center
:
boolean
size
:
string
className
:
string
extra
:
ReactNode
iconSlot
:
ReactNode
linkSlot
:
ReactNode
click
:
(
event
:
React
.
MouseEvent
<
HTMLDivElement
,
MouseEvent
>
)
=>
void
}
const
defaultProps
=
{
title
:
''
,
subTitle
:
''
,
title
:
null
,
subTitle
:
null
,
desc
:
''
,
descTextAlign
:
'
right
'
,
isLink
:
false
,
icon
:
''
,
roundRadius
:
'
6px
'
,
url
:
''
,
to
:
''
,
replace
:
false
,
url
:
''
,
icon
:
''
,
center
:
false
,
size
:
''
,
className
:
''
,
extra
:
''
,
iconSlot
:
null
,
linkSlot
:
null
,
click
:
(
event
:
React
.
MouseEvent
<
HTMLDivElement
,
MouseEvent
>
)
=>
{},
}
as
CellProps
export
const
Cell
:
FunctionComponent
<
Partial
<
CellProps
>
&
React
.
HTMLAttributes
<
HTMLDivElement
>
Partial
<
CellProps
>
&
Omit
<
React
.
HTMLAttributes
<
HTMLDivElement
>
,
'
title
'
>
>
=
(
props
)
=>
{
const
{
children
,
click
,
title
,
subTitle
,
desc
,
descTextAlign
,
isLink
,
to
,
icon
,
roundRadius
,
url
,
to
,
replace
,
center
,
size
,
className
,
descTextAlign
,
desc
,
icon
,
title
,
subTitle
,
extra
,
iconSlot
,
linkSlot
,
...
rest
}
=
{
...
defaultProps
,
...
...
@@ -60,10 +73,16 @@ export const Cell: FunctionComponent<
if
(
to
&&
history
)
{
history
[
replace
?
'
replace
'
:
'
push
'
](
to
)
}
else
if
(
url
)
{
replace
?
location
.
replace
(
url
)
:
(
location
.
href
=
url
)
replace
?
window
.
location
.
replace
(
url
)
:
(
window
.
location
.
href
=
url
)
}
}
const
baseStyle
=
{
borderRadius
:
Number
.
isNaN
(
Number
(
roundRadius
))
?
String
(
roundRadius
)
:
`
${
roundRadius
}
px`
,
}
const
styles
=
title
||
subTitle
||
icon
?
{}
...
...
@@ -73,38 +92,47 @@ export const Cell: FunctionComponent<
}
return
(
<
div
className
=
{
`
${
b
({
clickable
:
!!
(
isLink
||
to
)
},
[
className
])}
`
}
className
=
{
`
${
b
(
{
clickable
:
!!
(
isLink
||
to
),
center
,
large
:
size
===
'
large
'
},
[
className
]
)}
`
}
onClick
=
{
(
event
)
=>
handleClick
(
event
)
}
style
=
{
baseStyle
}
{
...
rest
}
>
{
children
||
(
<>
{
title
||
subTitle
||
icon
?
(
<>
<
div
className
=
{
`
${
b
(
'
title
'
,
{
icon
:
!!
icon
})}
`
}
>
{
icon
?
<
Icon
name
=
{
icon
}
className
=
{
`
${
b
(
'
icon
'
)}
`
}
/>
:
null
}
{
subTitle
?
(
<>
<
div
className
=
{
b
(
'
maintitle
'
)
}
>
{
title
}
</
div
>
<
div
className
=
{
b
(
'
subtitle
'
)
}
>
{
subTitle
}
</
div
>
</>
)
:
(
<>
{
title
}
</>
)
}
</
div
>
</>
{
icon
||
iconSlot
?
(
<
div
className
=
{
b
(
'
icon
'
)
}
>
{
iconSlot
||
(
icon
?
<
Icon
name
=
{
icon
}
className
=
"icon"
/>
:
null
)
}
</
div
>
)
:
null
}
{
title
||
subTitle
?
(
<
div
className
=
{
`
${
b
(
'
title
'
)}
`
}
>
{
title
?
<
div
className
=
{
b
(
'
maintitle
'
)
}
>
{
title
}
</
div
>
:
null
}
{
subTitle
?
(
<
div
className
=
{
b
(
'
subtitle
'
)
}
>
{
subTitle
}
</
div
>
)
:
null
}
</
div
>
)
:
null
}
{
desc
?
(
<
div
className
=
{
b
(
'
desc
'
)
}
style
=
{
styles
as
React
.
CSSProperties
}
>
<
div
className
=
{
b
(
'
value
'
,
{
alone
:
!
title
&&
!
subTitle
,
})
}
style
=
{
styles
as
React
.
CSSProperties
}
>
{
desc
}
</
div
>
)
:
null
}
{
!
linkSlot
&&
(
isLink
||
to
)
?
(
<
Icon
name
=
"right"
className
=
{
b
(
'
link
'
)
}
/>
)
:
(
linkSlot
)
}
</>
)
}
{
extra
||
null
}
{
!
extra
&&
(
isLink
||
to
)
?
(
<
Icon
name
=
"right"
className
=
{
b
(
'
link
'
)
}
/>
)
:
null
}
</
div
>
)
}
...
...
src/packages/cell/demo.tsx
浏览文件 @
02b5b88f
import
React
from
'
react
'
import
{
useTranslate
}
from
'
../../sites/assets/locale
'
import
{
Cell
}
from
'
./cell
'
import
{
CellGroup
}
from
'
../cellgroup/cellgroup
'
import
{
Switch
}
from
'
../switch/switch
'
interface
T
{
basic
:
string
desc
:
string
desc1
:
string
title
:
string
title1
:
string
title2
:
string
title3
:
string
title4
:
string
title5
:
string
title6
:
string
title7
:
string
title8
:
string
title9
:
string
link
:
string
urlJump
:
string
routerJump
:
string
name
:
string
image
:
string
content
:
string
customRight
:
string
customLeftIcon
:
string
displayIcon
:
string
}
const
CellDemo
=
()
=>
{
const
[
translated
]
=
useTranslate
<
T
>
({
'
zh-CN
'
:
{
basic
:
'
基本用法
'
,
desc
:
'
描述文字
'
,
desc1
:
'
使用 nut-cell-group 支持 title desc slots
'
,
title
:
'
我是标题
'
,
title1
:
'
副标题描述
'
,
title2
:
'
直接使用插槽(slot)
'
,
title3
:
'
点击测试
'
,
title4
:
'
圆角设置 0
'
,
title5
:
'
链接 | 分组用法
'
,
title6
:
'
只展示 desc ,可通过 desc-text-align 调整内容位置
'
,
title7
:
'
垂直居中
'
,
title8
:
'
直接使用插槽(slot title)
'
,
title9
:
'
尺寸设置 large
'
,
link
:
'
链接
'
,
urlJump
:
'
URL 跳转
'
,
routerJump
:
'
路由跳转 ’/‘
'
,
name
:
'
姓名
'
,
image
:
'
图片
'
,
content
:
'
自定义内容
'
,
customRight
:
'
自定义右侧箭头区域
'
,
customLeftIcon
:
'
自定义左侧 Icon 区域
'
,
displayIcon
:
'
展示图标
'
,
},
'
zh-TW
'
:
{
basic
:
'
基本用法
'
,
desc
:
'
描述文字
'
,
desc1
:
'
使用 nut-cell-group 支持 title desc slots
'
,
title
:
'
我是標題
'
,
title1
:
'
副標題描述
'
,
title2
:
'
直接使用插槽(slot)
'
,
title3
:
'
點擊測試
'
,
title4
:
'
圓角設置 0
'
,
title5
:
'
鏈接 | 分組用法
'
,
title6
:
'
只展示 desc ,可通過 desc-text-align 調整內容位置
'
,
title7
:
'
垂直居中
'
,
title8
:
'
直接使用插槽(slot title)
'
,
title9
:
'
尺寸設置 large
'
,
link
:
'
鏈接
'
,
urlJump
:
'
URL 跳轉
'
,
routerJump
:
'
路由跳轉 』/『
'
,
name
:
'
姓名
'
,
image
:
'
圖片
'
,
content
:
'
自定義內容
'
,
customRight
:
'
自定義右側箭頭區域
'
,
customLeftIcon
:
'
自定義左側 Icon 區域
'
,
displayIcon
:
'
展示圖標
'
,
},
'
en-US
'
:
{
basic
:
'
Basic Usage
'
,
desc
:
'
Description
'
,
desc1
:
'
Usage nut-cell-group support title desc slots
'
,
title
:
'
Title
'
,
title1
:
'
Subtitle Description
'
,
title2
:
'
Use Slots
'
,
title3
:
'
Click Test
'
,
title4
:
'
Round Radius 0
'
,
title5
:
'
Link | CellGroup Usage
'
,
title6
:
'
Only display desc , you can adjust the content position through desc-text-align
'
,
title7
:
'
Vertical Center
'
,
title8
:
'
Use Slots title
'
,
title9
:
'
Size setting large
'
,
link
:
'
Link
'
,
urlJump
:
'
URL Jump
'
,
routerJump
:
'
Router Jump ’/‘
'
,
name
:
'
Name
'
,
image
:
'
Image
'
,
content
:
'
Content
'
,
customRight
:
'
Customize the right arrow area
'
,
customLeftIcon
:
'
Customize the left Icon area
'
,
displayIcon
:
'
Display Icon
'
,
},
})
const
testClick
=
(
event
:
React
.
MouseEvent
<
HTMLDivElement
,
globalThis
.
MouseEvent
>
)
=>
{
...
...
@@ -12,37 +113,77 @@ const CellDemo = () => {
return
(
<>
<
div
className
=
"demo"
>
<
h2
>
基础用法
</
h2
>
<
Cell
title
=
"我是标题"
desc
=
"描述文字"
/>
<
Cell
title
=
"我是标题"
subTitle
=
"副标题描述"
desc
=
"描述文字"
/>
<
h2
>
{
translated
.
basic
}
</
h2
>
<
Cell
title
=
{
translated
.
title
}
desc
=
{
translated
.
desc
}
/>
<
Cell
title
=
{
translated
.
title
}
subTitle
=
{
translated
.
title1
}
desc
=
{
translated
.
desc
}
/>
<
Cell
title
=
"点击测试"
title
=
{
translated
.
title3
}
click
=
{
(
event
:
React
.
MouseEvent
<
HTMLDivElement
,
globalThis
.
MouseEvent
>
)
=>
testClick
(
event
)
}
/>
<
h2
>
直接使用
</
h2
>
<
Cell
title
=
"我是标题"
desc
=
"描述文字"
>
<
div
>
自定义内容
</
div
>
<
Cell
title
=
{
translated
.
title4
}
roundRadius
=
"0"
/>
<
h2
>
尺寸设置large
</
h2
>
<
Cell
size
=
"large"
title
=
{
translated
.
title
}
desc
=
{
translated
.
desc
}
/>
<
Cell
size
=
"large"
title
=
{
translated
.
title
}
subTitle
=
{
translated
.
title1
}
desc
=
{
translated
.
desc
}
/>
<
h2
>
{
translated
.
title2
}
</
h2
>
<
Cell
>
<
div
>
{
translated
.
content
}
</
div
>
</
Cell
>
<
CellGroup
title
=
"链接 | 分组用法"
>
<
Cell
title
=
"链接"
isLink
/>
<
h2
>
{
translated
.
title8
}
</
h2
>
<
Cell
title
=
{
<
span
>
Title
<
b
style
=
{
{
color
:
'
red
'
}
}
>
1
</
b
>
</
span
>
}
desc
=
{
translated
.
desc
}
/>
<
CellGroup
title
=
{
translated
.
title5
}
desc
=
{
translated
.
desc1
}
>
<
Cell
title
=
{
translated
.
link
}
isLink
/>
<
Cell
title
=
"URL 跳转"
title
=
{
translated
.
urlJump
}
desc
=
"https://jd.com"
isLink
url
=
"https://jd.com"
/>
<
Cell
title
=
"路由跳转 ’/‘ "
to
=
"/"
/>
<
Cell
title
=
{
translated
.
routerJump
}
to
=
"/"
/>
</
CellGroup
>
<
CellGroup
title
=
"自定义右侧箭头区域"
>
<
Cell
title
=
"Switch"
extra
=
{
<
Switch
checked
/>
}
/>
<
CellGroup
title
=
{
translated
.
customRight
}
>
<
Cell
title
=
"Switch"
linkSlot
=
{
<
Switch
checked
/>
}
/>
</
CellGroup
>
<
h2
>
展示图标
</
h2
>
<
Cell
title
=
"姓名"
icon
=
"my"
desc
=
"张三"
isLink
/>
<
h2
>
只展示 desc ,可通过 desc-text-align 调整内容位置
</
h2
>
<
Cell
descTextAlign
=
"left"
desc
=
"张三"
/>
<
CellGroup
title
=
{
translated
.
customLeftIcon
}
>
<
Cell
title
=
{
translated
.
image
}
iconSlot
=
{
<
img
className
=
"nut-icon"
alt
=
""
src
=
"https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
/>
}
/>
</
CellGroup
>
<
h2
>
{
translated
.
displayIcon
}
</
h2
>
<
Cell
title
=
{
translated
.
name
}
icon
=
"my"
desc
=
{
translated
.
desc
}
isLink
/>
<
h2
>
{
translated
.
title6
}
</
h2
>
<
Cell
descTextAlign
=
"left"
desc
=
{
translated
.
desc
}
/>
<
h2
>
垂直居中
</
h2
>
<
Cell
center
title
=
{
translated
.
title
}
subTitle
=
{
translated
.
title1
}
desc
=
{
translated
.
desc
}
/>
</
div
>
</>
)
...
...
src/packages/cell/doc.en-US.md
浏览文件 @
02b5b88f
# Cell
单元格
# Cell
###
介绍
###
Intro
列表项,可组成列表。
The cell is a single display item in the list.
###
安装
###
Install
```
javascript
import
{
Cell
,
CellGroup
}
from
'
@nutui/nutui-react
'
```
##
代码演示
##
Demo
###
基本用法
###
Basic Usage
:::demo
...
...
@@ -22,17 +22,19 @@ import { Cell } from '@nutui/nutui-react';
const
App
=
()
=>
{
const
testClick
=
(
event
:
React
.
MouseEvent
<
HTMLDivElement
,
globalThis
.
MouseEvent
>
)
=>
{
console
.
log
(
'
点击事件
'
)
console
.
log
(
'
Click Test
'
)
}
return
(
<>
<
Cell
title
=
"
我是标题"
desc
=
"描述文字
"
/>
<
Cell
title
=
"
我是标题"
subTitle
=
"副标题描述"
desc
=
"描述文字
"
/>
<
Cell
title
=
"
Title"
desc
=
"Description
"
/>
<
Cell
title
=
"
Title"
subTitle
=
"Subtitle Description"
desc
=
"Description
"
/>
<
Cell
title
=
"点击测试"
click
=
{
(
event
:
React
.
MouseEvent
<
HTMLDivElement
,
globalThis
.
MouseEvent
>
)
=>
testClick
(
event
)
}
/>
title
=
"Click Test"
click
=
{
(
event
:
React
.
MouseEvent
<
HTMLDivElement
,
globalThis
.
MouseEvent
>
)
=>
testClick
(
event
)
}
/>
<
Cell
title
=
"Round Radius 0"
roundRadius
=
{
0
}
/>
</>
);
};
...
...
@@ -41,7 +43,7 @@ export default App;
:::
###
直接使用
###
Size setting large
:::demo
...
...
@@ -52,8 +54,34 @@ import { Cell } from '@nutui/nutui-react';
const
App
=
()
=>
{
return
(
<>
<
Cell
title
=
"我是标题"
desc
=
"描述文字"
>
<
div
>
自定义内容
</
div
>
<
Cell
size
=
"large"
title
=
"Title"
desc
=
"Description"
/>
<
Cell
size
=
"large"
title
=
"Title"
subTitle
=
"Subtitle Description"
desc
=
"Description"
/>
</>
);
};
export
default
App
;
```
:::
### Use Slots
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Cell
>
<
div
>
Content
</
div
>
</
Cell
>
</>
);
...
...
@@ -63,7 +91,32 @@ export default App;
:::
### 链接 | 分组用法
### Use Slots(title slots)
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
title
=
{
<
span
>
Title
<
b
style
=
{
{
color
:
'
red
'
}
}
>
1
</
b
>
</
span
>
}
desc
=
"Description"
/>
);
};
export
default
App
;
```
:::
### Link | CellGroup Usage
:::demo
...
...
@@ -74,10 +127,18 @@ import { CellGroup,Cell } from '@nutui/nutui-react';
const
App
=
()
=>
{
return
(
<>
<
CellGroup
title
=
"链接 | 分组用法"
>
<
Cell
title
=
"链接"
isLink
/>
<
Cell
title
=
"URL 跳转"
desc
=
"https://m.jd.com/"
isLink
url
=
"https://m.jd.com/"
/>
<
Cell
title
=
"路由跳转 ’/‘ "
to
=
"/"
/>
<
CellGroup
title
=
"Link | CellGroup Usage"
desc
=
"Usage nut-cell-group support title desc slots"
>
<
Cell
title
=
"Link Usage"
isLink
/>
<
Cell
title
=
"URL Jump"
desc
=
"https://jd.com"
isLink
url
=
"https://jd.com"
/>
<
Cell
title
=
"Router Jump ’/‘ "
to
=
"/"
/>
</
CellGroup
>
</>
);
...
...
@@ -87,7 +148,7 @@ export default App;
:::
###
自定义右侧箭头区域
###
Customize the right arrow area
:::demo
...
...
@@ -97,8 +158,37 @@ import { CellGroup,Cell,Switch } from '@nutui/nutui-react';
const
App
=
()
=>
{
return
(
<
CellGroup
title
=
"自定义右侧箭头区域"
>
<
Cell
title
=
"Switch"
extra
=
{
<
Switch
checked
/>
}
/>
<
CellGroup
title
=
"Customize the right arrow area"
>
<
Cell
title
=
"Switch"
linkSlot
=
{
<
Switch
checked
/>
}
/>
</
CellGroup
>
);
};
export
default
App
;
```
:::
### Customize the left Icon area
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
CellGroup
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
CellGroup
title
=
"Customize the left Icon area"
>
<
Cell
title
=
"Image"
iconSlot
=
{
<
img
className
=
"nut-icon"
alt
=
""
src
=
"https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
/>
}
/>
</
CellGroup
>
);
};
...
...
@@ -107,7 +197,7 @@ export default App;
:::
###
单元格展示图标
###
Cell Display Icon
:::demo
...
...
@@ -117,7 +207,7 @@ import { Cell } from '@nutui/nutui-react';
const
App
=
()
=>
{
return
(
<
Cell
title
=
"
姓名"
icon
=
"my"
desc
=
"张三
"
isLink
/>
<
Cell
title
=
"
Name"
icon
=
"my"
desc
=
"Description
"
isLink
/>
);
};
export
default
App
;
...
...
@@ -125,7 +215,7 @@ export default App;
:::
###
只展示 desc ,可通过 desc-text-align 调整内容位置
###
Only display desc , you can adjust the content position through desc-text-align
:::demo
...
...
@@ -135,7 +225,27 @@ import { Cell } from '@nutui/nutui-react';
const
App
=
()
=>
{
return
(
<
Cell
descTextAlign
=
"left"
desc
=
"张三"
/>
<
Cell
descTextAlign
=
"left"
desc
=
"Description"
/>
);
};
export
default
App
;
```
:::
### Vertical Center
You can center the left and right contents of the cell vertically through the 'center' attribute.
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
center
title
=
"Title"
subTitle
=
"Subtitle Description"
desc
=
"Desc"
/>
);
};
export
default
App
;
...
...
@@ -145,22 +255,39 @@ export default App;
## API
### Prop
| 字段 | 说明 | 类型 | 默认值 |
| --------------- | -------------------------------------------------------------------------------------------- | --------------- | ------ |
| title | 标题名称 | String | - |
| sub-title | 左侧副标题 | String | - |
| desc | 右侧描述 | String | - |
| desc-text-align | 右侧描述文本对齐方式
[
text-align
](
https://www.w3school.com.cn/cssref/pr_text_text-align.asp
)
| String | right |
| is-link | 是否展示右侧箭头并开启点击反馈 | Boolean | false |
| icon | 左侧
[
图标名称
](
#/icon
)
或图片链接 | String | - |
| url | 点击后跳转的链接地址 | String | - |
| to | 点击后跳转的目标路由对象 | String | - |
| replace | 是否在跳转时替换当前页面历史 | Boolean | false |
| extra | 其他 | React.ReactNode | - |
### Event
### CellGroup Prop
| 字段 | 说明 | 类型 | 默认值 |
|-------|----------|--------|--------|
| title | 分组标题 | String | - |
| desc | 分组描述 | String | - |
| titleSlot | 自定义
`title`
标题区域 | React.ReactNode | - |
| descSlot | 自定义
`desc`
描述区域 | React.ReactNode | - |
### Cell Prop
| 字段 | 说明 | 类型 | 默认值 |
|------------------------|------------------------------------------------------------------------------------------------|------------------|--------|
| title | 标题名称 | React.ReactNode | - |
| subTitle | 左侧副标题 | React.ReactNode | - |
| desc | 右侧描述 | String | - |
| descTextAlign | 右侧描述文本对齐方式
[
text-align
](
https://www.w3school.com.cn/cssref/pr_text_text-align.asp
)
| String | right |
| isLink | 是否展示右侧箭头并开启点击反馈 | Boolean | false |
| to | 点击后跳转的目标路由对象 | String | - |
| replace | 是否在跳转时替换当前页面历史 | Boolean | false |
| roundRadius | 圆角半径 | String| Number | 6px |
| url | 点击后跳转的链接地址 | String | - |
| icon | 左侧
[
图标名称
](
#/icon
)
或图片链接 | String | - |
| center | 是否使内容垂直居中 | Boolean | false |
| size | 单元格大小,可选值为
`large`
| String | - |
| iconSlot | 自定义左侧
`icon`
区域 | React.ReactNode | - |
| linkSlot | 自定义右侧
`link`
区域 | React.ReactNode | - |
### Cell Event
| 名称 | 说明 | 回调参数 |
| ----- | -------- | -------------------------------------------------------------- |
...
...
src/packages/cell/doc.md
浏览文件 @
02b5b88f
...
...
@@ -30,9 +30,11 @@ const App = () => {
<
Cell
title
=
"我是标题"
subTitle
=
"副标题描述"
desc
=
"描述文字"
/>
<
Cell
title
=
"点击测试"
click
=
{
(
event
:
React
.
MouseEvent
<
HTMLDivElement
,
globalThis
.
MouseEvent
>
)
=>
testClick
(
event
)
}
/>
click
=
{
(
event
:
React
.
MouseEvent
<
HTMLDivElement
,
globalThis
.
MouseEvent
>
)
=>
testClick
(
event
)
}
/>
<
Cell
title
=
"圆角设置0"
roundRadius
=
{
0
}
/>
</>
);
};
...
...
@@ -41,7 +43,7 @@ export default App;
:::
###
直接使用
###
尺寸设置 large
:::demo
...
...
@@ -52,8 +54,34 @@ import { Cell } from '@nutui/nutui-react';
const
App
=
()
=>
{
return
(
<>
<
Cell
title
=
"我是标题"
desc
=
"描述文字"
>
<
div
>
自定义内容
</
div
>
<
Cell
size
=
"large"
title
=
"我是标题"
desc
=
"描述文字"
/>
<
Cell
size
=
"large"
title
=
"我是标题"
subTitle
=
"副标题描述"
desc
=
"描述文字"
/>
</>
);
};
export
default
App
;
```
:::
### 直接使用插槽
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Cell
>
<
div
>
自定义内容
</
div
>
</
Cell
>
</>
);
...
...
@@ -63,6 +91,31 @@ export default App;
:::
### 直接使用插槽(title slots)
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
title
=
{
<
span
>
Title
<
b
style
=
{
{
color
:
'
red
'
}
}
>
1
</
b
>
</
span
>
}
desc
=
"描述文字"
/>
);
};
export
default
App
;
```
:::
### 链接 | 分组用法
:::demo
...
...
@@ -74,10 +127,18 @@ import { CellGroup,Cell } from '@nutui/nutui-react';
const
App
=
()
=>
{
return
(
<>
<
CellGroup
title
=
"链接 | 分组用法"
>
<
Cell
title
=
"链接"
isLink
/>
<
Cell
title
=
"URL 跳转"
desc
=
"https://m.jd.com/"
isLink
url
=
"https://m.jd.com/"
/>
<
Cell
title
=
"路由跳转 ’/‘ "
to
=
"/"
/>
<
CellGroup
title
=
"链接 | 分组用法"
desc
=
"使用 nut-cell-group 支持 title desc slots"
>
<
Cell
title
=
"链接"
isLink
/>
<
Cell
title
=
"URL 跳转"
desc
=
"https://jd.com"
isLink
url
=
"https://jd.com"
/>
<
Cell
title
=
"路由跳转 ’/‘ "
to
=
"/"
/>
</
CellGroup
>
</>
);
...
...
@@ -98,7 +159,36 @@ import { CellGroup,Cell,Switch } from '@nutui/nutui-react';
const
App
=
()
=>
{
return
(
<
CellGroup
title
=
"自定义右侧箭头区域"
>
<
Cell
title
=
"Switch"
extra
=
{
<
Switch
checked
/>
}
/>
<
Cell
title
=
"Switch"
linkSlot
=
{
<
Switch
checked
/>
}
/>
</
CellGroup
>
);
};
export
default
App
;
```
:::
### 自定义左侧 Icon 区域
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
CellGroup
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
CellGroup
title
=
"自定义左侧 Icon 区域"
>
<
Cell
title
=
"图片"
iconSlot
=
{
<
img
className
=
"nut-icon"
alt
=
""
src
=
"https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
/>
}
/>
</
CellGroup
>
);
};
...
...
@@ -117,7 +207,7 @@ import { Cell } from '@nutui/nutui-react';
const
App
=
()
=>
{
return
(
<
Cell
title
=
"姓名"
icon
=
"my"
desc
=
"
张三
"
isLink
/>
<
Cell
title
=
"姓名"
icon
=
"my"
desc
=
"
描述文案
"
isLink
/>
);
};
export
default
App
;
...
...
@@ -135,7 +225,27 @@ import { Cell } from '@nutui/nutui-react';
const
App
=
()
=>
{
return
(
<
Cell
descTextAlign
=
"left"
desc
=
"张三"
/>
<
Cell
descTextAlign
=
"left"
desc
=
"描述文案"
/>
);
};
export
default
App
;
```
:::
### 垂直居中
通过
`center`
属性可以让 Cell 的左右内容都垂直居中。
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
center
title
=
"我是标题"
subTitle
=
"副标题描述"
desc
=
"描述文字"
/>
);
};
export
default
App
;
...
...
@@ -145,22 +255,39 @@ export default App;
## API
### Prop
| 字段 | 说明 | 类型 | 默认值 |
| --------------- | -------------------------------------------------------------------------------------------- | --------------- | ------ |
| title | 标题名称 | String | - |
| sub-title | 左侧副标题 | String | - |
| desc | 右侧描述 | String | - |
| desc-text-align | 右侧描述文本对齐方式
[
text-align
](
https://www.w3school.com.cn/cssref/pr_text_text-align.asp
)
| String | right |
| is-link | 是否展示右侧箭头并开启点击反馈 | Boolean | false |
| icon | 左侧
[
图标名称
](
#/icon
)
或图片链接 | String | - |
| url | 点击后跳转的链接地址 | String | - |
| to | 点击后跳转的目标路由对象 | String | - |
| replace | 是否在跳转时替换当前页面历史 | Boolean | false |
| extra | 其他 | React.ReactNode | - |
### Event
### CellGroup Prop
| 字段 | 说明 | 类型 | 默认值 |
|-------|----------|--------|--------|
| title | 分组标题 | String | - |
| desc | 分组描述 | String | - |
| titleSlot | 自定义
`title`
标题区域 | React.ReactNode | - |
| descSlot | 自定义
`desc`
描述区域 | React.ReactNode | - |
### Cell Prop
| 字段 | 说明 | 类型 | 默认值 |
|------------------------|------------------------------------------------------------------------------------------------|------------------|--------|
| title | 标题名称 | React.ReactNode | - |
| subTitle | 左侧副标题 | React.ReactNode | - |
| desc | 右侧描述 | String | - |
| descTextAlign | 右侧描述文本对齐方式
[
text-align
](
https://www.w3school.com.cn/cssref/pr_text_text-align.asp
)
| String | right |
| isLink | 是否展示右侧箭头并开启点击反馈 | Boolean | false |
| to | 点击后跳转的目标路由对象 | String | - |
| replace | 是否在跳转时替换当前页面历史 | Boolean | false |
| roundRadius | 圆角半径 | String | 6px |
| url | 点击后跳转的链接地址 | String | - |
| icon | 左侧
[
图标名称
](
#/icon
)
或图片链接 | String | - |
| center | 是否使内容垂直居中 | Boolean | false |
| size | 单元格大小,可选值为
`large`
| String | - |
| iconSlot | 自定义左侧
`icon`
区域 | React.ReactNode | - |
| linkSlot | 自定义右侧
`link`
区域 | React.ReactNode | - |
### Cell Event
| 名称 | 说明 | 回调参数 |
| ----- | -------- | -------------------------------------------------------------- |
...
...
src/packages/cell/doc.zh-TW.md
浏览文件 @
02b5b88f
# Cell
单
元格
# Cell
單
元格
### 介
绍
### 介
紹
列表
项,可组
成列表。
列表
項,可組
成列表。
### 安
装
### 安
裝
```
javascript
import
{
Cell
,
CellGroup
}
from
'
@nutui/nutui-react
'
```
## 代
码
演示
## 代
碼
演示
### 基本用法
...
...
@@ -22,17 +22,19 @@ import { Cell } from '@nutui/nutui-react';
const
App
=
()
=>
{
const
testClick
=
(
event
:
React
.
MouseEvent
<
HTMLDivElement
,
globalThis
.
MouseEvent
>
)
=>
{
console
.
log
(
'
点击
事件
'
)
console
.
log
(
'
點擊
事件
'
)
}
return
(
<>
<
Cell
title
=
"我是
标题
"
desc
=
"描述文字"
/>
<
Cell
title
=
"我是
标题"
subTitle
=
"副标题
描述"
desc
=
"描述文字"
/>
<
Cell
title
=
"我是
標題
"
desc
=
"描述文字"
/>
<
Cell
title
=
"我是
標題"
subTitle
=
"副標題
描述"
desc
=
"描述文字"
/>
<
Cell
title
=
"点击测试"
click
=
{
(
event
:
React
.
MouseEvent
<
HTMLDivElement
,
globalThis
.
MouseEvent
>
)
=>
testClick
(
event
)
}
/>
title
=
"點擊測試"
click
=
{
(
event
:
React
.
MouseEvent
<
HTMLDivElement
,
globalThis
.
MouseEvent
>
)
=>
testClick
(
event
)
}
/>
<
Cell
title
=
"圓角設置0"
roundRadius
=
{
0
}
/>
</>
);
};
...
...
@@ -41,7 +43,7 @@ export default App;
:::
###
直接使用
###
尺寸設置 large
:::demo
...
...
@@ -52,8 +54,34 @@ import { Cell } from '@nutui/nutui-react';
const
App
=
()
=>
{
return
(
<>
<
Cell
title
=
"我是标题"
desc
=
"描述文字"
>
<
div
>
自定义内容
</
div
>
<
Cell
size
=
"large"
title
=
"我是標題"
desc
=
"描述文字"
/>
<
Cell
size
=
"large"
title
=
"我是標題"
subTitle
=
"副標題描述"
desc
=
"描述文字"
/>
</>
);
};
export
default
App
;
```
:::
### 直接使用插槽
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Cell
>
<
div
>
自定義內容
</
div
>
</
Cell
>
</>
);
...
...
@@ -63,7 +91,32 @@ export default App;
:::
### 链接 | 分组用法
### 直接使用插槽(title slots)
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
title
=
{
<
span
>
Title
<
b
style
=
{
{
color
:
'
red
'
}
}
>
1
</
b
>
</
span
>
}
desc
=
"描述文字"
/>
);
};
export
default
App
;
```
:::
### 鏈接 | 分組用法
:::demo
...
...
@@ -74,10 +127,18 @@ import { CellGroup,Cell } from '@nutui/nutui-react';
const
App
=
()
=>
{
return
(
<>
<
CellGroup
title
=
"链接 | 分组用法"
>
<
Cell
title
=
"链接"
isLink
/>
<
Cell
title
=
"URL 跳转"
desc
=
"https://m.jd.com/"
isLink
url
=
"https://m.jd.com/"
/>
<
Cell
title
=
"路由跳转 ’/‘ "
to
=
"/"
/>
<
CellGroup
title
=
"鏈接 | 分組用法"
desc
=
"使用 nut-cell-group 支持 title desc slots"
>
<
Cell
title
=
"鏈接"
isLink
/>
<
Cell
title
=
"URL 跳轉"
desc
=
"https://jd.com"
isLink
url
=
"https://jd.com"
/>
<
Cell
title
=
"路由跳轉 』/『 "
to
=
"/"
/>
</
CellGroup
>
</>
);
...
...
@@ -87,7 +148,7 @@ export default App;
:::
### 自定
义右侧箭头区
域
### 自定
義右側箭頭區
域
:::demo
...
...
@@ -97,8 +158,37 @@ import { CellGroup,Cell,Switch } from '@nutui/nutui-react';
const
App
=
()
=>
{
return
(
<
CellGroup
title
=
"自定义右侧箭头区域"
>
<
Cell
title
=
"Switch"
extra
=
{
<
Switch
checked
/>
}
/>
<
CellGroup
title
=
"自定義右側箭頭區域"
>
<
Cell
title
=
"Switch"
linkSlot
=
{
<
Switch
checked
/>
}
/>
</
CellGroup
>
);
};
export
default
App
;
```
:::
### 自定義左側 Icon 區域
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
CellGroup
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
CellGroup
title
=
"自定義左側 Icon 區域"
>
<
Cell
title
=
"圖片"
iconSlot
=
{
<
img
className
=
"nut-icon"
alt
=
""
src
=
"https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
/>
}
/>
</
CellGroup
>
);
};
...
...
@@ -107,7 +197,25 @@ export default App;
:::
### 单元格展示图标
### 單元格展示圖標
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<
Cell
title
=
"姓名"
icon
=
"my"
desc
=
"描述文案"
isLink
/>
);
};
export
default
App
;
```
:::
### 只展示 desc ,可通過 desc-text-align 調整內容位置
:::demo
...
...
@@ -117,7 +225,7 @@ import { Cell } from '@nutui/nutui-react';
const
App
=
()
=>
{
return
(
<
Cell
title
=
"姓名"
icon
=
"my"
desc
=
"张三"
isLink
/>
<
Cell
descTextAlign
=
"left"
desc
=
"描述文案"
/>
);
};
export
default
App
;
...
...
@@ -125,7 +233,9 @@ export default App;
:::
### 只展示 desc ,可通过 desc-text-align 调整内容位置
### 垂直居中
通過
`center`
屬性可以讓 Cell 的左右內容都垂直居中。
:::demo
...
...
@@ -135,7 +245,7 @@ import { Cell } from '@nutui/nutui-react';
const
App
=
()
=>
{
return
(
<
Cell
descTextAlign
=
"left"
desc
=
"张三
"
/>
<
Cell
center
title
=
"我是標題"
subTitle
=
"副標題描述"
desc
=
"描述文字
"
/>
);
};
export
default
App
;
...
...
@@ -145,23 +255,40 @@ export default App;
## API
### Prop
| 字段 | 说明 | 类型 | 默认值 |
| --------------- | -------------------------------------------------------------------------------------------- | --------------- | ------ |
| title | 标题名称 | String | - |
| sub-title | 左侧副标题 | String | - |
| desc | 右侧描述 | String | - |
| desc-text-align | 右侧描述文本对齐方式
[
text-align
](
https://www.w3school.com.cn/cssref/pr_text_text-align.asp
)
| String | right |
| is-link | 是否展示右侧箭头并开启点击反馈 | Boolean | false |
| icon | 左侧
[
图标名称
](
#/icon
)
或图片链接 | String | - |
| url | 点击后跳转的链接地址 | String | - |
| to | 点击后跳转的目标路由对象 | String | - |
| replace | 是否在跳转时替换当前页面历史 | Boolean | false |
| extra | 其他 | React.ReactNode | - |
### CellGroup Prop
| 字段 | 說明 | 類型 | 默認值 |
|-------|----------|--------|--------|
| title | 分組標題 | String | - |
| desc | 分組描述 | String | - |
| titleSlot | 自定義
`title`
標題區域 | React.ReactNode | - |
| descSlot | 自定義
`desc`
描述區域 | React.ReactNode | - |
### Cell Prop
| 字段 | 說明 | 類型 | 默認值 |
|------------------------|------------------------------------------------------------------------------------------------|------------------|--------|
| title | 標題名稱 | React.ReactNode | - |
| subTitle | 左側副標題 | React.ReactNode | - |
| desc | 右側描述 | String | - |
| descTextAlign | 右側描述文本對齊方式
[
text-align
](
https://www.w3school.com.cn/cssref/pr_text_text-align.asp
)
| String | right |
| isLink | 是否展示右側箭頭並開啟點擊反饋 | Boolean | false |
| to | 點擊後跳轉的目標路由對象 | String | - |
| replace | 是否在跳轉時替換當前頁面歷史 | Boolean | false |
| roundRadius | 圓角半徑 | String | 6px |
| url | 點擊後跳轉的鏈接地址 | String | - |
| icon | 左側
[
圖標名稱
](
#/icon
)
或圖片鏈接 | String | - |
| center | 是否使內容垂直居中 | Boolean | false |
| size | 單元格大小,可選值為
`large`
| String | - |
| iconSlot | 自定義左側
`icon`
區域 | React.ReactNode | - |
| linkSlot | 自定義右側
`link`
區域 | React.ReactNode | - |
### Event
###
Cell
Event
| 名
称 | 说明 | 回调参数
|
| 名
稱 | 說明 | 回調參數
|
| ----- | -------- | -------------------------------------------------------------- |
| click |
点击
事件 | event: React.MouseEvent
<HTMLDivElement
,
globalThis.MouseEvent
>
|
| click |
點擊
事件 | event: React.MouseEvent
<HTMLDivElement
,
globalThis.MouseEvent
>
|
src/packages/cellgroup/__test__/__snapshots__/cellgroup.spec.tsx.snap
浏览文件 @
02b5b88f
...
...
@@ -10,16 +10,24 @@ exports[`prop title desc subtitle 1`] = `
>
链接 | 分组用法
</div>
<div
class="nut-cell-group__desc"
/>
<div
class="nut-cell-group__wrap"
>
<div
class="nut-cell nut-cell--clickable "
style="border-radius: 6px;"
>
<div
class="nut-cell__title"
>
链接
<div
class="nut-cell__maintitle"
>
链接
</div>
</div>
<i
class="nut-cell__link nut-icon nutui-iconfont nut-icon-right "
...
...
@@ -27,14 +35,19 @@ exports[`prop title desc subtitle 1`] = `
</div>
<div
class="nut-cell nut-cell--clickable "
style="border-radius: 6px;"
>
<div
class="nut-cell__title"
>
URL 跳转
<div
class="nut-cell__maintitle"
>
URL 跳转
</div>
</div>
<div
class="nut-cell__
desc
"
class="nut-cell__
value
"
>
https://jd.com
</div>
...
...
@@ -44,11 +57,16 @@ exports[`prop title desc subtitle 1`] = `
</div>
<div
class="nut-cell nut-cell--clickable "
style="border-radius: 6px;"
>
<div
class="nut-cell__title"
>
路由跳转 ’/‘
<div
class="nut-cell__maintitle"
>
路由跳转 ’/‘
</div>
</div>
<i
class="nut-cell__link nut-icon nutui-iconfont nut-icon-right "
...
...
src/packages/cellgroup/cellgroup.scss
浏览文件 @
02b5b88f
...
...
@@ -9,6 +9,15 @@
margin-top
:
30px
;
margin-bottom
:
10px
;
}
&
__desc
{
display
:
inherit
;
padding
:
$cell-group-desc-padding
;
color
:
$cell-group-desc-color
;
font-size
:
$cell-group-desc-font-size
;
line-height
:
$cell-group-desc-line-height
;
margin-top
:
10px
;
margin-bottom
:
10px
;
}
&
__wrap
{
display
:
inherit
;
border-radius
:
$cell-border-radius
;
...
...
@@ -21,4 +30,9 @@
border-radius
:
0
;
}
}
.nut-cell
{
&
::after
{
border-bottom
:
$cell-after-border-bottom
;
}
}
}
src/packages/cellgroup/cellgroup.tsx
浏览文件 @
02b5b88f
import
React
,
{
FunctionComponent
}
from
'
react
'
import
React
,
{
FunctionComponent
,
ReactNode
}
from
'
react
'
import
bem
from
'
@/utils/bem
'
export
interface
CellGroupProps
{
title
:
string
title
:
ReactNode
desc
:
ReactNode
titleSlot
:
ReactNode
descSlot
:
ReactNode
classPrefix
:
string
}
const
defaultProps
=
{
title
:
''
,
desc
:
''
,
titleSlot
:
null
,
descSlot
:
null
,
classPrefix
:
'
nutui-cell-group
'
,
}
as
CellGroupProps
export
const
CellGroup
:
FunctionComponent
<
Partial
<
CellGroupProps
>>
=
(
props
)
=>
{
const
{
children
,
classPrefix
,
title
}
=
{
const
{
children
,
classPrefix
,
title
,
desc
,
titleSlot
,
descSlot
}
=
{
...
defaultProps
,
...
props
,
}
const
b
=
bem
(
'
cell-group
'
)
return
(
<
div
className
=
{
b
(
null
,
[
classPrefix
])
}
>
{
title
?
<
div
className
=
{
b
(
'
title
'
)
}
>
{
title
}
</
div
>
:
null
}
{
titleSlot
||
(
<>
{
title
?
<
div
className
=
{
b
(
'
title
'
)
}
>
{
title
}
</
div
>
:
null
}
</>
)
}
{
descSlot
||
(
<>
{
title
?
<
div
className
=
{
b
(
'
desc
'
)
}
>
{
desc
}
</
div
>
:
null
}
</>
)
}
<
div
className
=
{
b
(
'
wrap
'
)
}
>
{
children
}
</
div
>
</
div
>
)
...
...
src/packages/tag/demo.tsx
浏览文件 @
02b5b88f
...
...
@@ -13,18 +13,18 @@ const TagDemo = () => {
<
div
className
=
"demo"
>
<
h2
>
基础用法
</
h2
>
<
CellGroup
>
<
Cell
title
=
"primary类型"
extra
=
{
<
Tag
type
=
"primary"
>
标签
</
Tag
>
}
/>
<
Cell
title
=
"success类型"
extra
=
{
<
Tag
type
=
"success"
>
标签
</
Tag
>
}
/>
<
Cell
title
=
"danger类型"
extra
=
{
<
Tag
type
=
"danger"
>
标签
</
Tag
>
}
/>
<
Cell
title
=
"warning类型"
extra
=
{
<
Tag
type
=
"warning"
>
标签
</
Tag
>
}
/>
<
Cell
title
=
"primary类型"
linkSlot
=
{
<
Tag
type
=
"primary"
>
标签
</
Tag
>
}
/>
<
Cell
title
=
"success类型"
linkSlot
=
{
<
Tag
type
=
"success"
>
标签
</
Tag
>
}
/>
<
Cell
title
=
"danger类型"
linkSlot
=
{
<
Tag
type
=
"danger"
>
标签
</
Tag
>
}
/>
<
Cell
title
=
"warning类型"
linkSlot
=
{
<
Tag
type
=
"warning"
>
标签
</
Tag
>
}
/>
</
CellGroup
>
<
h2
>
样式风格
</
h2
>
<
CellGroup
>
<
Cell
title
=
"空心样式"
extra
=
{
<
Tag
plain
>
标签
</
Tag
>
}
/>
<
Cell
title
=
"空心样式"
linkSlot
=
{
<
Tag
plain
>
标签
</
Tag
>
}
/>
<
Cell
title
=
"圆角样式"
extra
=
{
linkSlot
=
{
<
Tag
round
type
=
"primary"
>
标签
</
Tag
>
...
...
@@ -32,7 +32,7 @@ const TagDemo = () => {
/>
<
Cell
title
=
"标记样式"
extra
=
{
linkSlot
=
{
<
Tag
mark
type
=
"primary"
>
标签
</
Tag
>
...
...
@@ -40,7 +40,7 @@ const TagDemo = () => {
/>
<
Cell
title
=
"可关闭标签"
extra
=
{
linkSlot
=
{
<
Tag
isShow
=
{
isShow
}
closeable
onClick
=
{
close
}
type
=
"primary"
>
标签
</
Tag
>
...
...
@@ -50,10 +50,10 @@ const TagDemo = () => {
<
h2
>
自定义
</
h2
>
<
CellGroup
>
<
Cell
title
=
"背景颜色"
extra
=
{
<
Tag
color
=
"#FA685D"
>
标签
</
Tag
>
}
/>
<
Cell
title
=
"背景颜色"
linkSlot
=
{
<
Tag
color
=
"#FA685D"
>
标签
</
Tag
>
}
/>
<
Cell
title
=
"文字颜色"
extra
=
{
linkSlot
=
{
<
Tag
color
=
"#E9E9E9"
textColor
=
"#999999"
>
标签
</
Tag
>
...
...
@@ -61,7 +61,7 @@ const TagDemo = () => {
/>
<
Cell
title
=
"空心颜色"
extra
=
{
linkSlot
=
{
<
Tag
color
=
"#FA2400"
plain
>
标签
</
Tag
>
...
...
src/styles/variables.scss
浏览文件 @
02b5b88f
...
...
@@ -19,7 +19,8 @@ $black: #000;
// padding
$padding-xs
:
12px
;
$font-family
:
PingFang
SC
,
Microsoft
YaHei
,
Helvetica
,
Hiragino
Sans
GB
,
SimSun
,
sans-serif
!
default
;
$font-family
:
PingFang
SC
,
Microsoft
YaHei
,
Helvetica
,
Hiragino
Sans
GB
,
SimSun
,
sans-serif
!
default
;
// ---- Animation ----
$animation-duration
:
0
.25s
!
default
;
...
...
@@ -94,21 +95,33 @@ $button-plain-background-color: $white;
// cell
$cell-color
:
$title-color2
;
$cell-title-font
:
$font-size-2
;
$cell-title-desc-font
:
$font-size-1
;
$cell-desc-font
:
$font-size-2
;
$cell-desc-color
:
$disable-color
;
$cell-border-radius
:
6px
;
$cell-color
:
$title-color2
!
default
;
$cell-title-font
:
$font-size-2
!
default
;
$cell-title-desc-font
:
$font-size-1
!
default
;
$cell-desc-font
:
$font-size-2
!
default
;
$cell-desc-color
:
$disable-color
!
default
;
$cell-border-radius
:
6px
!
default
;
$cell-padding
:
13px
16px
!
default
;
$cell-line-height
:
20px
!
default
;
$cell-after-right
:
16px
!
default
;
$cell-after-border-bottom
:
2px
solid
#f5f6f7
!
default
;
$cell-default-icon-margin
:
0
4px
0
0px
!
default
;
$cell-large-title-font
:
$font-size-large
!
default
;
$cell-large-title-desc-font
:
$font-size-base
!
default
;
$cell-large-padding
:
15px
16px
!
default
;
$cell-background
:
$white
!
default
;
// cell-group
$cell-group-title-padding
:
0
10px
;
$cell-group-title-color
:
#909ca4
;
$cell-group-title-font-size
:
$font-size-2
;
$cell-group-title-line-height
:
20px
;
$cell-group-background-color
:
$white
;
$cell-group-title-padding
:
0
10px
!
default
;
$cell-group-title-color
:
#909ca4
!
default
;
$cell-group-title-font-size
:
$font-size-2
!
default
;
$cell-group-title-line-height
:
20px
!
default
;
$cell-group-desc-padding
:
0
10px
!
default
;
$cell-group-desc-color
:
#909ca4
!
default
;
$cell-group-desc-font-size
:
$font-size-1
!
default
;
$cell-group-desc-line-height
:
16px
!
default
;
$cell-group-background-color
:
$white
!
default
;
// icon
$icon-height
:
20px
;
...
...
@@ -246,10 +259,18 @@ $infinite-bottom-color: #c8c8c8;
//range
$range-max
:
#333333
;
$rang-bg-color
:
rgba
(
$primary-color
,
0
.5
);
$rang-bar-bg-color
:
linear-gradient
(
135deg
,
$primary-color
0%
,
$primary-color-end
100%
);
$rang-bar-bg-color
:
linear-gradient
(
135deg
,
$primary-color
0%
,
$primary-color-end
100%
);
//address
$address-region-tab-line
:
linear-gradient
(
90deg
,
$primary-color
0%
,
$primary-color-end
100%
);
$address-region-tab-line
:
linear-gradient
(
90deg
,
$primary-color
0%
,
$primary-color-end
100%
);
//steps
$steps-base-icon-width
:
25px
!
default
;
...
...
@@ -303,7 +324,11 @@ $signature-border-color: #dadada;
$fixednav-bg-color
:
$white
;
$fixednav-font-color
:
$black
;
$fixednav-index
:
201
;
$fixednav-btn-bg
:
linear-gradient
(
135deg
,
rgba
(
250
,
25
,
44
,
1
)
0%
,
rgba
(
250
,
63
,
25
,
1
)
100%
);
$fixednav-btn-bg
:
linear-gradient
(
135deg
,
rgba
(
250
,
25
,
44
,
1
)
0%
,
rgba
(
250
,
63
,
25
,
1
)
100%
);
// Tag
$tag-font-size
:
12px
!
default
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录