Компоненты нумерации страниц и карт с помощью Ant Design (antd)? - PullRequest
Новая
       32

Компоненты нумерации страниц и карт с помощью Ant Design (antd)?

0 голосов
/ 19 декабря 2018

Можно ли объединить компонент Pagination из antd с компонентами Card, чтобы получить страницу, похожую на Pinterest, с нумерацией страниц?

Базовый код нумерации страниц от https://ant.design/components/pagination/: 

import { Pagination } from 'antd';

ReactDOM.render(<Pagination defaultCurrent={1} total={50} />, mountNode);

Базовый код карточки от https://ant.design/components/card/: 

import { Card } from 'antd';

ReactDOM.render(
  <Card
    title="Card title"
    extra={<a href="#">More</a>}
    style={{ width: 300 }}
  >
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </Card>,
  mountNode
);

Как их можно комбинировать сциклически проходить через множество карточек, похожих на пример на картинке?Например, какое-то количество страниц с 9 карточками.

pagination example

1 Ответ

0 голосов
/ 19 декабря 2018

Это можно сделать, установив минимальное и максимальное значение и соответственно отобразив результаты. 

const numEachPage = 4   // Use a constant here to keep track of number of cards per page

constructor(props) {
    super(props);
    this.state = {
      minValue: 0,
      maxValue: 1
    };
  }

И затем отобразите данные, основанные на этих значениях, используя Array.slice () , как указано ниже: 

render() {
    let data = [
      { title: "Card title1", value: "Card content1" },
      { title: "Card title2", value: "Card content2" },
      { title: "Card title3", value: "Card content3" },
      { title: "Card title4", value: "Card content4" },
      { title: "Card title5", value: "Card content5" }
    ];
    return (
      <div>
        {data &&
          data.length > 0 &&
          data.slice(this.state.minValue, this.state.maxValue).map(val => (
            <Card
              title={val.title}
              extra={<a href="#">More</a>}
              style={{ width: 300 }}
            >
              <p>{val.value}</p>
            </Card>
          ))}
        <Pagination
          defaultCurrent={1}
          defaultPageSize={numEachPage} //default size of page
          onChange={this.handleChange}
          total={3} //total number of card data available
        />
      </div>
    );
  }

Затем вы можете написать свою логику в методе handleChange. 

handleChange = value => {
    this.setState({
      minValue: (value - 1) * numEachPage,
      maxValue: value * numEachPage
    });
  };

Я создал рабочую демонстрацию .

...