feat(List): Added list pagination alignment option #39858
Conversation
|
|
|
feature branch please~ |
ok |
components/list/index.tsx
Outdated
| @@ -206,7 +206,10 @@ function List<T>({ | |||
| paginationProps.current = largestPage; | |||
| } | |||
| const paginationContent = pagination ? ( | |||
| <div className={`${prefixCls}-pagination`}> | |||
| <div | |||
| className={`${prefixCls}-pagination`} | |||
There was a problem hiding this comment.
嗯嗯，大佬我的想法是将 align 这个属性透传到 style 里面去，但是小弟不知道咋整进去，不知道大佬有没有相关的例子。o(╥﹏╥)o
There was a problem hiding this comment.
@afc163 大佬我这里借鉴了一下 table 里 pagination 的做法
335cb16
to
dcd1423
Compare
|
看一下 ci 报错，你需要更新一下 test snapshot。 |
嗯嗯 我按照提示更新了 test snapshot |
Codecov ReportBase: 100.00% // Head: 99.98% // Decreases project coverage by
Additional details and impacted files@@ Coverage Diff @@
## feature #39858 +/- ##
===========================================
- Coverage 100.00% 99.98% -0.02%
===========================================
Files 557 557
Lines 9638 9639 +1
Branches 2732 2733 +1
===========================================
Hits 9638 9638
- Misses 0 1 +1
Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here. ☔ View full report at Codecov. |
components/list/style/index.tsx
Outdated
| @@ -13,6 +13,7 @@ interface ListToken extends FullToken<'List'> { | |||
| listItemPaddingLG: string; | |||
| listItemPaddingSM: string; | |||
| listItemPadding: string; | |||
| listPaginationTA: string; | |||
There was a problem hiding this comment.
这个是啥？
害 病糊涂了 昨天想试试 能不能透传进去 忘记删除了 o(╥﹏╥)o
components/list/demo/vertical.tsx
Outdated
| @@ -28,6 +28,7 @@ const App: React.FC = () => ( | |||
| console.log(page); | |||
| }, | |||
| pageSize: 3, | |||
| align: 'center', | |||
There was a problem hiding this comment.
建议单独加个例子，不改这个。
大佬 我在查看示例的时候发现了 list doc 切换至英文 会出现这种情况：
然后我也发现了问题所在
那么这个我是一起提交还是再单独提交一次呢？
There was a problem hiding this comment.
这个可以单独提交到 master 分支
嗯呐
components/list/style/index.tsx
Outdated
|
|
||
| '&-align-start': { | ||
| textAlign: 'start', | ||
| }, | ||
|
|
||
| '&-align-center': { | ||
| textAlign: 'center', | ||
| }, | ||
|
|
||
| '&-align-end': { | ||
| textAlign: 'end', | ||
| }, |
There was a problem hiding this comment.
体积稍微增加了一点。
这一段代码是可以直接 ['start', 'center', 'end'].map(...) 出来的，可以试着改写下。
There was a problem hiding this comment.
体积稍微增加了一点。
这一段代码是可以直接
['start', 'center', 'end'].map(...)出来的，可以试着改写下。
嗯嗯
There was a problem hiding this comment.
体积稍微增加了一点。
这一段代码是可以直接
['start', 'center', 'end'].map(...)出来的，可以试着改写下。
代码体积的增加应该是我示例的部分和一些可优化点没有做好，我再次优化一下
There was a problem hiding this comment.
大佬小弟发现这里用 map 好像行不通，不过我用 reduce 写出来但是很不优雅
...['start', 'center', 'end'].reduce((obj, item) => {
obj[`&-align-${item}`] = {
textAlign: item,
}
return obj
}, {} as any)There was a problem hiding this comment.
可以在上面声明一个变量，不用都写在这里。
好
components/pagination/Pagination.tsx
Outdated
| @@ -23,8 +23,11 @@ export interface PaginationProps extends RcPaginationProps { | |||
|
|
|||
| export type PaginationPosition = 'top' | 'bottom' | 'both'; | |||
|
|
|||
| export type paginationAlign = 'start' | 'center' | 'end'; | |||
There was a problem hiding this comment.
| export type paginationAlign = 'start' | 'center' | 'end'; | |
| export type PaginationAlign = 'start' | 'center' | 'end'; |
[中文版模板 / Chinese template]
🤔 This is a ...
🔗 Related issue link
想实现类似
Table组件的分页位置设置 https://codesandbox.io/s/ekl5og?file=/demo.tsx💡 Background and solution
在最近的业务开发过程中，由于数据源内容简单，因此采用了
List组件进行展示，但是发现分页需要导入后手动实现底部居中的效果（设计大大设计的居中😭）。因此在原有的基础上增加了设置分页对齐的选项，实现了不用导入即可实现居中或者左对齐的功能。📝 Changelog
List组件的分页增加对齐位置的选项☑️ Self-Check before Merge