AngularJS 多级折叠/展开手风琴导航插件

AngularJS multi-level accordion component

Angular，插件

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3552
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function(angular) {
    'use strict';

angular
        .module('myApp', ['ngAnimate', 'vAccordion'])

.controller('MainController', function($scope) {

$scope.panesA = [{
            id: 'pane-1a',
            header: 'Pane 1',
            content: 'Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi.',
            isExpanded: true
        }, {
            id: 'pane-2a',
            header: 'Pane 2',
            content: 'Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.'
        }, {
            id: 'pane-3a',
            header: 'Pane 3',
            content: 'Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non.',

subpanes: [{
                id: 'subpane-1a',
                header: 'Subpane 1',
                content: 'Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non.'
            }, {
                id: 'subpane-2a',
                header: 'Subpane 2 (disabled)',
                content: 'Curabitur et ligula. Ut molestie a, ultricies porta urna. Quisque lorem tortor fringilla sed, vestibulum id.',
                isDisabled: true
            }]
        }];

$scope.panesB = [{
            id: 'pane-1b',
            header: 'Pane 1',
            content: 'Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi.',
            isExpanded: true
        }, {
            id: 'pane-2b',
            header: 'Pane 2',
            content: 'Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.'
        }, {
            id: 'pane-3b',
            header: 'Pane 3',
            content: 'Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non.',

subpanes: [{
                id: 'subpane-1b',
                header: 'Subpane 1',
                content: 'Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non.'
            }, {
                id: 'subpane-2b',
                header: 'Subpane 2 (disabled)',
                content: 'Curabitur et ligula. Ut molestie a, ultricies porta urna. Quisque lorem tortor fringilla sed, vestibulum id.',
                isDisabled: true
            }]
        }];

$scope.expandCallback = function(index, id) {
            console.log('expand:', index, id);
        };

$scope.collapseCallback = function(index, id) {
            console.log('collapse:', index, id);
        };

$scope.$on('accordionA:onReady', function() {
            console.log('accordionA is ready!');
        });

});

})(angular);

编译

CSS

/* Base styles
 ***************************************/

v-accordion {
    display: block;
}
v-pane {
    display: block;
}
v-pane.is-expanded > v-pane-content > div {
    display: visible;
}
v-pane[disabled] > v-pane-header {
    opacity: 0.6;
    pointer-events: none;
}
v-pane-header {
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
}
v-pane-header:focus {
    outline: none;
}
v-pane-header > div {
    display: block;
}
v-pane-content {
    display: block;
    position: relative;
    overflow: hidden;
    max-height: 0px;
}
v-pane-content > div {
    visibility: none;
}
/* Theme: default
 ***************************************/

