Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

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

未验证 提交 02b5b88f 编写于 作者: 拧 拧巴的猫 提交者： GitHub
浏览文件
操作

feat: cell组件props补全+demo和文档国际化+单元测试修改 (#154) 

* fix: cell组件props补全+demo和文档国际化+单元测试修改

* fix: cell Pr修改

* fix: cell 用例修改
上级 246ec74e
隐藏空白更改
内联 并排
Showing with 915 addition and 253 deletion
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__maintitle"
class="nut-cell__title"
>
我是标题
<div
class="nut-cell__maintitle"
>
我是标题
</div>
<div
class="nut-cell__subtitle"
>
副标题描述
</div>
</div>
<div
class="nut-cell__subtitle"
class="nut-cell__value"
>
副标题描述
描述文字
</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.
先完成此消息的编辑！
想要评论请 注册 或