@antsoo-lib/components 0.1.11 → 0.1.12

package/src/list/Item.tsx

@@ -1,112 +0,0 @@
-import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'
-import { defineComponent, inject, ref } from 'vue'
-
-import type { ListGridType } from '.'
-import classNames from '../_util/classNames'
-import { flattenChildren, isEmptyElement, isStringElement } from '../_util/props-util'
-import type { CustomSlotsType } from '../_util/type'
-import { cloneElement } from '../_util/vnode'
-import PropTypes from '../_util/vue-types'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import { Col } from '../grid'
-import ItemMeta from './ItemMeta'
-import { ListContextKey } from './contextKey'
-
-export const listItemProps = () => ({
-  prefixCls: String,
-  extra: PropTypes.any,
-  actions: PropTypes.array,
-  grid: Object as PropType<ListGridType>,
-  colStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
-})
-
-export type ListItemProps = Partial<ExtractPropTypes<ReturnType<typeof listItemProps>>>
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'AListItem',
-  inheritAttrs: false,
-  Meta: ItemMeta,
-  props: listItemProps(),
-  slots: Object as CustomSlotsType<{
-    actions: any
-    extra: any
-    default: any
-  }>,
-  setup(props, { slots, attrs }) {
-    const { itemLayout, grid } = inject(ListContextKey, {
-      grid: ref(),
-      itemLayout: ref(),
-    })
-    const { prefixCls } = useConfigInject('list', props)
-
-    const isItemContainsTextNodeAndNotSingular = () => {
-      const children = slots.default?.() || []
-      let result
-      children.forEach((element) => {
-        if (isStringElement(element) && !isEmptyElement(element)) {
-          result = true
-        }
-      })
-      return result && children.length > 1
-    }
-
-    const isFlexMode = () => {
-      const extra = props.extra ?? slots.extra?.()
-      if (itemLayout.value === 'vertical') {
-        return !!extra
-      }
-      return !isItemContainsTextNodeAndNotSingular()
-    }
-
-    return () => {
-      const { class: className, ...restAttrs } = attrs
-      const pre = prefixCls.value
-      const extra = props.extra ?? slots.extra?.()
-      const children = slots.default?.()
-      let actions = props.actions ?? flattenChildren(slots.actions?.())
-      actions = actions && !Array.isArray(actions) ? [actions] : actions
-      const actionsContent = actions && actions.length > 0 && (
-        <ul class={`${pre}-item-action`} key="actions">
-          {actions.map((action, i) => (
-            <li key={`${pre}-item-action-${i}`}>
-              {action}
-              {i !== actions.length - 1 && <em class={`${pre}-item-action-split`} />}
-            </li>
-          ))}
-        </ul>
-      )
-      const Element = grid.value ? 'div' : 'li'
-      const itemChildren = (
-        <Element
-          {...(restAttrs as any)} // `li` element `onCopy` prop args is not same as `div`
-          class={classNames(
-            `${pre}-item`,
-            {
-              [`${pre}-item-no-flex`]: !isFlexMode(),
-            },
-            className,
-          )}
-        >
-          {itemLayout.value === 'vertical' && extra
-            ? [
-                <div class={`${pre}-item-main`} key="content">
-                  {children}
-                  {actionsContent}
-                </div>,
-                <div class={`${pre}-item-extra`} key="extra">
-                  {extra}
-                </div>,
-              ]
-            : [children, actionsContent, cloneElement(extra, { key: 'extra' })]}
-        </Element>
-      )
-      return grid.value ? (
-        <Col flex={1} style={props.colStyle}>
-          {itemChildren}
-        </Col>
-      ) : (
-        itemChildren
-      )
-    }
-  },
-})

package/src/list/ItemMeta.tsx