.vAccordion--default v-accordion {
    margin-top: 20px;
    padding-left: 20px;
}
.vAccordion--default v-pane-content > div {
    padding-bottom: 20px;
    opacity: 0;
    -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.vAccordion--default v-pane {
    overflow: hidden;
}
.vAccordion--default v-pane.is-expanded > v-pane-header {
    border-bottom-color: #2196F3;
}
.vAccordion--default v-pane.is-expanded > v-pane-header::after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
}
.vAccordion--default v-pane.is-expanded > v-pane-header::before {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.vAccordion--default v-pane.is-expanded > v-pane-content > div {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.vAccordion--default v-pane[disabled] v-pane-header::after,
.vAccordion--default v-pane[disabled] v-pane-header::before {
    display: none;
}
.vAccordion--default v-pane-header {
    padding: 5px 0;
    margin-bottom: 20px;
    border-bottom: 2px solid #D8D8D8;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}
.vAccordion--default v-pane-header::after,
.vAccordion--default v-pane-header::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: 10px;
    height: 1px;
    background-color: #2196F3;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    will-change: transform;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}
.vAccordion--default v-pane-header::before {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.vAccordion--default v-pane-header:hover,
.vAccordion--default v-pane-header:focus {
    color: #2196F3;
}

HTML

<header class="u-marginBl u-textCenter">
        <div>
            <svg class="u-inlineBlock" width="58px" height="58px" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 54 54">
                <g>
                    <path fill="#4CAF50" d="M3.1,27.9c0,0,10.2-24.1,11.6-27.2c0.2-0.5,0.6-0.8,1.2-0.6c0.5,0.1,0.8,0.7,1.5,2.2c1.3,2.9,18,37.2,18.7,38.6c0.8,1.6,1,2.6,0.7,3.4c-0.3,0.6-1,1.1-1.8,1.4c-2.3,0.9-20.3,7.8-21.5,8.3c-0.7,0.3-0.8-0.4-1.4-1.7C11.6,51,3.7,32.1,3.1,30.7C2.5,29.3,3.1,27.9,3.1,27.9z"
                    />
                    <path fill="#2196F3" d="M50.9,17.3c-0.3-0.3-0.4-0.4-0.7-0.2c-0.3,0.1-11.5,8.6-16.8,12.5c2.7,5.5,4.7,9.7,5,10.2c0.4,0.8,0.8,1.7,1,2.6c0.1-0.2,0.2-0.3,0.3-0.5c0.9-1.8,11.3-23.4,11.5-23.8C51.3,17.7,51.2,17.7,50.9,17.3z" />
                </g>
            </svg>
            <h2 class="u-marginTs">vAccordion</h2>
        </div>

<h5 class="u-marginBl">AngularJS multi-level accordion component.</h5>

<hr>

</header>

<div class="Grid Grid--gutters md-Grid--2col">
        <div class="Grid-cell u-marginBl">
            <h4 class="u-marginVm">Works with (or without) ng-repeat</h4>

<v-accordion id="accordionA" class="vAccordion--default" control="accordionA" onexpand="expandCallback(index, id)" oncollapse="collapseCallback(index, id)">

<v-pane id="{{ ::pane.id }}" ng-repeat="pane in panesA" expanded="pane.isExpanded">
                    <v-pane-header id="{{ ::pane.id }}-header" aria-controls="{{ ::pane.id }}-content">
                        <h5>{{ ::pane.header }}</h5>
                    </v-pane-header>

<v-pane-content id="{{ ::pane.id }}-content" aria-labelledby="{{ ::pane.id }}-header">
                        <p>{{ ::pane.content }}</p>

<v-accordion id="nestedAccordionA" ng-if="pane.subpanes">
                            <v-pane id="{{ ::subpane.id }}" ng-repeat="subpane in pane.subpanes" ng-disabled="subpane.isDisabled">
                                <v-pane-header id="{{ ::subpane.id }}-header" aria-controls="{{ ::subpane.id }}-header">
                                    <h5>{{ ::subpane.header }}</h5>
                                </v-pane-header>
                                <v-pane-content id="{{ ::subpane.id }}-content" aria-labelledby="{{ ::subpane.id }}-content">
                                    <p>{{ ::subpane.content }}</p>
                                </v-pane-content>
                            </v-pane>
                        </v-accordion>
                    </v-pane-content>
                </v-pane>

</v-accordion>

<div class="ButtonGroup ButtonGroup--hz ButtonGroup--collapse u-marginVm">
                <div class="ButtonGroup-item">
                    <button class="Button Button--default" ng-click="accordionA.toggle(panesA[0].id)">Toogle first</button>
                </div>
                <div class="ButtonGroup-item">
                    <button class="Button Button--default" ng-click="accordionA.toggle(panesA[2].id)">Toogle last</button>
                </div>
            </div>
        </div>

<div class="Grid-cell u-marginBl">
            <h4 class="u-marginVm">Allows multiple sections open at once</h4>

<v-accordion id="accordionB" class="vAccordion--default" multiple control="accordionB">

<v-pane id="{{ ::pane.id }}" ng-repeat="pane in panesB" expanded="pane.isExpanded">
                    <v-pane-header id="{{ ::pane.id }}-header" aria-controls="{{ ::pane.id }}-header">
                        <h5>{{ ::pane.header }}</h5>
                    </v-pane-header>

<v-pane-content id="{{ ::pane.id }}-content" aria-labelledby="{{ ::pane.id }}-content">
                        <p>{{ ::pane.content }}</p>

<v-accordion id="nestedAccordionB" multiple ng-if="pane.subpanes">
                            <v-pane id="{{ ::subpane.id }}" ng-repeat="subpane in pane.subpanes" ng-disabled="subpane.isDisabled">
                                <v-pane-header id="{{ ::subpane.id }}-header" aria-controls="{{ ::subpane.id }}-header">
                                    <h5>{{ ::subpane.header }}</h5>
                                </v-pane-header>
                                <v-pane-content id="{{ ::subpane.id }}-content" aria-labelledby="{{ ::subpane.id }}-content">
                                    <p>{{ ::subpane.content }}</p>
                                </v-pane-content>
                            </v-pane>
                        </v-accordion>
                    </v-pane-content>
                </v-pane>

</v-accordion>

<div class="ButtonGroup ButtonGroup--hz ButtonGroup--collapse u-marginVm">
                <div class="ButtonGroup-item">
                    <button class="Button Button--default" ng-click="accordionB.expandAll()">Expand all</button>
                </div>
                <div class="ButtonGroup-item">
                    <button class="Button Button--default" ng-click="accordionB.collapseAll()">Collapse all</button>
                </div>
            </div>
        </div>
    </div>

<hr>

</footer>

</div>

AngularJS multi-level accordion component

Angular，插件

编辑器支持Emmet

快捷键

AngularJS multi-level accordion component

Angular，插件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：