Repository navigation
ブログページのページネーション実装 - #174
tsuna-soboro wants to merge 7 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
おそらくこの画像はもう使用していないので，消しておいてもらえるとありがたいです...！
There was a problem hiding this comment.
6~9行目のimportはすべてコード内で使用していないみたいなので，消しておいていただけるとありがたいです...！
| headingText: string; | ||
| }; | ||
|
|
||
| import { SlArrowRight, SlArrowLeft } from "react-icons/sl"; |
There was a problem hiding this comment.
16行目のimportは，import React from "react";の下においておいてください！
たぶん，「react-icons/sl import should occur before import of @/ui/ArticleItem」というlintのwarningがでているかと思います
もし，表示されていなかったら，VScodeの拡張機能に「ESLint」を追加するといいと思います！
There was a problem hiding this comment.
IconLinkは結局，ページネーションボタンに使用していないと思うので，このファイルの変更はもとにもどしておいてもらえると助かります...！
|
|
||
| import { SlArrowRight, SlArrowLeft } from "react-icons/sl"; | ||
|
|
||
| export const PaginationButton = ({ |
There was a problem hiding this comment.
(＋α)
18~78行目は別のコンポーネントに分割してほしいです！
具体的な手順としては，
src/ui配下に，PagenationButtonディレクトリを作成し，その中にindex.tsxとindex.module.scssを作成し，ページネーションボタンに関する実装とスタイルを移動させます．
移動させた後は，src/screens/Blog/index.tsxとsrc/screens/Blog/index.module.scssから重複している部分を削除しておいてほしいです...！
|
|
||
| {/* 「前へ」のボタンを配置 */} | ||
| <button | ||
| className={prevButtonDisable ? styles.disabled : ""} |
There was a problem hiding this comment.
(＋α)
スマホ画面のサイズのときは，前へと次へのボタンを非表示にしてみてほしいです！(レスポンシブ)
具体的には，
className={prevButtonDisable ? styles.disabled : "styles.prevAndNextButton"}
と変更して，
.prevAndNextButton{
@media (max-width: $mobile) {
display: none
}
}
のようにするといいかと思います...！
さらに同じような方法で，ボタンの大きさも少し小さめにしておくといいかもです！
| onPageChange: (index: number) => void; | ||
| }) => { | ||
|
|
||
| const pages = Array.from({ length: totalPages }, (_, index) => index + 1); |
There was a problem hiding this comment.
(＋α)
ページ数が6枚以上のとき，「1 2 3 4 ... 6」と表示するようにしてみてほしいです
具体的には，
totalPages >= 6
? //「1 2 3 4 ... 6」と表示
: Array.from({ length: totalPages }, (_, index) => index + 1);
のように条件分岐させるといいと思います！
それができたら，さらに，PC・タブレットとスマホで，「ページ数が6枚以上のとき」という条件を変えてもいいかもしれません！(PC・タブレットはもっと大きい数字にするなど)
This branch was successfully deployed
2 participants
関連issue
#172