@@ -1,52 +0,0 @@
-import type { ExtractPropTypes } from 'vue'
-import { defineComponent } from 'vue'
-
-import type { CustomSlotsType } from '../_util/type'
-import PropTypes from '../_util/vue-types'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-
-export const listItemMetaProps = () => ({
-  avatar: PropTypes.any,
-  description: PropTypes.any,
-  prefixCls: String,
-  title: PropTypes.any,
-})
-
-export type ListItemMetaProps = Partial<ExtractPropTypes<ReturnType<typeof listItemMetaProps>>>
-
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'AListItemMeta',
-  props: listItemMetaProps(),
-  displayName: 'AListItemMeta', // 兼容历史函数式组件
-  __ANT_LIST_ITEM_META: true,
-  slots: Object as CustomSlotsType<{
-    avatar: any
-    description: any
-    title: any
-    default: any
-  }>,
-  setup(props, { slots }) {
-    const { prefixCls } = useConfigInject('list', props)
-    return () => {
-      const classString = `${prefixCls.value}-item-meta`
-      const title = props.title ?? slots.title?.()
-      const description = props.description ?? slots.description?.()
-      const avatar = props.avatar ?? slots.avatar?.()
-      const content = (
-        <div class={`${prefixCls.value}-item-meta-content`}>
-          {title && <h4 class={`${prefixCls.value}-item-meta-title`}>{title}</h4>}
-          {description && (
-            <div class={`${prefixCls.value}-item-meta-description`}>{description}</div>
-          )}
-        </div>
-      )
-      return (
-        <div class={classString}>
-          {avatar && <div class={`${prefixCls.value}-item-meta-avatar`}>{avatar}</div>}
-          {(title || description) && content}
-        </div>
-      )
-    }
-  },
-})

package/src/list/contextKey.ts

@@ -1,8 +0,0 @@
-import type { InjectionKey, Ref } from 'vue'
-
-export interface ListContext {
-  grid?: Ref<any>
-  itemLayout?: Ref<string>
-}
-
-export const ListContextKey: InjectionKey<ListContext> = Symbol('ListContextKey')

package/src/list/index.en-US.md

