grid-books

v0.0.3

v0.0.2

v0.0.1

STATUS

Passing

DOWNLOADS

VISIBILITY

Public

PUBLISHED

4 years ago

SIZE

N/A

默认 3 列, 间距16 在宽度超过 480 的时候变成4列

1 contributor

Install grid-books as a package?

Copied

npm i @bit/webnovel.read-ui.grid-books

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

GridBooks

d8 g.!f/3eh?f/4e
e(e.=e:&h6h? 720 gf6eef 5 e
e(e.=e:&h6h? 928 gf6ee:e.e.=e:&o<e3h>9gg):o<4 e i4h7ed8: 16

`cols={3}`

i;h.$ 3 e, i4h716
e(e.=e:&h6h? 480 gf6eef4e

`cols={4}`

i;h.$ 4 e

Demo

import React from 'react';
import GridBooks from '@bit/webnovel.read-ui.grid-books';
import "@bit/webnovel.read-ui.style";

const DATA = [{
    bookId: '1'
}, {
    bookId: '2'
}, {
    bookId: '3'
}, {
    bookId: '4'
}, {
    bookId: '5'
}, {
    bookId: '6'
}];


export default (
    <div className="pa t0 l0 w100p h100p">
        <GridBooks data={DATA} classNameItem="mb12" cols={3}>
            {({ bookId }) => {
                return (
                    <div>
                        <img className="db w100p ha" src="https://img.webnovel.com/bookcover/16248441706442605/300/300.jpg" width="60" height="80" />
                        {bookId}
                    </div>
                )
            }}
        </GridBooks>
        <ul className="g_wrap">
            <li>i4h716, e(e.=e:&h6h? 480 gf6eef4e</li>
            <li>e(e.=e:&h6h? 720 gf6eef 5 e</li>
            <li>e(e.=e:&h6h? 928 gf6ee:e.e.=e:&o<e3h>9gg):</li>
        </ul>
    </div>
)

Properties

Name	Type	Default value	Description
children	`function \| node`	`null`	子元素
className	`string`	`""`	容器 class
classNameItem	`string`	`""`	子元素 class
cols	`3 \| 4`	`3`	列数，目前支持 3，4
data	`array`	`[]`	数据源
keyName	`string`	`"bookId"`	数组循环的 key 名称