React로 간단하게 예쁜 페이지 스타일을 실현하는 방법[material-ui]

웹 응용 프로그램을 제작할 때 많은 경우에 페이지 효과가 필요하다.구글과 아마존에도 설치되어 있습니다.


React에서 페이지 형식의 material-ui를 사용하는 것이 편리하기 때문에 이 글에서 먼저 정리했습니다.
이 글에서 만들 페이지 스타일

material-ui 페이지 스타일 사용하기

우선material-ui의 포장을 꺼내야 합니다.yarn add @material-ui/lab일반 메일 - ui 구성 요소를 사용할 때의 포장과 다르다는 것을 주의하십시오.

무엇

material-ui/lab는 material-ui/core에 포함되지 말아야 할 장서를 가리킨다.
일반적으로material-ui를 사용하는 경우yarn add @material-ui/corecore를 가져와야 합니다.하지만 그 코어에 버그가 포함되면 업그레이드에 시간이 걸립니다.
이런 상황에 대응하기 위해 사용 빈도가 낮거나 코드의 질이 낮은 것은lab로 나누어 등록한다.

페이지 스타일 사용

그럼 material-ui의 페이지 형식을 실제적으로 사용하세요.

import MuiPagination from '@material-ui/lab/Pagination';
import { withStyles } from '@material-ui/core/styles';
import {useState} from 'react'

export default function Index() {
  //ページ番号
  const [page, setPage] = useState(1)

  const Pagination = withStyles({
    root: {
      display: 'inline-block',  //中央寄せのためインラインブロックに変更
    },
  })(MuiPagination);

  return (
    <div style={{textAlign: "center"}}>
      <Pagination 
        count={10}          //総ページ数
        color="primary"     //ページネーションの色
        onChange={(e, page) =>setPage(page)}  //変更されたときに走る関数。第2引数にページ番号が入る
        page={page}         //現在のページ番号
        />
    </div>
  );
  

}

위에서 말한 바와 같이 모듈Pagination을 가져와 필요한 속성을 설정한 후 사용한다.또한 onChange 클릭한 페이지 번호를 변경하여 객체의 번호를 활성화합니다.
참고로 자주 사용하는 속성은 아래와 같습니다.

boundaryCount: 최초 및 마지막 페이지 수

count: 총 페이지 수

page: 현재 페이지

siblingCount: 현재 페이지 앞뒤에 표시되는 페이지 수

종이를 가운데에 끼우려고요?

호출기를 가운데에 두려면 root 즉 .MuiPagination-root 클래스에 대한 응용display:inline-block을 하고 부모 요소에 추가text-align:center를 해야 한다.
기본적으로 호출기 맨 위에 있는 nav 요소 display:block 가 적용되기 때문에 text-align:center 무효입니다.따라서 inline-block로 변경한 후text-align:center는 효과가 있어 중앙을 가깝게 할 수 있다.
페이지 스타일의 HTML

<nav aria-label="pagination navigation" class="MuiPagination-root WithStyles(ForwardRef(Pagination))-root-20">
  <ul class="MuiPagination-ul">
    <li><button class="MuiButtonBase-root MuiPaginationItem-root MuiPaginationItem-page MuiPaginationItem-textPrimary" tabindex="0" type="button" aria-label="Go to previous page"><svg class="MuiSvgIcon-root MuiPaginationItem-icon" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path></svg><span class="MuiTouchRipple-root"></span></button></li>
    <li><button class="MuiButtonBase-root MuiPaginationItem-root MuiPaginationItem-page MuiPaginationItem-textPrimary" tabindex="0" type="button" aria-label="Go to page 1">1<span class="MuiTouchRipple-root"></span></button></li>
    <li>
      <div class="MuiPaginationItem-root MuiPaginationItem-ellipsis">…</div>
    </li>
    <li><button class="MuiButtonBase-root MuiPaginationItem-root MuiPaginationItem-page MuiPaginationItem-textPrimary" tabindex="0" type="button" aria-label="Go to page 5">5<span class="MuiTouchRipple-root"></span></button></li>
    <li><button class="MuiButtonBase-root MuiPaginationItem-root MuiPaginationItem-page MuiPaginationItem-textPrimary Mui-selected" tabindex="0" type="button" aria-current="true" aria-label="page 6">6<span class="MuiTouchRipple-root"></span></button></li>
    <li><button class="MuiButtonBase-root MuiPaginationItem-root MuiPaginationItem-page MuiPaginationItem-textPrimary" tabindex="0" type="button" aria-label="Go to page 7">7<span class="MuiTouchRipple-root"></span></button></li>
    <li>
      <div class="MuiPaginationItem-root MuiPaginationItem-ellipsis">…</div>
    </li>
    <li><button class="MuiButtonBase-root MuiPaginationItem-root MuiPaginationItem-page MuiPaginationItem-textPrimary" tabindex="0" type="button" aria-label="Go to page 10">10<span class="MuiTouchRipple-root"></span></button></li>
    <li><button class="MuiButtonBase-root MuiPaginationItem-root MuiPaginationItem-page MuiPaginationItem-textPrimary" tabindex="0" type="button" aria-label="Go to next page"><svg class="MuiSvgIcon-root MuiPaginationItem-icon" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg><span class="MuiTouchRipple-root"></span></button></li>
  </ul>
</nav>

블록 요소 text-align:center

display:block는 통상적으로 세로 배열 요소이다.그러나 이번 상황은 가로로 배열된 것은 nav 산하의 l에 적용되기 때문이다display: flex;.이렇게 보면 가로로 배열된 것 같다.nav 속성 자체가 세로 방향에서 한 줄로 표시됩니다.
따라서 블록 요소의 p 라벨의 부모 요소text-align:center;가 추가되어도 중간에 있지 않습니다.(여기서 p 태그의 텍스트는 중앙에 정렬됨)

<div style="width: 500px; text-align:center; background-color: blue;">
  <p style="width: 100px; background-color: skyblue;display:block;">
    aaa
  </p>
</div>

인라인 블록 요소 text-align:center

한편, display:inline-block는 가로로 배열된 디스플레이 방법으로 이쪽은 text-align:center의 중앙에 따라 정렬하면 효과적이다.하지만 부모 요소에 추가가 필요하다는 점에 유의해야 한다.

<div style="width: 500px; text-align:center; background-color: blue;">
  <p style="width: 100px; background-color: skyblue; display:inline-block;">
    aaa
  </p>
</div>

총결산

material-ui의 페이지 단자를 사용하려면 가져오기@material-ui/lab

클릭할 때마다 페이지 번호가 변경되고 활성 페이지가 변경됩니다

material-ui의 페이지 스타일은nav 요소로 구성되어 있기 때문에 중앙이 가까워지기 위해서는 루트에 설정display:inline-block, 부요소text-align:center;

참고 자료

페이지 보기