본문 바로가기
React/React Library

[Keeper-App 7] 박스에 Zoom transition

by CodeMia 2022. 4. 18.

Material UI 안 검색에서 Zoom을 검색한 후 Zoom API(바로가기)로 간다. 

 

 

Zoom import를 한다. 

import Zoom from '@mui/material/Zoom';

 

 

 

 

버튼 줌인하기 

in Props를 사용해서 true, false boolean을 사용한다. 

 

 

 

 

 

 

박스가 접혀 있다가 클릭하면 펼쳐지기 

 

접혔을 땐 한 줄 박스로 있다가 

 

 

 

박스를 클릭하면 내용 보두 보이게 하기 

 

 

 

 

 

 

일단 useState를 추가한다. 

 

 

 

 

<textarea>에 onClick를 넣어 expand 메소드와 연결한다. 

 

 

 

 

input이 박스 펼쳤을 때만 보이게 한다. 

 

 

 

 

<textarea> 의 rows가 접혀 있을 땐 1, 펼쳐졌을 땐 3 가 되도록 하기 

 

 

 

 

버튼도 접혀있을 땐 안보이다가 펼쳐지면 보이게 하기 

 

 

 

 

'React > React Library' 카테고리의 다른 글

[Keeper-App 8] Transparent Textures 배경에 패턴 넣기  (0) 2022.04.18

댓글