Skip to content

GitLab

Commit c939c851 authored by 백승민's avatar 백승민
Browse files

slide pagination example

parent 8029729e
Hide whitespace changes
Inline Side-by-side
frontend/src/Pages/picpagination.tsx
View file @ c939c851
......@@ -3,18 +3,20 @@ import React from "react";
type num = {
total: number,
page: number,
setPage: Function
setPage : Function
}
export function PaginationLeft ({total, page, setPage} : num) {
export function PaginationLeft ({total, page,setPage} : num) {
const numPages = Math.ceil(total / 15);
// export function PaginationLeft ({ page, setPage} : num) {
// const numPages = 3
const left =()=>{
setPage(page - 1)
};
return (
<div>
<button onClick={() => setPage(page - 1)} disabled={page === 1}>
&lt;{page}
</button>
<button onClick={left} disabled={page === 1}>
&lt;{page}</button>
{/* {Array(numPages)
.fill(1)
......@@ -26,14 +28,16 @@ export function PaginationLeft ({total, page, setPage} : num) {
</div>
);
};
export function PaginationRight ({total, page, setPage} : num) {
export function PaginationRight ({total, page,setPage} : num) {
const numPages = Math.ceil(total / 15);
// export function PaginationRight ({ page, setPage} : num) {
// const numPages = 3;
const right =()=>{
setPage(page + 1)
};
return (
<div>
<button onClick={() => setPage(page + 1)} disabled={page === numPages}>
<button onClick={right} disabled={page === numPages}>
&gt;
</button>
</div>
......
frontend/src/home/body.tsx
View file @ c939c851
import React, { useEffect, MouseEvent, useState } from "react";
import React, { useEffect, MouseEvent, useState, useRef } from "react";
import { Outlet, useSearchParams } from "react-router-dom";
import Theme from "./theme";
import Citylist from "../Pages/citylist";
......@@ -14,7 +14,7 @@ export default function Body() {
const offset1 = (page - 1) * limit;
const offset2 = page * limit;
const offset3 = (page + 1) * limit;
// const [selected, setSelected] = useState(1);
const renderRef = useRef() as React.MutableRefObject<HTMLDivElement>
let getPics = getPicure();
useEffect(() => {
......@@ -22,6 +22,11 @@ export default function Body() {
setSearchParams(searchParams)
}, []);
useEffect(() => {
renderRef.current.style.transition = "all 0.5s ease-in-out"
renderRef.current.style.transform = `translateX(-${page - 1}00%)`
}, [page]);
const themeHandleClick = (event: MouseEvent<HTMLButtonElement>) => {
console.log(`theme id= ${event.currentTarget.id}`);
setSearchParams({
......@@ -65,62 +70,61 @@ export default function Body() {
<div className="w-50">
<Citylist handleClick={cityHandleClick} />
</div>
<div className="flex flex-col overflow-hidden">
<div>
<PaginationLeft total={Idpics.length} page={page} setPage={setPage} />
<PaginationRight total={Idpics.length} page={page} setPage={setPage} />
</div>
<div className=" md:mr-10 md:basis-4/5 flex flex-row transition duration-500 relative w-full " style={{ "transform": 'translate(-' + (page - 1) * 100 + '%)' }}>
<div className= "min-w-full">
<div className="flex flex-col overflow-hidden">
<PaginationLeft total={Idpics.length} page={page} setPage={setPage} />
<PaginationRight total={Idpics.length} page={page} setPage={setPage} />
<div className=" md:mr-10 md:basis-4/5 flex flex-row relative w-full " ref={renderRef}>
{/* <div className=" md:mr-10 md:basis-4/5 flex flex-row transition duration-500 relative w-full " style={{"transform" : "translate(-"+(page-1)*100+"%)"}}> */}
<div className="min-w-full">
<div className="inline-grid grid-cols-5">
{Idpics.slice(0,15).map((pic, index: number) => (
<div
className="m-1 shrink-0 bg-gray-200 rounded shadow-md"
key={index}>
<img
src={pic.url}
className="w-full h-10 md:h-20 object-center"
/>
<p className="text-center text-xs">{pic.name}</p>
</div>
{Idpics.slice(offset1, offset1 + limit).map((pic, index: number) => (
<div
className="m-1 shrink-0 bg-gray-200 rounded shadow-md"
key={index}>
<img
src={pic.url}
className="w-full h-10 md:h-20 object-center"
/>
<p className="text-center text-xs">{pic.name}</p>
</div>
))}
</div>
</div>
<div className= "min-w-full">
<div className="min-w-full">
<div className="inline-grid grid-rows-3 grid-cols-5">
{Idpics.slice(offset2, offset2+limit).map((pic, index: number) => (
<div
className="m-1 shrink-0 bg-gray-200 rounded shadow-md"
key={index}
>
<img
src={pic.url}
className="w-full h-10 md:h-20 object-center"
/>
<p className="text-center text-xs">{pic.name}</p>
</div>
{Idpics.slice(offset2, offset2 + limit).map((pic, index: number) => (
<div
className="m-1 shrink-0 bg-gray-200 rounded shadow-md"
key={index}
>
<img
src={pic.url}
className="w-full h-10 md:h-20 object-center"
/>
<p className="text-center text-xs">{pic.name}</p>
</div>
))}
</div>
</div>
<div className= "min-w-full">
<div className="min-w-full">
<div className="inline-grid grid-rows-3 grid-cols-5">
{Idpics.slice(offset3, offset3+limit).map((pic, index: number) => (
<div
className="m-1 shrink-0 bg-gray-200 rounded shadow-md"
key={index}
>
<img
src={pic.url}
className="w-full h-10 md:h-20 object-center"
/>
<p className="text-center text-xs">{pic.name}</p>
</div>
{Idpics.slice(offset3, offset3 + limit).map((pic, index: number) => (
<div
className="m-1 shrink-0 bg-gray-200 rounded shadow-md"
key={index}
>
<img
src={pic.url}
className="w-full h-10 md:h-20 object-center"
/>
<p className="text-center text-xs">{pic.name}</p>
</div>
))}
</div>
</div>
......@@ -133,3 +137,4 @@ export default function Body() {
// Body Page
);
}
frontend/tailwind.config.js
View file @ c939c851
......@@ -2,23 +2,6 @@
module.exports = {
content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
theme: {
extend: {
keyframes: {
wave: {
'0%': { left: '100%' },
'4%': { left: '0' },
'33.33%': { left: '0' },
'37.33%': { left: '-100%' },
'66.66%': { left: '-100%' },
'70.66%': { left: '-200%' },
'99.99%': { left: '-200%' },
'100%': { left: '0%' },
}
},
animation: {
wave : 'wave 12s ease-in-out'
}
},
},
extend: {},
plugins: [],
};
}};
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment