免費(fèi)AI編程助手
ionic 側(cè)欄菜單
ionic 側(cè)欄菜單
一個(gè)容器元素包含側(cè)邊菜單和主要內(nèi)容。通過把主要內(nèi)容區(qū)域從一邊拖動(dòng)到另一邊，來讓左側(cè)或右側(cè)的側(cè)欄菜單進(jìn)行切換。
效果圖如下所示：
用法
要使用側(cè)欄菜單，添加一個(gè)父元素<ion-side-menus>，一個(gè)中間內(nèi)容 <ion-side-menu-content>，和一個(gè)或更多 <ion-side-menu> 指令。
<ion-side-menus> <!-- 中間內(nèi)容 --> <ion-side-menu-content ng-controller="ContentController"> </ion-side-menu-content> <!-- 左側(cè)菜單 --> <ion-side-menu side="left"> </ion-side-menu> <!-- 右側(cè)菜單 --> <ion-side-menu side="right"> </ion-side-menu> </ion-side-menus>
function ContentController($scope, $ionicSideMenuDelegate) { $scope.toggleLeft = function() { $ionicSideMenuDelegate.toggleLeft(); }; }
API
| 屬性 | 類型 | 詳情 |
|---|---|---|
| enable-menu-with-back-views (可選) | 布爾值 | 在返回按鈕顯示時(shí)，確認(rèn)是否啟用側(cè)邊欄菜單。 |
| delegate-handle | 字符串 | 該句柄用于標(biāo)識(shí)帶有$ionicScrollDelegate的滾動(dòng)視圖。 |
ion-side-menu-content
一個(gè)可見主體內(nèi)容的容器，同級(jí)的一個(gè)或多個(gè)ionSideMenu 指令。
用法
<ion-side-menu-content drag-content="true"> </ion-side-menu-content>
API
| 屬性 | 類型 | 詳情 |
|---|---|---|
| drag-content (可選) | 布爾值 | 內(nèi)容是否可被拖動(dòng)。默認(rèn)為true。 |
ion-side-menu
一個(gè)側(cè)欄菜單的容器，同級(jí)的一個(gè)ion-side-menu-content 指令。
用法
<ion-side-menu side="left" width="myWidthValue + 20" is-enabled="shouldLeftSideMenuBeEnabled()"> </ion-side-menu>
API
| 屬性 | 類型 | 詳情 |
|---|---|---|
| side | 字符串 | 側(cè)欄菜單當(dāng)前在哪一邊?？蛇x的值有: 'left' 或 'right'。 |
| is-enabled (可選) | 布爾值 | 該側(cè)欄菜單是否可用。 |
| width (可選) | 數(shù)值 | 側(cè)欄菜單應(yīng)該有多少像素的寬度。默認(rèn)為275。 |
menu-toggle
在一個(gè)指定的側(cè)欄中切換菜單。
用法
下面是一個(gè)在導(dǎo)航欄內(nèi)鏈接的例子。點(diǎn)擊此鏈接會(huì)自動(dòng)打開指定的側(cè)欄菜單。
<ion-view> <ion-nav-buttons side="left"> <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> </ion-nav-buttons> ... </ion-view>
menu-close
關(guān)閉當(dāng)前打開的側(cè)欄菜單。
用法
下面是一個(gè)在導(dǎo)航欄內(nèi)鏈接的例子。點(diǎn)擊此鏈接會(huì)自動(dòng)打開指定的側(cè)欄菜單。
<a menu-close href="#/home" class="item">首頁</a>
$ionicSideMenuDelegate
該方法直接觸發(fā)$ionicSideMenuDelegate服務(wù)，來控制所有側(cè)欄菜單。用$getByHandle方法控制特定情況下的ionSideMenus。
用法
<body ng-controller="MainCtrl"> <ion-side-menus> <ion-side-menu-content> 內(nèi)容! <button ng-click="toggleLeftSideMenu()"> 切換左側(cè)側(cè)欄菜單 </button> </ion-side-menu-content> <ion-side-menu side="left"> 左側(cè)菜單! <ion-side-menu> </ion-side-menus> </body>
function MainCtrl($scope, $ionicSideMenuDelegate) { $scope.toggleLeftSideMenu = function() { $ionicSideMenuDelegate.toggleLeft(); }; }
方法
toggleLeft([isOpen])
切換左側(cè)側(cè)欄菜單（如果存在）。
| 參數(shù) | 類型 | 詳情 |
|---|---|---|
| isOpen (可選) | 布爾值 | 是否打開或關(guān)閉菜單。默認(rèn)：切換菜單。 |
toggleRight([isOpen])
切換右側(cè)側(cè)欄菜單（如果存在）。
| 參數(shù) | 類型 | 詳情 |
|---|---|---|
| isOpen (可選) | 布爾值 | 是否打開或關(guān)閉菜單。默認(rèn)：切換菜單。 |
getOpenRatio()
獲取打開菜單內(nèi)容超出菜單寬度的比例。比如，一個(gè)寬度為100px的菜單被寬度為50px以50%的比例打開，將會(huì)返回一個(gè)比例值為0.5。
返回值: 浮點(diǎn) 0 表示沒被打開，如果左側(cè)菜單處于已打開或正在打開為0 到 1，如果右側(cè)菜單處于已打開或正在打開為0 到-1。
isOpen()
返回值: 布爾值，判斷左側(cè)或右側(cè)菜單是否已經(jīng)打開。
isOpenLeft()
返回值: 布爾值左側(cè)菜單是否已經(jīng)打開。
isOpenRight()
返回值: 布爾值右側(cè)菜單是否已經(jīng)打開。
canDragContent([canDrag])
| 參數(shù) | 類型 | 詳情 |
|---|---|---|
| canDrag (可選) | 布爾值 | 設(shè)置是否可以拖動(dòng)內(nèi)容打開側(cè)欄菜單。 |
返回值: 布爾值，是否可以拖動(dòng)內(nèi)容打開側(cè)欄菜單。
$getByHandle(handle)
| 參數(shù) | 類型 | 詳情 |
|---|---|---|
| handle | 字符串 |
例如:
$ionicSideMenuDelegate.$getByHandle('my-handle').toggleLeft();
更多建議：