flex-box

描述

通过外部容器尺寸来确定内部容器的列

安装

npm i --save @kne/flex-box

示例

示例代码

• 这里填写示例标题
• 这里填写示例说明
• _FlexBox(@kne/current-lib_flex-box),antd(antd)

const {default:FlexBox} = _FlexBox;
const { Card } = antd;

const BaseExample = () => {
    return (
        <FlexBox
            dataSource={[
                {
                    title: "Title 1",
                },
                {
                    title: "Title 2",
                },
                {
                    title: "Title 3",
                },
                {
                    title: "Title 4",
                },
                {
                    title: "Title 5",
                },
                {
                    title: "Title 6",
                },
            ]}
            renderItem={(item) => (
                <FlexBox.Item>
                    <Card title={item.title}>Card content</Card>
                </FlexBox.Item>
            )}
        />
    );
};

render(<BaseExample />);

• 这里填写示例标题
• 这里填写示例说明
• _FlexBox(@kne/current-lib_flex-box),antd(antd)

const {FlexBoxFetch} = _FlexBox;
const {Card, Button} = antd;
const {useRef} = React;
const BaseExample = () => {
    const ref = useRef();
    return (<div>
        <FlexBoxFetch
            ref={ref}
            pagination={{ position: 'bottom', align: 'center' }}
            getFetchApi={({size}) => {
                return {
                    data: {
                        pageSize: size,
                    }, loader: ({data}) => {
                        return new Promise((resolve) => {
                            setTimeout(() => {
                                resolve({
                                    pageData: Array.from({length: data.pageSize}).map((item, index) => {
                                        return {
                                            key: index, title: `第${index}项`,
                                        };
                                    }),
                                });
                            }, 1000);
                        });
                    },
                };
            }}
            renderItem={(item) => (<FlexBoxFetch.Item>
                <Card title={item.title}>Card content</Card>
            </FlexBoxFetch.Item>)}
        />
        <Button
            onClick={() => {
                console.log(ref.current);
            }}
        >
            获取FetchApi
        </Button>
    </div>);
};

render(<BaseExample/>);

API

useFlexBox

const {ref, column} = useFlexBox(props);

注意：返回的 ref 必须传给一个 dom 的 ref

继承了Ant Design List props的参数，同时也新增了两个参数：

| 属性名 | 说明 | 类型 | 默认值 | |----------|----------------------|------------------------|------------------| | columns | 实际用于 List 的 grid | columnProps[] | defaultColumns | | onChange | 设置 column | (column) => onChange() | - |

columnProps

默认值：

| 属性名 | 说明 | 类型 | 默认值 | |-------|-----------------------|--------|-----| | width | 视口宽度 | number | - | | col | 列数 | number | - | | size | 根据 col 列数填每页数据加载多少条 | number | - |

  defaultColumns = [
    {width: 576, col: 1, size: 15},
    {width: 768, col: 2, size: 12},
    {width: 1200, col: 4, size: 12},
    {width: 1600, col: 5, size: 15}
  ]

FlexBox

同 useFlexBox 参数

| 属性名 | 说明 | 类型 | 默认值 | |----------------|----------------------------|--------|-----| | outerClassName | FlexBox 父元素的 className | string | - | | gutter | 栅格间隔 | number | 16 |

FlexBox.Item

同 Ant Design List.Item