mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-05 15:39:45 +08:00
List: support responsive (#7272)
* List: support responsive * change grid api for responsive & use card responsive function * abstract getGrid * update snapshots * defind grid columns number * defind grid columns number * add ListGridType
This commit is contained in:
niko
偏右
parent
2d9b374a76
commit
56f0716b03
@ -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<React.ReactNode>;
|
||||
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 = (
|
||||
<div className={`${prefixCls}-item-meta-content`}>
|
||||
{title && <h4 className={`${prefixCls}-item-meta-title`}>{title}</h4>}
|
||||
{description && <p className={`${prefixCls}-item-meta-description`}>{description}</p>}
|
||||
{description && <div className={`${prefixCls}-item-meta-description`}>{description}</div>}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -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<ListItemProps, any> {
|
||||
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<ListItemProps, any> {
|
||||
</div>
|
||||
);
|
||||
|
||||
const mainContent = grid ? (<Col span={grid.column && Math.floor(24 / grid.column)}>
|
||||
<div {...others} className={classString}>
|
||||
{extra && extraContent}
|
||||
{!extra && metaContent}
|
||||
{!extra && content}
|
||||
{!extra && actionsContent}
|
||||
</div>
|
||||
</Col>) : (
|
||||
const mainContent = grid ? (
|
||||
<Col
|
||||
span={getGrid(grid, 'column')}
|
||||
xs={getGrid(grid, 'xs')}
|
||||
sm={getGrid(grid, 'sm')}
|
||||
md={getGrid(grid, 'md')}
|
||||
lg={getGrid(grid, 'lg')}
|
||||
xl={getGrid(grid, 'xl')}
|
||||
>
|
||||
<div {...others} className={classString}>
|
||||
{extra && extraContent}
|
||||
{!extra && metaContent}
|
||||
{!extra && content}
|
||||
{!extra && actionsContent}
|
||||
</div>
|
||||
</Col>
|
||||
) : (
|
||||
<div {...others} className={classString}>
|
||||
{extra && extraContent}
|
||||
{!extra && metaContent}
|
||||
|
||||
@ -33,17 +33,21 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = `
|
||||
Ant design
|
||||
</a>
|
||||
</h4>
|
||||
<p
|
||||
<div
|
||||
class="ant-list-item-meta-description"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-list-item-content"
|
||||
>
|
||||
Content
|
||||
<div
|
||||
style="padding:24px;"
|
||||
>
|
||||
Content
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-list-item-action"
|
||||
@ -92,17 +96,21 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = `
|
||||
Ant design
|
||||
</a>
|
||||
</h4>
|
||||
<p
|
||||
<div
|
||||
class="ant-list-item-meta-description"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-list-item-content"
|
||||
>
|
||||
Content
|
||||
<div
|
||||
style="padding:24px;"
|
||||
>
|
||||
Content
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-list-item-action"
|
||||
@ -151,17 +159,21 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = `
|
||||
Ant design
|
||||
</a>
|
||||
</h4>
|
||||
<p
|
||||
<div
|
||||
class="ant-list-item-meta-description"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-list-item-content"
|
||||
>
|
||||
Content
|
||||
<div
|
||||
style="padding:24px;"
|
||||
>
|
||||
Content
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-list-item-action"
|
||||
@ -210,17 +222,21 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = `
|
||||
Ant design
|
||||
</a>
|
||||
</h4>
|
||||
<p
|
||||
<div
|
||||
class="ant-list-item-meta-description"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-list-item-content"
|
||||
>
|
||||
Content
|
||||
<div
|
||||
style="padding:24px;"
|
||||
>
|
||||
Content
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-list-item-action"
|
||||
@ -477,6 +493,228 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-list ant-list-bordered ant-list-grid"
|
||||
>
|
||||
<div
|
||||
class="ant-row"
|
||||
style="margin-left:-8px;margin-right:-8px;"
|
||||
>
|
||||
<div
|
||||
class="ant-col-xs-12 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
style="padding-left:8px;padding-right:8px;"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-card ant-card-bordered"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-card-head"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-title"
|
||||
>
|
||||
Card title
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
<div>
|
||||
Card content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col-xs-12 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
style="padding-left:8px;padding-right:8px;"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-card ant-card-bordered"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-card-head"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-title"
|
||||
>
|
||||
Card title
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
<div>
|
||||
Card content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col-xs-12 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
style="padding-left:8px;padding-right:8px;"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-card ant-card-bordered"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-card-head"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-title"
|
||||
>
|
||||
Card title
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
<div>
|
||||
Card content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col-xs-12 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
style="padding-left:8px;padding-right:8px;"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-card ant-card-bordered"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-card-head"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-title"
|
||||
>
|
||||
Card title
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
<div>
|
||||
Card content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col-xs-12 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
style="padding-left:8px;padding-right:8px;"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-card ant-card-bordered"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-card-head"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-title"
|
||||
>
|
||||
Card title
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
<div>
|
||||
Card content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col-xs-12 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
style="padding-left:8px;padding-right:8px;"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-card ant-card-bordered"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-card-head"
|
||||
>
|
||||
<div
|
||||
class="ant-card-head-title"
|
||||
>
|
||||
Card title
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-card-body"
|
||||
>
|
||||
<div>
|
||||
Card content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-list ant-list-vertical ant-list-bordered"
|
||||
@ -516,11 +754,11 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
ant design part 0
|
||||
</a>
|
||||
</h4>
|
||||
<p
|
||||
<div
|
||||
class="ant-list-item-meta-description"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -612,11 +850,11 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
ant design part 1
|
||||
</a>
|
||||
</h4>
|
||||
<p
|
||||
<div
|
||||
class="ant-list-item-meta-description"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -708,11 +946,11 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
ant design part 2
|
||||
</a>
|
||||
</h4>
|
||||
<p
|
||||
<div
|
||||
class="ant-list-item-meta-description"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -804,11 +1042,11 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
ant design part 3
|
||||
</a>
|
||||
</h4>
|
||||
<p
|
||||
<div
|
||||
class="ant-list-item-meta-description"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -900,11 +1138,11 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
ant design part 4
|
||||
</a>
|
||||
</h4>
|
||||
<p
|
||||
<div
|
||||
class="ant-list-item-meta-description"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -996,11 +1234,11 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
ant design part 5
|
||||
</a>
|
||||
</h4>
|
||||
<p
|
||||
<div
|
||||
class="ant-list-item-meta-description"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -1092,11 +1330,11 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
ant design part 6
|
||||
</a>
|
||||
</h4>
|
||||
<p
|
||||
<div
|
||||
class="ant-list-item-meta-description"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -1188,11 +1426,11 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
ant design part 7
|
||||
</a>
|
||||
</h4>
|
||||
<p
|
||||
<div
|
||||
class="ant-list-item-meta-description"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -1284,11 +1522,11 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
ant design part 8
|
||||
</a>
|
||||
</h4>
|
||||
<p
|
||||
<div
|
||||
class="ant-list-item-meta-description"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -1380,11 +1618,11 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
ant design part 9
|
||||
</a>
|
||||
</h4>
|
||||
<p
|
||||
<div
|
||||
class="ant-list-item-meta-description"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
||||
@ -28,7 +28,7 @@ ReactDOM.render(
|
||||
title={<a href="https://ant.design">Ant design</a>}
|
||||
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
|
||||
/>
|
||||
Content
|
||||
<div style={{ padding: 24 }}>Content</div>
|
||||
</List.Item>
|
||||
<List.Item actions={[<a>编辑</a>, <a>更多</a>]}>
|
||||
<List.Item.Meta
|
||||
@ -36,7 +36,7 @@ ReactDOM.render(
|
||||
title={<a href="https://ant.design">Ant design</a>}
|
||||
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
|
||||
/>
|
||||
Content
|
||||
<div style={{ padding: 24 }}>Content</div>
|
||||
</List.Item>
|
||||
<List.Item actions={[<a>编辑</a>, <a>更多</a>]}>
|
||||
<List.Item.Meta
|
||||
@ -44,7 +44,7 @@ ReactDOM.render(
|
||||
title={<a href="https://ant.design">Ant design</a>}
|
||||
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
|
||||
/>
|
||||
Content
|
||||
<div style={{ padding: 24 }}>Content</div>
|
||||
</List.Item>
|
||||
<List.Item actions={[<a>编辑</a>, <a>更多</a>]}>
|
||||
<List.Item.Meta
|
||||
@ -52,7 +52,7 @@ ReactDOM.render(
|
||||
title={<a href="https://ant.design">Ant design</a>}
|
||||
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
|
||||
/>
|
||||
Content
|
||||
<div style={{ padding: 24 }}>Content</div>
|
||||
</List.Item>
|
||||
</List>
|
||||
, mountNode);
|
||||
|
||||
43
components/list/demo/resposive.md
Normal file
43
components/list/demo/resposive.md
Normal file
@ -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(
|
||||
<List
|
||||
grid={{ gutter: 16, xs: 2, sm: 2, md: 4, lg: 4, xl: 6 }}
|
||||
>
|
||||
<List.Item>
|
||||
<Card title="Card title">Card content</Card>
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<Card title="Card title">Card content</Card>
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<Card title="Card title">Card content</Card>
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<Card title="Card title">Card content</Card>
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<Card title="Card title">Card content</Card>
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<Card title="Card title">Card content</Card>
|
||||
</List.Item>
|
||||
</List>
|
||||
, mountNode);
|
||||
````
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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<ListProps> {
|
||||
@ -48,7 +52,7 @@ export default class List extends Component<ListProps> {
|
||||
pagination = false,
|
||||
prefixCls = 'ant-list',
|
||||
grid,
|
||||
} = this.props;
|
||||
} = this.props;
|
||||
|
||||
const classString = classNames(prefixCls, className, {
|
||||
[`${prefixCls}-vertical`]: itemLayout === 'vertical',
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user