开源软件名称（OpenSource Name）：B-3PO/angular-material-expansion-panel开源软件地址(OpenSource Url)：https://github.com/B-3PO/angular-material-expansion-panel开源编程语言(OpenSource Language)：JavaScript 81.5%开源软件介绍(OpenSource Introduction)：angular-material-expansion-panelA module that implements design elements based on Material Design Expansion Panels. With additional features that are similar to Google Inbox style Expansion Panels. To see Material Design Expansion Panels Specification go here. The expansion panel component can be used with just html or you can use the Expansion Panel Group to control multiple panels through code DemoDemo Hosted on github.io Click Here 
Quick Links: InstallationBowerChange to your project's root directory. # To install latest
bower install angular-material-expansion-panel
# To install latest and update bower.json
bower install angular-material-expansion-panel --saveNpmChange to your project's root directory. # To install latest
npm install angular-material-expansion-panel
# To install latest and update package.json
npm install angular-material-expansion-panel --savesetupinstall modules # install npm modules
npm install
# install bower components
bower installInclude the angular.module('myApp', ['ngMaterial', 'material.components.expansionPanels']);BuildingYou can easily build using gulp. The built files will be created in the Run the gulp tasks: # To run locally. This will kick of the watch process
# navigate to `localhost:8080`
gulp
# To build the js and css files to the `/build` directory
gulp buildRun TestsTest using Karma Run the gulp tasks: gulp testUsageExample Template <md-expansion-panel md-component-id="panelOne">
<md-expansion-panel-collapsed>
<div class="md-title">Title</div>
<div class="md-summary">Summary</div>
<md-expansion-panel-icon></md-expansion-panel-icon>
</md-expansion-panel-collapsed>
<md-expansion-panel-expanded>
<md-expansion-panel-header>
<div class="md-title">Expanded Title</div>
<div class="md-summary">Expanded Summary</div>
<md-expansion-panel-icon></md-expansion-panel-icon>
</md-expansion-panel-header>
<md-expansion-panel-content>
<h4>Content</h4>
<p>Put content in here</p>
</md-expansion-panel-content>
<md-expansion-panel-footer>
<div flex></div>
<md-button class="md-warn" ng-click="$panel.collapse()">Collapse</md-button>
</md-expansion-panel-footer>
</md-expansion-panel-expanded>
</md-expansion-panel>angular.module('app').controller('ctrl', function ($mdExpansionPanel) {
// async
$mdExpansionPanel().waitFor('panelOne').then(function (instance) {
instance.expand();
instance.collapse({animation: false});
instance.remove();
instance.isOpen();
});
// sync
$mdExpansionPanel('panelOne').expand();
});Example Group <md-expansion-panel-group md-component-id="panelGroup" multiple>
<md-expansion-panel md-component-id="panelOne">
<md-expansion-panel-collapsed></md-expansion-panel-collapsed>
<md-expansion-panel-expanded>
<md-expansion-panel-header></md-expansion-panel-header>
<md-expansion-panel-content></md-expansion-panel-content>
<md-expansion-panel-footer></md-expansion-panel-footer>
</md-expansion-panel-expanded>
</md-expansion-panel>
<md-expansion-panel md-component-id="panelTwo">
<md-expansion-panel-collapsed></md-expansion-panel-collapsed>
<md-expansion-panel-expanded>
<md-expansion-panel-header></md-expansion-panel-header>
<md-expansion-panel-content></md-expansion-panel-content>
<md-expansion-panel-footer></md-expansion-panel-footer>
</md-expansion-panel-expanded>
</md-expansion-panel>
</md-expansion-panel-group>angular.module('app').controller('ctrl', function ($mdExpansionPanelGroup) {
// async
$mdExpansionPanelGroup().waitFor('panelGroup').then(function (instance) {
instance.remove('panelOne');
instance.remove('panelTwo', {animation: false});
});
// sync
$mdExpansionPanelGroup('panelOne').removeAll({animation: false});
});Example Register Panels to group <md-expansion-panel-group md-component-id="panelGroup" multiple>
</md-expansion-panel-group>angular.module('app').controller('ctrl', function ($scope, $mdExpansionPanelGroup) {
$mdExpansionPanelGroup().waitFor('panelGroup').then(function (instance) {
instance.register('panelOne', {
templateUrl: 'templateOne.html',
controller: 'TemplateOneController',
controllerAs: 'vm'
});
instance.register('panelTwo', {
templateUrl: 'templateTwo.html',
controller: 'TemplateTwoController',
controllerAs: 'vm'
});
});
$scope.addPanelOne = function () {
$mdExpansionPanelGroup('panelGroup').add('panelOne', {localParam: 'some data'});
};
$scope.addPanelTwo = function () {
$mdExpansionPanelGroup('panelGroup').add('panelTwo');
};
$scope.removePanelOne = function () {
$mdExpansionPanelGroup('panelGroup').remove('panelOne');
};
$scope.removeAll = function () {
$mdExpansionPanelGroup('panelGroup').removeAll({animation: false});
};
});DocumentationTo add Expansion Panels to you angular-material project, include the angular.module('myApp', ['ngMaterial', 'material.components.expansionPanels']);
DirectivesmdExpansionPanelGroup
Attributes
mdExpansionPanel
Attributes
mdExpansionPanelCollapsed
mdExpansionPanelExpanded
Attributes
mdExpansionPanelHeader
Attributes
mdExpansionPanelFooter
Attributes
mdExpansionPanelIcon
Services$mdExpansionPanelExpand and collapse Expansion Panel using its // sync
$mdExpansionPanel('theComponentId').expand();
$mdExpansionPanel('theComponentId').contract();
$mdExpansionPanel('theComponentId').remove({animation: false});
$mdExpansionPanel('theComponentId').onRemove(function () {});
$mdExpansionPanel('theComponentId').isOpen();
// Async
$mdExpansionPanel().waitFor('theComponentId').then(function (instance) {
instance.expand();
instance.contract();
instance.remove({animation: false});
instance.onRemove(function () {});
instance.isOpen();
});Methods$mdExpansionPanelGet an instance of the expansion panel by its component id You can use this in 2 ways
Parameters
Returns
Returned Service
$mdExpansionPanel#expandExapnd Panel Parameters
Returns
$mdExpansionPanel#collapseCollapse Panel Parameters
Returns
$mdExpansionPanel#removeRemove panel from document Parameters
Returns
$mdExpansionPanel#onRemoveCallback for panel when removed from dom Parameters
全部评论
专题导读
热门推荐
热门话题
 阅读排行榜
|
请发表评论