diff --git a/components/list/Item.tsx b/components/list/Item.tsx index 39d6edf9cc..696bc45f86 100644 --- a/components/list/Item.tsx +++ b/components/list/Item.tsx @@ -1,11 +1,8 @@ import React from 'react'; +import PropTypes from 'prop-types'; import classNames from 'classnames'; import { Col } from '../grid'; - -export interface ListItemGridType { - gutter?: number; - column?: number; -} +import { ListGridType } from './index'; export interface ListItemProps { className?: string; @@ -14,7 +11,7 @@ export interface ListItemProps { style?: React.CSSProperties; extra: React.ReactNode; actions?: Array; - grid?: ListItemGridType; + grid?: ListGridType; Meta: React.ReactNode; } @@ -36,14 +33,14 @@ export const Meta = (props: ListItemMetaProps) => { title, description, ...others, - } = props; + } = props; const classString = classNames(`${prefixCls}-item-meta`, className); const content = (
{title &&

{title}

} - {description &&

{description}

} + {description &&
{description}
}
); @@ -55,8 +52,24 @@ export const Meta = (props: ListItemMetaProps) => { ); }; +function getGrid(grid, t) { + return grid[t] && Math.floor(24 / grid[t]); +} + +const GridColumns = ['', 1, 2, 3, 4, 6, 8, 12, 24]; + export default class Item extends React.Component { static Meta: typeof Meta = Meta; + + static propTypes = { + column: PropTypes.oneOf(GridColumns), + xs: PropTypes.oneOf(GridColumns), + sm: PropTypes.oneOf(GridColumns), + md: PropTypes.oneOf(GridColumns), + lg: PropTypes.oneOf(GridColumns), + xl: PropTypes.oneOf(GridColumns), + }; + _id: number = new Date().getTime(); render() { @@ -106,14 +119,23 @@ export default class Item extends React.Component { ); - const mainContent = grid ? ( -
- {extra && extraContent} - {!extra && metaContent} - {!extra && content} - {!extra && actionsContent} -
- ) : ( + const mainContent = grid ? ( + +
+ {extra && extraContent} + {!extra && metaContent} + {!extra && content} + {!extra && actionsContent} +
+ + ) : (
{extra && extraContent} {!extra && metaContent} diff --git a/components/list/__tests__/__snapshots__/demo.test.js.snap b/components/list/__tests__/__snapshots__/demo.test.js.snap index 41a67d48c7..48c0d1e199 100644 --- a/components/list/__tests__/__snapshots__/demo.test.js.snap +++ b/components/list/__tests__/__snapshots__/demo.test.js.snap @@ -33,17 +33,21 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = ` Ant design -

Ant Design, a design language for background applications, is refined by Ant UED Team -

+
- Content +
+ Content +
    -

    Ant Design, a design language for background applications, is refined by Ant UED Team -

    +
    - Content +
    + Content +
      -

      Ant Design, a design language for background applications, is refined by Ant UED Team -

      +
      - Content +
      + Content +
        -

        Ant Design, a design language for background applications, is refined by Ant UED Team -

        +
        - Content +
        + Content +
          `; +exports[`renders ./components/list/demo/resposive.md correctly 1`] = ` +
          +
          +
          +
          +
          +
          +
          +
          +
          + Card title +
          +
          +
          +
          + Card content +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          + Card title +
          +
          +
          +
          + Card content +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          + Card title +
          +
          +
          +
          + Card content +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          + Card title +
          +
          +
          +
          + Card content +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          + Card title +
          +
          +
          +
          + Card content +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          +
          + Card title +
          +
          +
          +
          + Card content +
          +
          +
          +
          +
          +
          +
          +
          +
          +`; + exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
          -

          Ant Design, a design language for background applications, is refined by Ant UED Team. -

          +
          -

          Ant Design, a design language for background applications, is refined by Ant UED Team. -

          +
          -

          Ant Design, a design language for background applications, is refined by Ant UED Team. -

          +
          -

          Ant Design, a design language for background applications, is refined by Ant UED Team. -

          +
          -

          Ant Design, a design language for background applications, is refined by Ant UED Team. -

          +
          -

          Ant Design, a design language for background applications, is refined by Ant UED Team. -

          +
          -

          Ant Design, a design language for background applications, is refined by Ant UED Team. -

          +
          -

          Ant Design, a design language for background applications, is refined by Ant UED Team. -

          +
          -

          Ant Design, a design language for background applications, is refined by Ant UED Team. -

          +
          -

          Ant Design, a design language for background applications, is refined by Ant UED Team. -

          +
          Ant design} description="Ant Design, a design language for background applications, is refined by Ant UED Team" /> - Content +
          Content
          编辑, 更多]}> Ant design} description="Ant Design, a design language for background applications, is refined by Ant UED Team" /> - Content +
          Content
           编辑, 更多]}> Ant design} description="Ant Design, a design language for background applications, is refined by Ant UED Team" /> - Content +
          Content
           编辑, 更多]}> Ant design} description="Ant Design, a design language for background applications, is refined by Ant UED Team" /> - Content +
          Content
           , mountNode); diff --git a/components/list/demo/resposive.md b/components/list/demo/resposive.md new file mode 100644 index 0000000000..fcd4598ab6 --- /dev/null +++ b/components/list/demo/resposive.md @@ -0,0 +1,43 @@ +--- +order: 0 +title: + zh-CN: 响应式的栅格列表 + en-US: Grid +--- + +## zh-CN + +响应式的栅格列表。 + +## en-US + +Responsive Grid List. + +````jsx +import { List, Card } from 'antd'; + +ReactDOM.render( + + + Card content + + + Card content + + + Card content + + + Card content + + + Card content + + + Card content + + +, mountNode); +```` diff --git a/components/list/index.en-US.md b/components/list/index.en-US.md index 7840f09274..934659b724 100644 --- a/components/list/index.en-US.md +++ b/components/list/index.en-US.md @@ -24,6 +24,18 @@ A list can be used to display content related to a single subject. The content c | loadingMore | - | boolean | false | | onMoreClick | -| function | - | | pagination | - | boolean \| object | false | +| grid | - | object | - | + +### List grid props +| Property | Description | Type | Default | +---------|-------------|------|--------- +| gutter | - | number | 0 | +| column | - | number | - | +| xs | `<768px` - | number | - | +| sm | `≥768px` - | number | - | +| md | `≥992px` - | number | - | +| lg | `≥1200px` - | number | - | +| xl | `≥1600px` - | number | - | ### List.Item diff --git a/components/list/index.tsx b/components/list/index.tsx index 5d33b5a7b0..b3764f27e2 100644 --- a/components/list/index.tsx +++ b/components/list/index.tsx @@ -11,7 +11,12 @@ import Item from './Item'; export interface ListGridType { gutter?: number; - column?: number; + column?: 1 | 2 | 3 | 4 | 6 | 8 | 12 | 24; + xs?: 1 | 2 | 3 | 4 | 6 | 8 | 12 | 24; + sm?: 1 | 2 | 3 | 4 | 6 | 8 | 12 | 24; + md?: 1 | 2 | 3 | 4 | 6 | 8 | 12 | 24; + lg?: 1 | 2 | 3 | 4 | 6 | 8 | 12 | 24; + xl?: 1 | 2 | 3 | 4 | 6 | 8 | 12 | 24; } export interface ListProps { @@ -28,7 +33,6 @@ export interface ListProps { pagination?: any; prefixCls?: string; grid?: ListGridType; - style?: React.CSSProperties; } export default class List extends Component { @@ -48,7 +52,7 @@ export default class List extends Component { pagination = false, prefixCls = 'ant-list', grid, - } = this.props; + } = this.props; const classString = classNames(prefixCls, className, { [`${prefixCls}-vertical`]: itemLayout === 'vertical', diff --git a/components/list/index.zh-CN.md b/components/list/index.zh-CN.md index c59d808073..a5b52fadd2 100644 --- a/components/list/index.zh-CN.md +++ b/components/list/index.zh-CN.md @@ -25,6 +25,18 @@ cols: 1 | loadingMore | 是否显示加载更多按钮的 loading 状态 | boolean | false | | onMoreClick | 点击 more 按钮的回调 | function | - | | pagination | 对应的 pagination 配置, 设置 false 不显示 | boolean \| object | false | +| grid | 列表栅格 | object | - | + +### List grid props +| 参数 | 说明 | 类型 | 默认值 | +---------|-------------|------|--------- +| gutter | 栅格间隔 | number | 0 | +| column | 列数 | number | - | +| xs | `<768px` 展示的列数 | number | - | +| sm | `≥768px` 展示的列数 | number | - | +| md | `≥992px` 展示的列数 | number | - | +| lg | `≥1200px` 展示的列数 | number | - | +| xl | `≥1600px` 展示的列数 | number | - | ### List.Item diff --git a/components/list/style/index.less b/components/list/style/index.less index 801bc0d595..49826a9d5b 100644 --- a/components/list/style/index.less +++ b/components/list/style/index.less @@ -59,7 +59,7 @@ } &-action { font-size: 0; - flex: 0 1 auto; + flex: 0 0 auto; margin-left: 48px; & > li { display: inline-block; @@ -157,3 +157,44 @@ } } } + +@media screen and (max-width: @screen-md) { + .@{list-prefix-cls} { + &-item { + &-action { + margin-left: 24px; + } + } + } + .@{list-prefix-cls}-vertical { + .@{list-prefix-cls}-item { + &-extra { + margin-left: 24px; + } + } + } +} + +@media screen and (max-width: @screen-xs) { + .@{list-prefix-cls} { + &-item { + flex-wrap: wrap; + &-action { + margin-left: 12px; + } + } + } + .@{list-prefix-cls}-vertical { + .@{list-prefix-cls}-item { + &-extra-wrap { + flex-wrap: wrap-reverse; + } + &-main { + min-width: 220px; + } + &-extra { + margin-left: 0; + } + } + } +}