소개하다
ION-TABS는 Ionic의 탭 구성 요소이며 라우팅은 Angular-Ui-Router.js를 사용합니다. 따라서 먼저 Uiroute를 마스터해야합니다.
복제 다이어그램
예제 코드
index.html
<body ng-app = "starter"> <!-Ion-Nav-view는 템플릿 렌더링에 사용됩니다-> <Ion-Nav-view> </iion-nav-view> </body>
Tab-index.html
<ION-TABS> <!-HREF : 탭 아이콘에 해당하는 상태 : ION-TAB 비 하이라이트 아이콘 아이콘 아이콘 오프 : ION-TAB 하이콘 아이콘-> <Ion-TAB HREF = "#/Tabs/HOME"ICON-ON = "ION-NEW-HOME-OFF"아이콘 오프 = "ION-NEW-HOME"> <!-동일하게 설정되어 있습니다. 이름 속성. 그리고 경로를 공식화 할 때 해당 상태 및 렌더링 뷰-> <Ion-Nav-view name = "tab-Home"> </ison-nav-view> </ison-tab> <iOn-tab href = "#/tabs/taobao"icon-off = "ion-new-tf"icon-on = "iOn-new-tf-off"> 이름 = "tab-taobao"> </iion-nav-view> </ion-tab> <iOn-tab icon-off = "Ion-New-Zhemai"icon-on = "Ion-new-Zhemai-Off"> </ision-tab> <Ion-tab href = "#/tabs/user"icon-off = "ition-new-user"eOn-new-user "eon-new-use <Ion-Nav-view name = "tab-user"> </ion-nav-view> </iion-tab> </ion-tabs>
config.js
.state ( "탭", {url : "/tabs", templateUrl : "templates/tab/tab-index.html", 컨트롤러 : "탭"}). state ( "tabs.home", {url : "/home",보기 : { "templateUrl :"templateUrl : "template/home.html"}. }}). state ( "tabs.taobao", {url : "/taobao", views : { "tab-taobao": {templateUrl : "templates/taobao/taobao.html"}}}). templateUrl : "templates/user/user.html"}})))그런 다음 home.html taobao.html user.html 아래에 각 탭의 내용을 쓸 수 있습니다.
예를 들어:
home.html
<ION-HEADER-BAR> <ION-TITLE> home </ison-title> </ison-header-bar> <irion-view> <iion-content> <iOn-refresher pulling-text = "Drop-down refresh"on-refresh = "dorefresh ()"> </ision-Refresher> </ision-content> </it-view>
참고 : 이온-탭을 이온-콘텐츠 요소에 배치하지 마십시오. 알려진 특정 CSS 오류가 발생합니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.