@reacted/card-list v1.0.6

自适应卡片组件

使用此组件作为容器组件，方便实现卡片自适应的效果。

示例

参数说明

export interface ICardProps {
  containerMinWidth: number; //卡片最小宽度
  containerHeight: number; //卡片高度
  length: number; //数据长度
  containerPadding: number; // 卡片及卡片与容器之间的间距
  children: (idx: number) => ReactNode; // renderProps渲染卡片中的组件,
  trimPadding?: boolean //去掉元素与左右边框的间距
  maxRow?: number //最多允许显示多少行
}

Demo

import React from 'react';
import Card from '@reacted/card';

let data = [1, 2, 3, 4, 5, 6, 7, 7, 8, 9, 0, 0];

const Demo: React.FunctionComponent = props => {
  const renderer = idx => {
    return (
      <div style={{ border: 'solid 1px #ccc', height: '100%', width: '100%' }}>
        {data[idx]}
      </div>
    );
  };
  return (
    <Card
      length={data.length}
      containerMinWidth={200}
      containerPadding={10}
      containerHeight={100}
    >
      {renderer}
    </Card>
  );
};

export default Demo;