List: support responsive #7272
List: support responsive #7272
Conversation
nikogu
commented
Aug 21, 2017
nikogu
commented
- support responsive just like Grid
- fixed style on device with small screen
|
@nikogu, thanks for your PR! By analyzing the history of the files in this pull request, we identified @ddcat1115 to be a potential reviewer. |
components/list/demo/grid.md
Outdated
| sm={{ gutter: 16, column: 2 }} | ||
| md={{ gutter: 16, column: 4 }} | ||
| lg={{ gutter: 16, column: 6 }} | ||
| xl={{ gutter: 16, column: 8 }} |
There was a problem hiding this comment.
这个会根据使用场景，自己决定要几列吧。。。比如如果他内容多，可能同样宽度列只要 2 列？
感觉 List.Item 的内容形式还是很多样的，可能是 Card，也可能是竖直的 List.Item，如果固定死了就不太好改，而且有时候，可能只需要定义其中一种，比如只需要 sm 的情况改一下
这里这个 demo，是为了展示所有的情况，就都写出来了。
There was a problem hiding this comment.
平时用不到的配置，最好不要影响默认的 demo。不然用户一般都是直接拷贝，或者以为是必选的。
There was a problem hiding this comment.
xs sm 这一串都是依赖 grid 属性的，没有 grid 就没有意义。考虑下如何合并到 grid 里。
components/list/index.tsx
Outdated
|
|
||
| window.addEventListener('resize', gap(() => { | ||
| this.responsive(); | ||
| }, 16.66)); |
There was a problem hiding this comment.
内部直接用 Col Row 做包装，不单独实现响应式。可以参考 https://github.com/ant-design/test/blob/master/scaffold/src/components/DescriptionList/DescriptionList.js
components/list/index.tsx
Outdated
| isNotRelease = false; | ||
| }, time); | ||
| } | ||
| }; |
There was a problem hiding this comment.
ant-design/components/affix/index.tsx
Line 123 in f9273bc
| @@ -2167,7 +2167,6 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = ` | |||
| id="input-number" | |||
| max="10" | |||
| min="1" | |||
| step="1" | |||
components/list/index.tsx
Outdated
| sm?: number; | ||
| md?: number; | ||
| lg?: number; | ||
| xl?: number; |
There was a problem hiding this comment.
这个固定的了吗...有可能我 List.Item 内容多，lg 下显示 2行，也有可能是 Card，lg 下显示 4 行
There was a problem hiding this comment.
@afc163 要不加个 warning 好了，然后还是自动 floor？
There was a problem hiding this comment.
用 ts 的定义 + react propTypes 进行约束。
Codecov Report
@@ Coverage Diff @@
## antd-3.0 #7272 +/- ##
============================================
+ Coverage 86.12% 86.14% +0.01%
============================================
Files 247 247
Lines 5060 5065 +5
Branches 1392 1393 +1
============================================
+ Hits 4358 4363 +5
Misses 702 702
Continue to review full report at Codecov.
|
components/list/style/index.less
Outdated
| } | ||
| } | ||
|
|
||
| @media screen and (max-width: 480px) { |
components/list/Item.tsx
Outdated
| sm?: 1 | 2 | 3 | 4 | 8 | 12 | 24; | ||
| md?: 1 | 2 | 3 | 4 | 8 | 12 | 24; | ||
| lg?: 1 | 2 | 3 | 4 | 8 | 12 | 24; | ||
| xl?: 1 | 2 | 3 | 4 | 8 | 12 | 24; |
