Browse Source

use ul in list

pull/15890/head
zombiej 6 years ago
parent
commit
c6903c9cc9
  1. 7
      components/list/Item.tsx
  2. 6
      components/list/index.tsx
  3. 10
      components/list/style/index.less

7
components/list/Item.tsx

@ -112,9 +112,10 @@ export default class Item extends React.Component<ListItemProps, any> {
))}
</ul>
);
const Tag = grid ? 'div' : 'li';
const itemChildren = (
<div
{...others}
<Tag
{...others as any} // `li` element don't have `onCopy` prop. Cast to any.
className={classNames(`${prefixCls}-item`, className, {
[`${prefixCls}-item-no-flex`]: !this.isFlexMode(),
})}
@ -134,7 +135,7 @@ export default class Item extends React.Component<ListItemProps, any> {
actionsContent,
extra ? React.cloneElement(extra as React.ReactElement<any>, { key: 'extra' }) : null,
]}
</div>
</Tag>
);
return grid ? (

6
components/list/index.tsx

@ -233,7 +233,11 @@ export default class List<T> extends React.Component<ListProps<T>> {
);
});
childrenContent = grid ? <Row gutter={grid.gutter}>{childrenList}</Row> : childrenList;
childrenContent = grid ? (
<Row gutter={grid.gutter}>{childrenList}</Row>
) : (
<ul className={`${prefixCls}-items`}>{childrenList}</ul>
);
} else if (!children && !isLoading) {
childrenContent = this.renderEmpty(prefixCls, renderEmpty);
}

10
components/list/style/index.less

@ -37,7 +37,12 @@
text-align: center;
}
&-item {
&-items {
margin: 0;
padding: 0;
list-style: none;
.@{list-prefix-cls}-item {
display: flex;
align-items: center;
padding: @list-item-padding;
@ -110,6 +115,7 @@
}
}
}
}
&-header {
background: @list-header-background;
@ -147,7 +153,7 @@
min-height: 32px;
}
&-something-after-last-item .@{ant-prefix}-spin-container > &-item:last-child {
&-something-after-last-item .@{ant-prefix}-spin-container > &-items > &-item:last-child {
border-bottom: 1px solid @border-color-split;
}

Loading…
Cancel
Save