Skip to content

Commit 6a98990

Browse files
youlunayouluna
committed
feat(List): make list configurable
1 parent c4b2cb4 commit 6a98990

File tree

2 files changed

+75
-39
lines changed

2 files changed

+75
-39
lines changed

‎docs/list/theme/index.jsx

+52-16
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,29 @@ import ReactDOM from 'react-dom';
33
import '../../../src/demo-helper/style.js';
44
import { Demo, DemoGroup, initDemo } from '../../../src/demo-helper';
55
import ConfigProvider from '../../../src/config-provider';
6+
import Box from '../../../src/box';
7+
import Button from '../../../src/button';
8+
import Avatar from '../../../src/avatar';
9+
import Divider from '../../../src/divider';
610
import zhCN from '../../../src/locale/zh-cn';
711
import enUS from '../../../src/locale/en-us';
812
import '../../../src/list/style.js';
13+
import '../../../src/box/style.js';
14+
import '../../../src/button/style.js';
15+
import '../../../src/divider/style.js';
16+
import '../../../src/avatar/style.js';
917
import List from '../../../src/list';
1018

1119
const i18nMap = {
1220
'zh-cn': {
1321
'list': '列表',
14-
normal: '正常'
22+
normal: '正常',
23+
small: '小列表'
1524
},
1625
'en-us': {
1726
'list': 'List',
1827
normal: 'Normal',
28+
small: '小列表'
1929
},
2030
};
2131

