Toggle機能の展開/縮小を実現
31332 ワード
内容
結果
コード#コード#
import React, { useState } from 'react';
import styled from 'styled-components';
const Text = () => {
const [isButtonClick, setIsButtonClick] = useState(false);
const onToggleButton = e => {
setIsButtonClick(!isButtonClick);
};
return (
<IntroduceTextBox>
<IntroduceText>
<p>
무엇을 생각하면 견딜 수 있나.
<br />
가슴에 활활 일어나는 불이 없다면.
<br />
기어이 돌아가 껴안을 네가 없다면.
<br />
<br />
이곳에 살았던 이들로부터, 이곳에 살아 있는 이들로부터 <br />
꿈처럼 스며오는 지극한 사랑의 기억 <br />
2016년 『채식주의자』로 인터내셔널 부커상을 수상하고 2018년 『흰』으로
같은 상 최종 후보에 오른 한강 작가의 5년 만의 신작 장편소설 <br />
『작별하자』가 출간되었다. 2019년 겨울부터 이듬해 봄까지 계간
『문학동네』에 전반부를 연재하면서부터 큰 관심을 모았고, 그뒤 일
년여에 걸쳐 후반부를 <br />
</p>
{/* 숨기기 */}
<ButtonOn
className="hiddenButton"
onClick={onToggleButton}
buttonShow={!isButtonClick}
>
펼쳐보기 <i className="fas fa-chevron-circle-down" />
</ButtonOn>
{/* 나타내기 */}
{isButtonClick && (
<>
<span>
집필하고 또 전체를 공들여 다듬는 지난한 과정을 거쳐 완성되었다.
본래 「눈 한 송이가 녹는 동안」(2015년 황순원문학상 수상작),
「작별」(2018년 <br />
김유정문학상 수상작)을 잇는 ‘눈’ 3부작의 마지막 작품으로
구상되었으나 그 자체 완결된 작품의 형태로 엮이게 된바, 한강 작가의
문학적 궤적에서 <br />
『작별하자』가 지니는 각별한 의미를 짚어볼 수 있다. 이로써
『소년이 온다』(2014), 『흰』(2016), ‘눈’ 연작(2015, 2017) 등
근작들을 통해 어둠
<br />
속에서도 한줄기 빛을 향해 나아가는 인간의 고투와 존엄을 그려온
한강 문학이 다다른 눈부신 현재를 또렷한 모습으로 확인할 수 있게
되었다. <br />
오래지 않은 비극적 역사의 기억으로부터 길어올린, 그럼에도 인간을
끝내 인간이게 하는 간절하고 지극한 사랑의 이야기가 눈이 시리도록
선연한 이미지와 <br />
유려하고 시적인 문장에 실려 압도적인 아름다움으로 다가온다.
</span>
<ButtonOff onClick={onToggleButton}>
접기
<i className="fas fa-chevron-circle-up" />
</ButtonOff>
</>
)}
</IntroduceText>
</IntroduceTextBox>
);
};
export default Text;
const IntroduceTextBox = styled.div`
margin: 30px 0 80px 0;
`;
const ButtonStyle = styled.button`
float: right;
color: #4076b5;
border: none;
cursor: pointer;
background-color: white;
font-size: 14px;
i {
margin-left: 3px;
font-size: 16px;
}
`;
const IntroduceText = styled.div`
line-height: 1.8em;
font-size: 15px;
color: #666;
height: ${({ isButtonClick }) => (isButtonClick ? `190px` : `100%`)};
overflow: hidden;
`;
const ButtonOn = styled(ButtonStyle)`
${({ buttonShow }) => {
return buttonShow ? `display:block` : `display: none`;
}}
`;
const ButtonOff = styled(ButtonStyle)`
${({ buttonShow }) => {
return buttonShow ? 'display: none' : 'display: block';
}};
`;
[展開](Expand)ボタンをクリックしてサブテキストを表示(修正)
spanにボタンを挿入し、本文とボタンを同時に表示して消去する
const [isButtonClick, setIsButtonClick] = useState(false);
//click event가 발생되면 event를 인자로 받아서
//set으로 isButtonClick:false <-> true로 바꿔줌
const onToggleButton = e => {
setIsButtonClick(!isButtonClick);
};
//수정전
<HiddenButton
className="hiddenButton"
onClick={onToggleButton}
펼쳐보기 <i className="fas fa-chevron-circle-down" />
</HiddenButton>
//수정후
<ButtonOn
className="hiddenButton"
onClick={onToggleButton}
buttonShow={!isButtonClick}
>
펼쳐보기 <i className="fas fa-chevron-circle-down" />
</ButtonOn>
//조건부렌더링을 사용하여 isButtonClick가 true이면 본문텍스트를 나타낸다
//수정전
//span안에 버튼을 넣어서 본문과 버튼이 같이 나타나고 사라짐
{isButtonClick && (
<span>
----본문 텍스트 생략----
<HiddenButton onClick={onToggleButton}>
접기
<i className="fas fa-chevron-circle-up" />
</HiddenButton>
</span>
)}
//수정후
// span안에 있던 버튼을 밖으로 빼기
{isButtonClick && (
<span>
----본문 텍스트 생략----
<HiddenButton onClick={onToggleButton}>
접기
<i className="fas fa-chevron-circle-up" />
</HiddenButton>
</span>
<ButtonOff onClick={onToggleButton}>
접기
<i className="fas fa-chevron-circle-up" />
</ButtonOff>
</>
)}
展開ボタンが消え、折りたたみボタンが表示されます(修正)
ボタンモデリング
ボタンをオン/オフにしてheightを条件スタイルにスケール
trueなら190 pxに増やして、本稿の内容を見せてください.
const [isButtonClick, setIsButtonClick] = useState(false);
const onToggleButton = e => {
setIsButtonClick(!isButtonClick);
};
<HiddenButton
className="hiddenButton"
onClick={onToggleButton}
//onClick후 isButtonClick이 true가 되면 buttonShow의 스타일링이 변경됨
buttonShow={isButtonClick}
>
펼쳐보기 <i className="fas fa-chevron-circle-down" />
</HiddenButton>
//style-component
//button 스타일을 따로 빼서 스타일링 하기
const ButtonStyle = styled.button`
float: right;
color: #4076b5;
border: none;
cursor: pointer;
background-color: white;
font-size: 14px;
i {
margin-left: 3px;
font-size: 16px;
}
`;
//수정후. 추가코드
const IntroduceText = styled.div`
line-height: 1.8em;
font-size: 15px;
color: #666;
//true면 190px로 늘려주줘서 본문내용이 보이게,
//false면 100%로 화면에 맞게 줄어듦
height: ${({ isButtonClick }) => (isButtonClick ? `190px` : `100%`)};
overflow: hidden;
`;
//따로 뺀 버튼 스타일링을 확장스타일링을 이용하여 자식으로 사용
//수정전
const HiddenButton = styled(ButtonStyle)`
${({ buttonShow }) => {
//buttonShow가 true이면 none false일때 block
return buttonShow ? `display: none` : `display:block`;
}};
`;
//수정후
const ButtonOn = styled(ButtonStyle)`
${({ buttonShow }) => {
return buttonShow ? `display:block` : `display: none`;
}}
`;
const ButtonOff = styled(ButtonStyle)`
${({ buttonShow }) => {
return buttonShow ? 'display: none' : 'display: block';
}};
`;
Reference
この問題について(Toggle機能の展開/縮小を実現), 我々は、より多くの情報をここで見つけました https://velog.io/@suminllll/펼쳐보기접기-Toggle-기능-구현テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol