22.03.31-버튼 추가/숨기기

버튼 추가/숨기기

  • 일반회원과 판매자회원에 따라 보이는 버튼을 달리해야 함
  • class 추가로 가능할 것 같음

전체 코드

<div>
    <button th:classappend="${member.getMemberType().name()} == 'NORMAL' ? 'btn-appear' : 'btn-disappear'" 
    th:text="'판매자 등록하기'" th:onclick="|location.href='@{/members/seller/register}'|"></button>
</div>
<div>
    <button th:classappend="${member.getMemberType().name()} == 'NORMAL' ? 'btn-disappear' : 'btn-appear'" 
    th:onclick="|location.href='@{/items}'|" th:text="#{button.items.manage}">상품관리</button>
</div>

1. th:classappend

th:classappend="${member.getMemberType().name()} == 'NORMAL' ? 'btn-appear' : 'btn-disappear'" 
  • 물음표 좌측(조건)이 true -> A : B 중 A 선택
  • 물음표 좌측(조건)이 false -> A : B 중 B 선택

2. CSS

loginHome.css

.btn-disappear{
    display: none;
}

.btn-appear{
    display: block;
}

주의할점

  • css파일은 template이 아닌 static에 넣어야 적용이 된다.
<link rel="stylesheet" type="text/css" href="css/loginHome.css">

참고 사이트

https://ssd0908.tistory.com/entry/thymeleaf-%ED%81%B4%EB%9E%98%EC%8A%A4-%EB%8F%99%EC%A0%81%EC%B6%94%EA%B0%80-thclassappend-%EC%82%AC%EC%9A%A9%EB%B0%A9%EB%B2%95

좋은 웹페이지 즐겨찾기