اصول روانشناسی طراحی اپلیکیشن که باید بدانید شنبه ۰۵ شهریور ۰۱ | ۱۴:۵۶ ۱۶۸ بازديد
کامپوننت CountryCard به یک طراحی اپلیکیشن در مشهد پراپرتی country نیاز رایا پارس داراست که دربردارنده داده هایی درباره کشوری میباشد که می بایست ارائه گردد. همان گونه که در propTypes مرتبط با کامپوننت CountryCard میبینید، شی country می بایست دربردارنده داده های ذیل باشد:
cca2-کد کشوری دورقمی
region -حیطه مرز و بوم مثلا آفریقا
name.common - اسم مرسوم مرز و بوم از جمله نیجریه
در اینجا یک شی میهن مثال داریم:
{
cca2: "NG",
region: "Africa",
name: {
common: "Nigeria"
}
}
همینطور دقت نمائید چهگونه درفش مرزوبوم را با استعمال از بسته react-flags رندر میکنیم.
کامپوننت شیت بندی
فولدر تازه CountryCard.js را در دایرکتوری src/components ساخت کرده و کد ذیل را اضافه فرمائید.
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
class Pagination extends Component {
constructor(props) {
super(props);
const { totalRecords = null, pageLimit = 30, pageNeighbours = 0 } = props;
this.pageLimit = typeof pageLimit === 'number' ? pageLimit : 30;
this.totalRecords = typeof totalRecords === 'number' ? totalRecords : 0;
// pageNeighbours can be: 0, 1 or 2
this.pageNeighbours = typeof pageNeighbours === 'number'
? Math.max(0, Math.min(pageNeighbours, 2))
: 0;
this.totalPages = Math.ceil(this.totalRecords / this.pageLimit);
this.state = { currentPage: 1 };
}
}
Pagination.propTypes = {
totalRecords: PropTypes.number.isRequired,
pageLimit: PropTypes.number,
pageNeighbours: PropTypes.number,
onPageChanged: PropTypes.func
};
export default Pagination;
