mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
986dbac893
Closes #1024. BREAKING CHANGE: ion-list syntax has changed in favor of simplicity & flexibility. Relevant documentation: [ionList](http://ionicframework.com/docs/api/directive/ionList), [ionItem](http://ionicframework.com/docs/api/directive/ionItem), [ionOptionButton](http://ionicframework.com/docs/api/directive/ionOptionButton), [ionReorderButton](http://ionicframework.com/docs/api/directive/ionReorderButton), [ionDeleteButton](http://ionicframework.com/docs/api/directive/ionDeleteButton), [$ionicListDelegate](http://ionicframework.com/docs/api/service/$ionicListDelegate). To migrate, change your code from this: ```html <ion-list option-buttons="[{text:'hello',type:'button-positive',onTap:tap()}]" on-delete="onDelete(el)" delete-icon="ion-minus-circled" can-delete="true" show-delete="shouldShowDelete" on-reorder="onReorder(el, startIndex, toIndex)" reorder-icon="ion-navicon" can-reorder="true" show-reorder="shouldShowReorder"> <ion-item ng-repeat="item in items"> {{item}} </ion-item> </ion-list> ``` To this: ```html <ion-list show-delete="shouldShowDelete" show-reorder="shouldShowReorder"> <ion-item ng-repeat="item in items"> {{item}} <ion-delete-button class="ion-minus-circled" ng-click="onDelete(item)"> </ion-delete-button> <ion-reorder-button class="ion-navicon" ng-click="onReorder(item, $fromIndex, $toIndex)"> </ion-reorder-button> <ion-option-button class="button-positive" ng-click="tap()"> Hello </ion-option-button> </ion-item> </ion-list> ```
430 lines
8.0 KiB
HTML
430 lines
8.0 KiB
HTML
<!-- Tabs -->
|
|
<li class="menu-section">
|
|
<a href="#" class="api-section">
|
|
Tabs
|
|
</a>
|
|
<ul>
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/ionTabs/">
|
|
ion-tabs
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/ionTab/">
|
|
ion-tab
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/service/$ionicTabsDelegate/">
|
|
$ionicTabsDelegate
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
<!-- Side Menus -->
|
|
<li class="menu-section">
|
|
<a href="#" class="api-section">
|
|
Side Menus
|
|
</a>
|
|
<ul>
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/ionSideMenus/">
|
|
ion-side-menus
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/ionSideMenuContent/">
|
|
ion-side-menu-content
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/ionSideMenu/">
|
|
ion-side-menu
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/menuToggle/">
|
|
menu-toggle
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/menuClose/">
|
|
menu-close
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/service/$ionicSideMenuDelegate/">
|
|
$ionicSideMenuDelegate
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
<!-- Navigation -->
|
|
<li class="menu-section">
|
|
<a href="#" class="api-section">
|
|
Navigation
|
|
</a>
|
|
<ul>
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/ionNavView/">
|
|
ion-nav-view
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/ionView/">
|
|
ion-view
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/ionNavBar/">
|
|
ion-nav-bar
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/ionNavButtons/">
|
|
ion-nav-buttons
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/ionNavBackButton/">
|
|
ion-nav-back-button
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/navClear/">
|
|
nav-clear
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/service/$ionicNavBarDelegate/">
|
|
$ionicNavBarDelegate
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
<!-- Headers/Footers -->
|
|
<li class="menu-section">
|
|
<a href="#" class="api-section">
|
|
Headers/Footers
|
|
</a>
|
|
<ul>
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/ionHeaderBar/">
|
|
ion-header-bar
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/ionFooterBar/">
|
|
ion-footer-bar
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
<!-- Content -->
|
|
<li class="menu-section">
|
|
<a href="#" class="api-section">
|
|
Content
|
|
</a>
|
|
<ul>
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/ionContent/">
|
|
ion-content
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/ionRefresher/">
|
|
ion-refresher
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/ionPane/">
|
|
ion-pane
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
<!-- Scroll -->
|
|
<li class="menu-section">
|
|
<a href="#" class="api-section">
|
|
Scroll
|
|
</a>
|
|
<ul>
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/ionScroll/">
|
|
ion-scroll
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/ionInfiniteScroll/">
|
|
ion-infinite-scroll
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/service/$ionicScrollDelegate/">
|
|
$ionicScrollDelegate
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
<!-- Lists -->
|
|
<li class="menu-section">
|
|
<a href="#" class="api-section">
|
|
Lists
|
|
</a>
|
|
<ul>
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/ionList/">
|
|
ion-list
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/ionItem/">
|
|
ion-item
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/ionDeleteButton/">
|
|
ion-delete-button
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/ionReorderButton/">
|
|
ion-reorder-button
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/ionOptionButton/">
|
|
ion-option-button
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/service/$ionicListDelegate/">
|
|
$ionicListDelegate
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
<!-- Form Inputs -->
|
|
<li class="menu-section">
|
|
<a href="#" class="api-section">
|
|
Form Inputs
|
|
</a>
|
|
<ul>
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/ionCheckbox/">
|
|
ion-checkbox
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/ionRadio/">
|
|
ion-radio
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/ionToggle/">
|
|
ion-toggle
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
<!-- Slide Box -->
|
|
<li class="menu-section">
|
|
<a href="#" class="api-section">
|
|
Slide Box
|
|
</a>
|
|
<ul>
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/directive/ionSlideBox/">
|
|
ion-slide-box
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/service/$ionicSlideBoxDelegate/">
|
|
$ionicSlideBoxDelegate
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
<!-- Modal -->
|
|
<li class="menu-section">
|
|
<a href="#" class="api-section">
|
|
Modal
|
|
</a>
|
|
<ul>
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/service/$ionicModal/">
|
|
$ionicModal
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/controller/ionicModal/">
|
|
ionicModal
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
<!-- Action Sheet -->
|
|
<li class="menu-section">
|
|
<a href="#" class="api-section">
|
|
Action Sheet
|
|
</a>
|
|
<ul>
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/service/$ionicActionSheet/">
|
|
$ionicActionSheet
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
<!-- Popup -->
|
|
<li class="menu-section">
|
|
<a href="#" class="api-section">
|
|
Popup
|
|
</a>
|
|
<ul>
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/service/$ionicPopup/">
|
|
$ionicPopup
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
<!-- Loading -->
|
|
<li class="menu-section">
|
|
<a href="#" class="api-section">
|
|
Loading
|
|
</a>
|
|
<ul>
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/service/$ionicLoading/">
|
|
$ionicLoading
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
<!-- Platform -->
|
|
<li class="menu-section">
|
|
<a href="#" class="api-section">
|
|
Platform
|
|
</a>
|
|
<ul>
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/service/$ionicPlatform/">
|
|
$ionicPlatform
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
<!-- Gesture -->
|
|
<li class="menu-section">
|
|
<a href="#" class="api-section">
|
|
Gesture
|
|
</a>
|
|
<ul>
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/service/$ionicGesture/">
|
|
$ionicGesture
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
<!-- Utility -->
|
|
<li class="menu-section">
|
|
<a href="#" class="api-section">
|
|
Utility
|
|
</a>
|
|
<ul>
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/utility/ionic.Platform/">
|
|
ionic.Platform
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/utility/ionic.DomUtil/">
|
|
ionic.DomUtil
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="{{ page.versionHref }}/api/utility/ionic.EventController/">
|
|
ionic.EventController
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|