웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
AngularJS 부트스트랩에서 uibCollapse를 사용하는 방법에 대하여 알아봅니다.
uib-collapse는 선택한 요소 엘리먼트가 열리고 닫히면서 보이고 안보이는 것을 토글처럼 반복합니다. 이는 어코디언 방식처럼 동작하죠.
uib-collapse 디렉티브에 값을 추가하여 사용합니다. 기본값으로 false가 설정되어있으며 true인 경우에 안보이는 상태가 됩니다.
아래는 간단한 예제코드입니다. 시간을 클릭하여 재설정하고자 할때 해당 UI를 사용하면 매우 편리합니다.
위의 시간이 나타나는 엘리먼트 요소를 클릭시 isEditing이 true가 되어 그 아래의 시간을 변경하는 압력폼이 스르르 아래로 늘어나게됩니다.
# uibCollapse 알아보기
uib-collapse는 선택한 요소 엘리먼트가 열리고 닫히면서 보이고 안보이는 것을 토글처럼 반복합니다. 이는 어코디언 방식처럼 동작하죠.
uib-collapse 디렉티브에 값을 추가하여 사용합니다. 기본값으로 false가 설정되어있으며 true인 경우에 안보이는 상태가 됩니다.
# uibCollapse 예제보기
아래는 간단한 예제코드입니다. 시간을 클릭하여 재설정하고자 할때 해당 UI를 사용하면 매우 편리합니다.
<div ng-click="isEditing = true">{{ hour }}</div>
<div uib-collapse="!isEditing">
<input type="number" ng-model="hour" />
</div>위의 시간이 나타나는 엘리먼트 요소를 클릭시 isEditing이 true가 되어 그 아래의 시간을 변경하는 압력폼이 스르르 아래로 늘어나게됩니다.
code snippet widget
아래의 글도 찾고 계시지 않나요?