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">
참고 사이트
전체 코드
<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>
th:classappend="${member.getMemberType().name()} == 'NORMAL' ? 'btn-appear' : 'btn-disappear'"
.btn-disappear{
display: none;
}
.btn-appear{
display: block;
}
<link rel="stylesheet" type="text/css" href="css/loginHome.css">
Author And Source
이 문제에 관하여(22.03.31-버튼 추가/숨기기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@invigorating92/220331-버튼추가숨기기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)