티스토리 뷰
[react bootstrap] 부트스트랩 UncontrolledCollapse 적용하기 기록
Jjiveloper 2021. 5. 9. 23:53참고: reactstrap.github.io/components/collapse/
reactstrap - Collapse
Collapse Toggle Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. import React, { useState } from 'react'; impor
reactstrap.github.io
특정한 것을 클릭했을 때 글이 숨어있다가 보이게 해주는 부트스트랩 Collapse 기능
그 중에서도 UncontrolledCollapse를 사용해보았다.
나는 버튼 대신 span태그를 이용해 글자를 클릭할 수 있도록 구현하였다.
<p style={{textAlign:"left"}}>
<span className="delInfo" style={{cursor:"pointer", fontSize:"20px"}}> ▼ 배송지 정보 </span>
<UncontrolledCollapse toggler=".delInfo">
<Card style={{width:"50%", textAlign:"left"}}>
<CardBody>
주문자: {title.recipient} <br/>
연락처: {title.ph} <br/>
배송지: <br/>
[{title.zonecode}] {title.address} {title.detailAddress}
</CardBody>
</Card>
</UncontrolledCollapse>
</p>
결과
배송지 정보 버튼을 클릭하면 수령인, 연락처, 배송지 정보가 나타난다.
클릭 시
이렇게 정보가 나온다.
현재는 반복문안에서 적용해봤던 거라서 id 대신에 클래스를 썼다.
id도 그렇고 클래스도 동일하지만... 이렇게하니까 모든 delInfo들의 collapse가 동시에 열리고 닫혔다...
당연한 결과인데 적용할 땐 미처 생각을 못했던 거라서 코드 지우기 전에 기록용으로 남겨놓기
참고로 id를 사용할 거면 UncontrolledCollapsed의 toggler 속성에 . 클래스를 # 아이디로 변경해주면 된다.
.delInfo → #delInfo
<p style={{textAlign:"left"}}>
<span id="delInfo" style={{cursor:"pointer", fontSize:"20px"}}> ▼ 배송지 정보 </span>
<UncontrolledCollapse toggler="#delInfo">
<Card style={{width:"50%", textAlign:"left"}}>
<CardBody>
주문자: {title.recipient} <br/>
연락처: {title.ph} <br/>
배송지: <br/>
[{title.zonecode}] {title.address} {title.detailAddress}
</CardBody>
</Card>
</UncontrolledCollapse>
</p>