@@ -24,17 +34,7 @@ class RenderList extends React.Component {
2434
super(props);
2535
this.state = {
2636
demoFunction: {
27-
hasChildren: {
28-
label: 'List使用',
29-
value: 'false',
30-
enum: [{
31-
label: '不独立使用',
32-
value: false
33-
}, {
34-
label: '独立使用',
35-
value: true
36-
}]
37-
}
37+
3838
}
3939
};
4040
}
@@ -46,12 +46,48 @@ class RenderList extends React.Component {
4646
render() {
4747
const { i18nMap } = this.props;
4848
const { demoFunction } = this.state;
49-
const hasChildren = demoFunction.hasChildren.value === 'true';
49+
const actions = (<Box direction="row" align="center" style={{whiteSpace: 'nowrap', height: '100%', paddingLeft: 100}}>
50+
<Button text type="primary">编辑</Button>
51+
<Divider direction="ver" />
52+
<Button text type="primary">订阅</Button>
53+
<Divider direction="ver" />
54+
<Button text type="primary">删除</Button>
55+
</Box>);
5056

51-
return (<Demo title={i18nMap['list']} demoFunction={demoFunction} onFunctionChange={this.onFunctionChange}>
52-
<Demo title={i18nMap['list']}>
57+
return (<Demo title={i18nMap.list} demoFunction={demoFunction} onFunctionChange={this.onFunctionChange}>
58+
<Demo title={i18nMap.list}>
59+
<DemoGroup label={i18nMap.small}>
60+
<List size={"small"} header={<div>Notifications</div>}>
61+
<List.Item extra={'$20'} media={<Avatar src={'https://img.alicdn.com/tfs/TB1JLwHvHj1gK0jSZFOXXc7GpXa-200-200.png'}/>} title="Title">List Item 1</List.Item>
62+
<List.Item extra={'$20'} title="Title" media={<Avatar src={'https://img.alicdn.com/tfs/TB1JLwHvHj1gK0jSZFOXXc7GpXa-200-200.png'}/>}>List Item 2</List.Item>
63+
<List.Item extra={'$20'} title="Title" media={<Avatar src={'https://img.alicdn.com/tfs/TB1JLwHvHj1gK0jSZFOXXc7GpXa-200-200.png'}/>}>List Item 3</List.Item>
64+
<List.Item extra={'$20'} title="Title" media={<Avatar src={'https://img.alicdn.com/tfs/TB1JLwHvHj1gK0jSZFOXXc7GpXa-200-200.png'}/>}>List Item 4</List.Item>
65+
<List.Item extra={'$20'} title="Title" media={<Avatar src={'https://img.alicdn.com/tfs/TB1JLwHvHj1gK0jSZFOXXc7GpXa-200-200.png'}/>}>List Item 5</List.Item>
66+
</List>
67+
</DemoGroup>
5368
<DemoGroup label={i18nMap.normal}>
54-
<List hasChildren={hasChildren}/>
69+
<List>
70+
<List.Item extra={actions} media={<img width="161" height="108" src={'https://img.alicdn.com/tfs/TB1R5fio4v1gK0jSZFFXXb0sXXa-322-216.png'}/>} title="构建一套产品化设计系统">
71+
<p style={{margin: '12px 0'}}>随着互联网行业的聚变式发展，在电商业务从“信息透出” 到 “在线交易” 的过程中，网站 UI 构建也经历了“体验一致性”、“设计效率”、“UI系统构建/应用效率”、“多端适配” …</p>
72+
<div>谢瑶 3 小时前更新</div>
73+
</List.Item>
74+
<List.Item extra={actions} title="构建一套产品化设计系统" media={<img width="161" height="108" src={'https://img.alicdn.com/tfs/TB1R5fio4v1gK0jSZFFXXb0sXXa-322-216.png'}/>}>
75+
<p style={{margin: '12px 0'}}>随着互联网行业的聚变式发展，在电商业务从“信息透出” 到 “在线交易” 的过程中，网站 UI 构建也经历了“体验一致性”、“设计效率”、“UI系统构建/应用效率”、“多端适配” …</p>
76+
<div>谢瑶 3 小时前更新</div>
77+
</List.Item>
78+
<List.Item extra={actions} title="构建一套产品化设计系统" media={<img width="161" height="108" src={'https://img.alicdn.com/tfs/TB1R5fio4v1gK0jSZFFXXb0sXXa-322-216.png'}/>}>
79+
<p style={{margin: '12px 0'}}>随着互联网行业的聚变式发展，在电商业务从“信息透出” 到 “在线交易” 的过程中，网站 UI 构建也经历了“体验一致性”、“设计效率”、“UI系统构建/应用效率”、“多端适配” …</p>
80+
<div>谢瑶 3 小时前更新</div>
81+
</List.Item>
82+
<List.Item extra={actions} title="构建一套产品化设计系统" media={<img width="161" height="108" src={'https://img.alicdn.com/tfs/TB1R5fio4v1gK0jSZFFXXb0sXXa-322-216.png'}/>}>
83+
<p style={{margin: '12px 0'}}>随着互联网行业的聚变式发展，在电商业务从“信息透出” 到 “在线交易” 的过程中，网站 UI 构建也经历了“体验一致性”、“设计效率”、“UI系统构建/应用效率”、“多端适配” …</p>
84+
<div>谢瑶 3 小时前更新</div>
85+
</List.Item>
86+
<List.Item extra={actions} title="构建一套产品化设计系统" media={<img width="161" height="108" src={'https://img.alicdn.com/tfs/TB1R5fio4v1gK0jSZFFXXb0sXXa-322-216.png'}/>}>
87+
<p style={{margin: '12px 0'}}>随着互联网行业的聚变式发展，在电商业务从“信息透出” 到 “在线交易” 的过程中，网站 UI 构建也经历了“体验一致性”、“设计效率”、“UI系统构建/应用效率”、“多端适配” …</p>
88+
<div>谢瑶 3 小时前更新</div>
89+
</List.Item>
90+
</List>
5591
</DemoGroup>
5692
</Demo>
5793
</Demo>);

‎src/list/scss/variable.scss

+23-23
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
/// @family data-display
1111
/// @varPrefix $list-
1212
/// @classPrefix {prefix}-list
13-
/// @order {}
13+
/// @order {"size/title":10,"size/item":11,"size/item/title":110,"size/item/content":111,"statement/normal":10,"statement/normal/divider":100,"statement/normal/title":101,"statement/normal/content":102,"statement/normal/extra":103}
1414
////
1515

1616
// Unconfigurable
@@ -28,27 +28,27 @@ $list-size-s-title-font-size: $font-size-subhead !default;
2828
$list-size-s-title-font-weight: $font-weight-3 !default;
2929
/// padding(l, r)
3030
/// @namespace size/item
31-
$list-size-s-item-padding-lr: $s-0 !default;
31+
$list-size-s-item-padding-lr: $s-zero !default;
3232
/// padding(t, b)
3333
/// @namespace size/item
3434
$list-size-s-item-padding-tb: $s-3 !default;
3535
/// margin(l, r)
3636
/// @namespace size/item
3737
$list-size-s-item-media-margin: $s-2 !default;
38-
/// font size
39-
/// @namespace size/item/title
38+
/// title font-size
39+
/// @namespace size/item
4040
$list-size-s-item-title-font-size: $font-size-body-2 !default;
41-
/// line height
42-
/// @namespace size/item/title
41+
/// title line-height
42+
/// @namespace size/item
4343
$list-size-s-item-title-line-height: $font-lineheight-2 !default;
44-
/// font size
45-
/// @namespace size/item/content
44+
/// content font-size
45+
/// @namespace size/item
4646
$list-size-s-item-content-font-size: $font-size-body-1 !default;
47-
/// line height
48-
/// @namespace size/item/content
47+
/// content line-height
48+
/// @namespace size/item
4949
$list-size-s-item-content-line-height: $font-lineheight-1 !default;
50-
/// font-weight
51-
/// @namespace size/item/title
50+
/// title font-weight
51+
/// @namespace size/item
5252
$list-size-s-item-title-font-weight: $font-weight-3 !default;
5353
/// font-size
5454
/// @namespace size/title
@@ -58,27 +58,27 @@ $list-size-m-title-font-size: $font-size-title !default;
5858
$list-size-m-title-font-weight: $font-weight-3 !default;
5959
/// padding(l, r)
6060
/// @namespace size/item
61-
$list-size-m-item-padding-lr: $s-0 !default;
61+
$list-size-m-item-padding-lr: $s-zero !default;
6262
/// padding(t, b)
6363
/// @namespace size/item
6464
$list-size-m-item-padding-tb: $s-4 !default;
6565
/// margin(l, r)
6666
/// @namespace size/item
6767
$list-size-m-item-media-margin: $s-2 !default;
68-
/// font size
69-
/// @namespace size/item/title
68+
/// title font-size
69+
/// @namespace size/item
7070
$list-size-m-item-title-font-size: $font-size-subhead !default;
71-
/// line height
72-
/// @namespace size/item/title
71+
/// title line-height
72+
/// @namespace size/item
7373
$list-size-m-item-title-line-height: $font-lineheight-2 !default;
74-
/// font size
75-
/// @namespace size/item/content
74+
/// content font-size
75+
/// @namespace size/item
7676
$list-size-m-item-content-font-size: $font-size-body-2 !default;
77-
/// line height
78-
/// @namespace size/item/content
77+
/// content line-height
78+
/// @namespace size/item
7979
$list-size-m-item-content-line-height: $font-lineheight-2 !default;
80-
/// font-weight
81-
/// @namespace size/item/title
80+
/// title font-weight
81+
/// @namespace size/item
8282
$list-size-m-item-title-font-weight: $font-weight-3 !default;
8383
/// color
8484
/// @namespace statement/normal/divider

0 commit comments

Comments
 (0)