diff --git a/docs/zh-CN/components/list.md b/docs/zh-CN/components/list.md index 7fec8060d..6fa03ad4d 100755 --- a/docs/zh-CN/components/list.md +++ b/docs/zh-CN/components/list.md @@ -95,3 +95,4 @@ order: 56 | listItem.desc | [模板](../../docs/concepts/template) | | 描述 | | listItem.body | `Array` | | 内容容器,主要用来放置非表单项组件 | | listItem.actions | Array<[Action](./action)> | | 按钮区域 | +| listItem.actionsPosition | 'left' or 'right' | 默认在右侧 | 按钮位置 | diff --git a/scss/components/_list.scss b/scss/components/_list.scss index a3c88b142..0242874ce 100644 --- a/scss/components/_list.scss +++ b/scss/components/_list.scss @@ -165,6 +165,11 @@ float: right; } + &--actions-at-left &-actions { + float: left; + margin-right: var(--gap-base); + } + &-title { margin: 0; padding: 0; diff --git a/src/renderers/Card.tsx b/src/renderers/Card.tsx index 5b08ed54a..94a10efae 100644 --- a/src/renderers/Card.tsx +++ b/src/renderers/Card.tsx @@ -173,7 +173,6 @@ export class Card extends React.Component { }; static propsList: Array = [ - 'multiple', 'avatarClassName', 'bodyClassName', 'actionsCount', @@ -553,7 +552,9 @@ export class Card extends React.Component { test: /(^|\/)card$/, name: 'card' }) -export class CardRenderer extends Card {} +export class CardRenderer extends Card { + static propsList = ['multiple', ...Card.propsList]; +} @Renderer({ test: /(^|\/)card-item-field$/, diff --git a/src/renderers/List.tsx b/src/renderers/List.tsx index 1e2cb458a..85a1c3fe9 100644 --- a/src/renderers/List.tsx +++ b/src/renderers/List.tsx @@ -76,6 +76,11 @@ export type ListBodyField = SchemaObject & ListBodyFieldObject; export interface ListItemSchema extends Omit { actions?: Array; + /** + * 操作位置,默认在右侧,可以设置成左侧。 + */ + actionsPosition?: 'left' | 'right'; + /** * 图片地址 */ @@ -1240,7 +1245,8 @@ export class ListItem extends React.Component { checkOnItemClick, render, checkable, - classnames: cx + classnames: cx, + actionsPosition } = this.props; const avatar = filter(avatarTpl, data); @@ -1251,7 +1257,10 @@ export class ListItem extends React.Component { return (
{this.renderLeft()} {this.renderRight()} @@ -1281,7 +1290,9 @@ export class ListItem extends React.Component { test: /(^|\/)(?:list|list-group)\/(?:.*\/)?list-item$/, name: 'list-item' }) -export class ListItemRenderer extends ListItem {} +export class ListItemRenderer extends ListItem { + static propsList = ['multiple', ...ListItem.propsList]; +} @Renderer({ test: /(^|\/)list-item-field$/,