如何在Angular Material中创建手风琴下拉菜单? [英] How does one create an accordion dropdown menu in Angular Material?
问题描述
如果您访问 https://material.angularjs.org 网站, 您会在sidenav中看到一个非常不错的手风琴"下拉菜单.
If you go to the https://material.angularjs.org website, you will notice a very nice Accordion dropdown menu in the sidenav.
我正在尝试查找此功能的简化版本. 我查看了许多示例,似乎其中许多不再起作用.
I'm trying to find a simplified version of this feature. I've looked into many examples it appears many of them are no longer working.
我不需要复杂的内容.因此,不需要重复的项目.我能做的所有.我需要基本功能.
I don't need it complicated. So no need of repetative items. I can do all that. I need the basic functionality.
根据我的研究,他们正在开发一个expando功能,但是在那之前还可以解决吗?
From what I've researched they have an expando feature being developed, but until then is there a work around?
已更新:
我无法找到好的角材料设计,但能够找到角方法.
I wasn't able to find a good angular material design, but I was able to find an angular method.
https://github.com/sherwaniusman/angular-accordion
推荐答案
这就是我最终使用的
指令HTML代码
需要左右箭头img
<ang-accordion one-at-a-time="true" icon-position="right" close-icon-url="<?php echo URL; ?>/img/icons/right-icon.png" open-icon-url="<?php echo URL; ?>/img/icons/down-icon.png">
<collapsible-item ng-repeat="item in items" item-title="" initially-open="">
<div>Text</div>
</collapsible-item>
</ang-accordion>
要包含的脚本
<script type="text/javascript" src="<?php echo URL; ?>/js/angular/controllers/accordion.js"></script>
JS:Accordion.js
app.controller('angAccordionController', ['$scope', function($scope){
var collapsibleItems = [];
this.openCollapsibleItem = function(collapsibleItemToOpen) {
if( $scope.oneAtATime ) {
angular.forEach(collapsibleItems, function(collapsibleItem) {
collapsibleItem.isOpenned = false;
collapsibleItem.icon = collapsibleItem.closeIcon;
});
}
collapsibleItemToOpen.isOpenned = true;
};
this.addCollapsibleItem = function(collapsibleItem) {
collapsibleItems.push(collapsibleItem);
if ( $scope.closeIconClass !== undefined || $scope.openIconClass !== undefined ) {
collapsibleItem.iconsType = 'class';
collapsibleItem.closeIcon = $scope.closeIconClass;
collapsibleItem.openIcon = $scope.openIconClass;
}
else if ( $scope.closeIconUrl !== undefined || $scope.openIconUrl !== undefined ) {
collapsibleItem.iconsType = 'url';
collapsibleItem.closeIcon = $scope.closeIconUrl;
collapsibleItem.openIcon = $scope.openIconUrl;
}
collapsibleItem.iconIsOnLeft = $scope.iconPosition == 'left' ? true: false;
};
}])
.directive('angAccordion', function() {
return {
restrict: 'EA',
transclude: true,
replace: true,
scope: {
oneAtATime: '@',
closeIconUrl: '@',
openIconUrl: '@',
closeIconClass: '@',
openIconClass: '@',
iconPosition: '@'
},
controller: 'angAccordionController',
template: '<div class="accordion" ng-transclude></div>'
};
});
angular.module('collapsibleItem', []).directive('collapsibleItem', function() {
return {
require: '^angAccordion',
restrict: 'EA',
transclude: true,
replace: true,
scope: {
itemTitle: '@',
itemDisabled: '=',
initiallyOpen: '@'
},
link: function(scope, element, attrs, accordionController) {
scope.isOpenned = (scope.initiallyOpen == "true") ? true : false;
accordionController.addCollapsibleItem(scope);
if(scope.isOpenned)
scope.icon = scope.openIcon;
else
scope.icon = scope.closeIcon;
scope.toggleCollapsibleItem = function () {
if(scope.itemDisabled)
return;
if(!scope.isOpenned) {
accordionController.openCollapsibleItem(this);
scope.icon = scope.openIcon;
}
else {
scope.isOpenned = false;
scope.icon = scope.closeIcon;
}
};
scope.getIconUrl = function ( type ) {
return type == 'url' ? scope.icon : null;
};
},
template: '<div class="collapsible-item" ng-class="{open: isOpenned}"><div class="title" ng-class="{disabled: itemDisabled}" ng-click="toggleCollapsibleItem()">{{itemTitle | limitTo:28 }}<i ng-show="iconsType == \'class\'" class="{{icon}} icon" ng-class="{iconleft: iconIsOnLeft}"></i><img ng-show="iconsType == \'url\'" class="icon" ng-class="{iconleft: iconIsOnLeft}" ng-src="{{getIconUrl(iconsType)}}" /></div><div class="body"><div class="content" ng-transclude></div></div></div>'
};
});
CSS
.collapsible-item {
margin-bottom: 0px;
}
.collapsible-item .title {
padding: 10px;
background-color: #dfdfdf;
border: 0px solid #ccc;
cursor: pointer;
}
.collapsible-item .title .icon {
float: right;
height: 20px;
width: 20px;
font-size: 19px !important;
padding-right: 1px;
}
.collapsible-item .title .iconleft {
float: left !important;
}
.collapsible-item .title.disabled {
background: #eee;
color: #999;
cursor: text;
}
.collapsible-item .body {
position: relative;
top: -4px;
max-height: 0;
overflow: hidden;
border: 1px solid #ccc;
border-top: 0;
z-index: -1;
-webkit-transition: max-height 0.5s ease;
-moz-transition: max-height 0.5s ease;
-o-transition: max-height 0.5s ease;
transition: max-height 0.5s ease;
}
.collapsible-item .body .content {
padding: 5px 15px 5px 15px;
}
.collapsible-item.open .body {
max-height: 1000px;
z-index: 1;
}
这篇关于如何在Angular Material中创建手风琴下拉菜单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!