@@ -1,73 +0,0 @@
----
-category: Components
-type: Data Display
-title: List
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EYuhSpw1iSwAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAAAAAAAAAAAADrJ8AQ/original
----
-
-Simple List.
-
-## When To Use
-
-A list can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size.
-
-## API
-
-### List
-
-| Property   | Description                                                                                                           | Type                                                          | Default                   | Version |     |
-| ---------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ------------------------- | ------- | --- |
-| bordered   | Toggles rendering of the border around the list                                                                       | boolean                                                       | false                     |         |     |
-| dataSource | dataSource array for list                                                                                             | any\[]                                                        | -                         | 3.20.1  |     |
-| footer     | List footer renderer                                                                                                  | string\|slot                                                  | -                         |         |     |
-| grid       | The grid type of list. You can set grid to something like {gutter: 16, column: 4}                                     | object                                                        | -                         |         |     |
-| header     | List header renderer                                                                                                  | string\|slot                                                  | -                         |         |     |
-| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string                                                        | -                         |         |     |
-| loading    | Shows a loading indicator while the contents of the list are being fetched                                            | boolean\|[object](https://www.antdv.com/components/spin/#api) | false                     |         |     |
-| loadMore   | Shows a load more content                                                                                             | string\|slot                                                  | -                         |         |     |
-| locale     | i18n text including empty text                                                                                        | object                                                        | emptyText: 'No Data' <br> |         |     |
-| pagination | Pagination [config](https://www.antdv.com/components/pagination/#api), hide it by setting it to false                 | boolean \| object                                             | false                     |         |     |
-| renderItem | Custom item renderer, #renderItem="{item, index}"                                                                     | ({item, index}) => vNode                                      |                           | -       |     |
-| rowKey     | Item's unique key, could be a string or function that returns a string                                                | string\|Function(record):string                               | `key`                     |         |     |
-| split      | Toggles rendering of the split under the list item                                                                    | boolean                                                       | true                      |         |     |
-
-### pagination
-
-Properties for pagination.
-
-| Property | Description                          | Type                        | Default  |
-| -------- | ------------------------------------ | --------------------------- | -------- |
-| position | specify the position of `Pagination` | 'top' \| 'bottom' \| 'both' | 'bottom' |
-
-More about pagination, please check [`Pagination`](https://www.antdv.com/components/pagination/#api).
-
-### List grid props
-
-| Property | Description              | Type                                     | Default   | Version |
-| -------- | ------------------------ | ---------------------------------------- | --------- | ------- |
-| column   | column of grid           | number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24] | -         |         |
-| gutter   | spacing between grid     | number                                   | 0         |         |
-| size     | Size of list             | `default` \| `middle` \| `small`         | `default` |         |
-| xxxl     | `≥2000px` column of grid | number                                   | -         | 3.0     |
-| xs       | `<576px` column of grid  | number                                   | -         |         |
-| sm       | `≥576px` column of grid  | number                                   | -         |         |
-| md       | `≥768px` column of grid  | number                                   | -         |         |
-| lg       | `≥992px` column of grid  | number                                   | -         |         |
-| xl       | `≥1200px` column of grid | number                                   | -         |         |
-| xxl      | `≥1600px` column of grid | number                                   | -         |         |
-
-### List.Item
-
-| Property | Description                                                                                                                             | Type           | Default | Version |
-| -------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------- | ------- |
-| actions  | The actions content of list item. If `itemLayout` is `vertical`, shows the content on bottom, otherwise shows content on the far right. | vNode[] \|slot | -       |         |
-| extra    | The extra content of list item. If `itemLayout` is `vertical`, shows the content on right, otherwise shows content on the far right.    | string\|slot   | -       |         |
-
-### List.Item.Meta
-
-| Property    | Description                  | Type         | Default |
-| ----------- | ---------------------------- | ------------ | ------- |
-| avatar      | The avatar of list item      | slot         | -       |
-| description | The description of list item | string\|slot | -       |
-| title       | The title of list item       | string\|slot | -       |

package/src/list/index.tsx

@@ -1,344 +0,0 @@
-import type { App, ExtractPropTypes, HTMLAttributes, Plugin, PropType } from 'vue'
-import { computed, defineComponent, provide, ref, toRef, watch } from 'vue'
-
-import classNames from '../_util/classNames'
-import eagerComputed from '../_util/eagerComputed'
-import useBreakpoint from '../_util/hooks/useBreakpoint'
-import { flattenChildren } from '../_util/props-util'
-import initDefaultProps from '../_util/props-util/initDefaultProps'
-import type { Breakpoint } from '../_util/responsiveObserve'
-import { responsiveArray } from '../_util/responsiveObserve'
-import {
-  arrayType,
-  booleanType,
-  functionType,
-  objectType,
-  someType,
-  vNodeType,
-} from '../_util/type'
-import type { CustomSlotsType, Key } from '../_util/type'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import { Row } from '../grid'
-import type { PaginationConfig } from '../pagination'
-import Pagination from '../pagination'
-import type { SpinProps } from '../spin'
-import Spin from '../spin'
-import Item from './Item'
-import ItemMeta from './ItemMeta'
-import { ListContextKey } from './contextKey'
-// CSSINJS
-import useStyle from './style'
-
-export type { ListItemProps } from './Item'
-export type { ListItemMetaProps } from './ItemMeta'
-
-export type ColumnType = 'gutter' | 'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl'
-
-export type ColumnCount = number
-export interface ListGridType {
-  gutter?: number
-  column?: ColumnCount
-  xs?: ColumnCount
-  sm?: ColumnCount
-  md?: ColumnCount
-  lg?: ColumnCount
-  xl?: ColumnCount
-  xxl?: ColumnCount
-  xxxl?: ColumnCount
-}
-
-export type ListSize = 'small' | 'default' | 'large'
-export type ListItemLayout = 'horizontal' | 'vertical'
-
-export const listProps = () => ({
-  bordered: booleanType(),
-  dataSource: arrayType(),
-  extra: vNodeType(),
-  grid: objectType<ListGridType>(),
-  itemLayout: String as PropType<ListItemLayout>,
-  loading: someType<boolean | (SpinProps & HTMLAttributes)>([Boolean, Object]),
-  loadMore: vNodeType(),
-  pagination: someType<false | PaginationConfig>([Boolean, Object]),
-  prefixCls: String,
-  rowKey: someType<Key | ((item: any) => Key)>([String, Number, Function]),
-  renderItem: functionType<(opt: { item: any; index: number }) => any>(),
-  size: String as PropType<ListSize>,
-  split: booleanType(),
-  header: vNodeType(),
-  footer: vNodeType(),
-  locale: objectType<ListLocale>(),
-})
-
-export interface ListLocale {
-  emptyText: any
-}
-
-export type ListProps = Partial<ExtractPropTypes<ReturnType<typeof listProps>>>
-
-const List = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'AList',
-  inheritAttrs: false,
-  Item,
-  props: initDefaultProps(listProps(), {
-    dataSource: [],
-    bordered: false,
-    split: true,
-    loading: false,
-    pagination: false,
-  }),
-  slots: Object as CustomSlotsType<{
-    extra: any
-    loadMore: any
-    renderItem: { item: any; index: number }
-    header: any
-    footer: any
-    default: any
-  }>,
-  setup(props, { slots, attrs }) {
-    provide(ListContextKey, {
-      grid: toRef(props, 'grid'),
-      itemLayout: toRef(props, 'itemLayout'),
-    })
-    const defaultPaginationProps = {
-      current: 1,
-      total: 0,
-    }
-    const { prefixCls, direction, renderEmpty } = useConfigInject('list', props)
-
-    // Style
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-
-    const paginationObj = computed(() =>
-      props.pagination && typeof props.pagination === 'object' ? props.pagination : {},
-    )
-    const paginationCurrent = ref(paginationObj.value.defaultCurrent ?? 1)
-    const paginationSize = ref(paginationObj.value.defaultPageSize ?? 10)
-    watch(paginationObj, () => {
-      if ('current' in paginationObj.value) {
-        paginationCurrent.value = paginationObj.value.current
-      }
-      if ('pageSize' in paginationObj.value) {
-        paginationSize.value = paginationObj.value.pageSize
-      }
-    })
-
-    const listItemsKeys: Key[] = []
-
-    const triggerPaginationEvent = (eventName: string) => (page: number, pageSize: number) => {
-      paginationCurrent.value = page
-      paginationSize.value = pageSize
-      if (paginationObj.value[eventName]) {
-        paginationObj.value[eventName](page, pageSize)
-      }
-    }
-
-    const onPaginationChange = triggerPaginationEvent('onChange')
-
-    const onPaginationShowSizeChange = triggerPaginationEvent('onShowSizeChange')
-
-    const loadingProp = computed(() => {
-      if (typeof props.loading === 'boolean') {
-        return {
-          spinning: props.loading,
-        }
-      } else {
-        return props.loading
-      }
-    })
-
-    const isLoading = computed(() => loadingProp.value && loadingProp.value.spinning)
-
-    const sizeCls = computed(() => {
-      let size = ''
-      switch (props.size) {
-        case 'large':
-          size = 'lg'
-          break
-        case 'small':
-          size = 'sm'
-          break
-        default:
-          break
-      }
-      return size
-    })
-
-    const classObj = computed(() => ({
-      [`${prefixCls.value}`]: true,
-      [`${prefixCls.value}-vertical`]: props.itemLayout === 'vertical',
-      [`${prefixCls.value}-${sizeCls.value}`]: sizeCls.value,
-      [`${prefixCls.value}-split`]: props.split,
-      [`${prefixCls.value}-bordered`]: props.bordered,
-      [`${prefixCls.value}-loading`]: isLoading.value,
-      [`${prefixCls.value}-grid`]: !!props.grid,
-      [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
-    }))
-
-    const paginationProps = computed(() => {
-      const pp = {
-        ...defaultPaginationProps,
-        total: props.dataSource.length,
-        current: paginationCurrent.value,
-        pageSize: paginationSize.value,
-        ...((props.pagination as PaginationConfig) || {}),
-      }
-
-      const largestPage = Math.ceil(pp.total / pp.pageSize)
-      if (pp.current > largestPage) {
-        pp.current = largestPage
-      }
-      return pp
-    })
-
-    const splitDataSource = computed(() => {
-      let dd = [...props.dataSource]
-      if (props.pagination) {
-        if (
-          props.dataSource.length >
-          (paginationProps.value.current - 1) * paginationProps.value.pageSize
-        ) {
-          dd = [...props.dataSource].splice(
-            (paginationProps.value.current - 1) * paginationProps.value.pageSize,
-            paginationProps.value.pageSize,
-          )
-        }
-      }
-      return dd
-    })
-
-    const screens = useBreakpoint()
-
-    const currentBreakpoint = eagerComputed(() => {
-      for (let i = 0; i < responsiveArray.length; i += 1) {
-        const breakpoint: Breakpoint = responsiveArray[i]
-        if (screens.value[breakpoint]) {
-          return breakpoint
-        }
-      }
-      return undefined
-    })
-
-    const colStyle = computed(() => {
-      if (!props.grid) {
-        return undefined
-      }
-      const columnCount =
-        currentBreakpoint.value && props.grid[currentBreakpoint.value]
-          ? props.grid[currentBreakpoint.value]
-          : props.grid.column
-      if (columnCount) {
-        return {
-          width: `${100 / columnCount}%`,
-          maxWidth: `${100 / columnCount}%`,
-        }
-      }
-      return undefined
-    })
-
-    const renderInnerItem = (item: any, index: number) => {
-      const renderItem = props.renderItem ?? slots.renderItem
-      if (!renderItem) return null
-
-      let key
-      const rowKeyType = typeof props.rowKey
-      if (rowKeyType === 'function') {
-        key = (props.rowKey as any)(item)
-      } else if (rowKeyType === 'string' || rowKeyType === 'number') {
-        key = item[props.rowKey as any]
-      } else {
-        key = item.key
-      }
-
-      if (!key) {
-        key = `list-item-${index}`
-      }
-
-      listItemsKeys[index] = key
-
-      return renderItem({ item, index })
-    }
-
-    return () => {
-      const loadMore = props.loadMore ?? slots.loadMore?.()
-      const footer = props.footer ?? slots.footer?.()
-      const header = props.header ?? slots.header?.()
-      const children = flattenChildren(slots.default?.())
-      const isSomethingAfterLastItem = !!(loadMore || props.pagination || footer)
-      const classString = classNames(
-        {
-          ...classObj.value,
-          [`${prefixCls.value}-something-after-last-item`]: isSomethingAfterLastItem,
-        },
-        attrs.class,
-        hashId.value,
-      )
-      const paginationContent = props.pagination ? (
-        <div class={`${prefixCls.value}-pagination`}>
-          <Pagination
-            {...paginationProps.value}
-            onChange={onPaginationChange}
-            onShowSizeChange={onPaginationShowSizeChange}
-          />
-        </div>
-      ) : null
-
-      let childrenContent = isLoading.value && <div style={{ minHeight: '53px' }} />
-      if (splitDataSource.value.length > 0) {
-        listItemsKeys.length = 0
-        const items = splitDataSource.value.map((item: any, index: number) =>
-          renderInnerItem(item, index),
-        )
-        const childrenList = items.map((child: any, index) => (
-          <div key={listItemsKeys[index]} style={colStyle.value}>
-            {child}
-          </div>
-        ))
-        childrenContent = props.grid ? (
-          <Row gutter={props.grid.gutter}>{childrenList}</Row>
-        ) : (
-          <ul class={`${prefixCls.value}-items`}>{items}</ul>
-        )
-      } else if (!children.length && !isLoading.value) {
-        childrenContent = (
-          <div class={`${prefixCls.value}-empty-text`}>
-            {props.locale?.emptyText || renderEmpty('List')}
-          </div>
-        )
-      }
-
-      const paginationPosition = paginationProps.value.position || 'bottom'
-      return wrapSSR(
-        <div {...attrs} class={classString}>
-          {(paginationPosition === 'top' || paginationPosition === 'both') && paginationContent}
-          {header && <div class={`${prefixCls.value}-header`}>{header}</div>}
-          <Spin {...loadingProp.value}>
-            {childrenContent}
-            {children}
-          </Spin>
-          {footer && <div class={`${prefixCls.value}-footer`}>{footer}</div>}
-          {loadMore ||
-            ((paginationPosition === 'bottom' || paginationPosition === 'both') &&
-              paginationContent)}
-        </div>,
-      )
-    }
-  },
-})
-
-/* istanbul ignore next */
-List.install = function (app: App) {
-  app.component(List.name, List)
-  app.component(List.Item.name, List.Item)
-  app.component(List.Item.Meta.name, List.Item.Meta)
-  return app
-}
-
-export { Item as ListItem, ItemMeta as ListItemMeta }
-
-export default List as typeof List &
-  Plugin & {
-    readonly Item: typeof Item & {
-      readonly Meta: typeof ItemMeta
-    }
-  }

package/src/list/index.zh-CN.md

@@ -1,74 +0,0 @@
----
-category: Components
-type: 数据展示
-title: List
-subtitle: 列表
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EYuhSpw1iSwAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAAAAAAAAAAAADrJ8AQ/original
----
-
-通用列表。
-
-## 何时使用
-
-最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。
-
-## API
-
-### List
-
-| 参数       | 说明                                                                                                 | 类型                                                             | 默认值                | 版本  |     |
-| ---------- | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | --------------------- | ----- | --- |
-| bordered   | 是否展示边框                                                                                         | boolean                                                          | false                 |       |     |
-| dataSource | 列表数据源                                                                                           | any\[]                                                           | -                     | 1.5.0 |     |
-| footer     | 列表底部                                                                                             | string\|slot                                                     | -                     |       |     |
-| grid       | 列表栅格配置                                                                                         | object                                                           | -                     |       |     |
-| header     | 列表头部                                                                                             | string\|slot                                                     | -                     |       |     |
-| itemLayout | 设置 `List.Item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排                                    | string                                                           | -                     |       |     |
-| loading    | 当卡片内容还在加载中时，可以用 `loading` 展示一个占位                                                | boolean\|[object](https://www.antdv.com/components/spin-cn/#api) | false                 |       |     |
-| loadMore   | 加载更多                                                                                             | string\|slot                                                     | -                     |       |     |
-| locale     | 默认文案设置，目前包括空数据文案                                                                     | object                                                           | emptyText: '暂无数据' |       |     |
-| pagination | 对应的 `pagination` [配置](https://www.antdv.com/components/pagination-cn/#api), 设置 `false` 不显示 | boolean\|object                                                  | false                 |       |     |
-| renderItem | 自定义`Item`函数，也可使用 #renderItem="{item, index}"                                               | ({item, index}) => vNode                                         |                       | -     |     |
-| rowKey     | 各项 key 的取值，可以是字符串或一个函数                                                              | item => string\|number                                           |                       |       |     |
-| size       | list 的尺寸                                                                                          | `default` \| `middle` \| `small`                                 | `default`             |       |     |
-| split      | 是否展示分割线                                                                                       | boolean                                                          | true                  |       |     |
-
-### pagination
-
-分页的配置项。
-
-| 参数     | 说明               | 类型                        | 默认值   |
-| -------- | ------------------ | --------------------------- | -------- |
-| position | 指定分页显示的位置 | 'top' \| 'bottom' \| 'both' | 'bottom' |
-
-更多配置项，请查看 [`Pagination`](https://www.antdv.com/components/pagination-cn/#api)。
-
-### List grid props
-
-| 参数   | 说明                 | 类型                                     | 默认值 | 版本 |
-| ------ | -------------------- | ---------------------------------------- | ------ | ---- |
-| column | 列数                 | number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24] | -      |      |
-| gutter | 栅格间隔             | number                                   | 0      |      |
-| xxxl   | `≥2000px` 展示的列数 | number                                   | -      | 3.0  |
-| xs     | `<576px` 展示的列数  | number                                   | -      |      |
-| sm     | `≥576px` 展示的列数  | number                                   | -      |      |
-| md     | `≥768px` 展示的列数  | number                                   | -      |      |
-| lg     | `≥992px` 展示的列数  | number                                   | -      |      |
-| xl     | `≥1200px` 展示的列数 | number                                   | -      |      |
-| xxl    | `≥1600px` 展示的列数 | number                                   | -      |      |
-
-### List.Item
-
-| 参数    | 说明                                                                                                    | 类型            | 默认值 | 版本 |
-| ------- | ------------------------------------------------------------------------------------------------------- | --------------- | ------ | ---- |
-| actions | 列表操作组，根据 `itemLayout` 的不同, 位置在卡片底部或者最右侧                                          | vNode[] \| slot | -      |
-| extra   | 额外内容, 通常用在 `itemLayout` 为 `vertical` 的情况下, 展示右侧内容; `horizontal` 展示在列表元素最右侧 | string\|slot    | -      |      |
-
-### List.Item.Meta
-
-| 参数        | 说明               | 类型         | 默认值 |
-| ----------- | ------------------ | ------------ | ------ |
-| avatar      | 列表元素的图标     | slot         | -      |
-| description | 列表元素的描述内容 | string\|slot | -      |
-| title       | 列表元素的标题     | string\|slot | -      |