웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
AngularJS의 부트스트랩을 사용하여 tab 메뉴의 ui를 구현하는 경우 만약 disabled 시키는 방법입니다. 쉽게 생각하기를 disabled 속성을 주면되지 않을까라 생각할 수 있으나 실제로는 동작하지 않습니다. 만약 아래 태그가 있다고 가정해보겠습니다.
일반적으로 disabled 속성을 사용하나 uibtab의 경우 disable 속성을 추가하여 사용하는 것이 차이점입니다. 이제 적용된 탭 메뉴는 비활성화 되어 나타나게됩니다.
# uibtab 메뉴의 disabled 적용하는 방법
먼저 예제를 적용하기 위한 html 코드입니다. 해당 html에 uib-tab이 사용되었습니다.<uib-tabset active="active">
<uib-tab index="0" heading="Menu 1">
<span>Content 1</span>
</uib-tab>
<uib-tab index="1" heading="Menu 2">
<span>Content 2</span>
</uib-tab>
</uib-tabset>
여기에 아래와 같이 uib-tab 태그에 disable를 아래처럼 적용합니다. 이때 값으로 true를 넣습니다.<uib-tab index="0" heading="Menu 1">
<span>Content 1</span>
</uib-tab>
<uib-tab index="1" heading="Menu 2">
<span>Content 2</span>
</uib-tab>
</uib-tabset>
<uib-tab disable="true">
<span>Content 1</span>
</uib-tab>
<span>Content 1</span>
</uib-tab>
일반적으로 disabled 속성을 사용하나 uibtab의 경우 disable 속성을 추가하여 사용하는 것이 차이점입니다. 이제 적용된 탭 메뉴는 비활성화 되어 나타나게됩니다.
아래의 글도 찾고 계시지 않나요?
