angular-material-expander
Expanding component that follows material design spec and is built to be used with Angular Material
Quick Links:
Installation
Bower
Change to your project's root directory.
# To install latest bower install angular-material-expander # To install latest and update bower.json bower install angular-material-expander --save
Npm
Change to your project's root directory.
# To install latest npm install angular-material-expander # To install latest and update package.json npm install angular-material-expander --save
setup
install modules
# install npm modules npm install # install bower components bower install
Include the material.components.expander
module as a dependency in your application.
// with ngMaterialangular;
Building
You can easily build using gulp.
The built files will be created in the dist
folder
Run the gulp tasks:
# To run test app 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 build
Usage
Example
header <!-- add content without padding --> content
Documentation
To add Expanders to you angular-material project, include the material.components.expander
module as a dependency in your application.
angular;
mdExpander
...
Attributes
Param | Type | Details |
---|---|---|
md-expanded | boolean? | Optional boolean to control the panel with |
height | number? | set height in pixels. If not set the the expander will open to the contents height |
width | number? | set width in pixels. If not set then the expander will fill the area |
mdExpanderHeader
This is an optional element.
...
mdExpanderExpanded
You can add a div with the class name md-expander-content
to get the default padding
... ...
mdExpanderArrow
This is an optional element. that can be added as the first or last element in the md-expander-header
<!-- First --> ... <!-- Last --> ...
Service
$mdExpander Service
Show and Hide expanders using their md-component-id
.
// sync;;; // Async;
Methods
$mdExpander
Get an instance of the expander by its component id You can use this in 2 ways
-
- pass in a string id and get back the instance
-
- call the service and get a service with 2 methods.
Find
witch will do the same as 1.waitFor
that will return a promise, so you can call on directives before they are added to the dom.
- call the service and get a service with 2 methods.
Parameters
Param | Type | Details |
---|---|---|
componentId | string= | the component id used on the element |
Returns
Param | Details |
---|---|
promise/instance | returns a instance or a service with 2 methods |
Returned Service
Method | Details |
---|---|
find | sync method for getting instance |
waitFor | async method for getting instance. this returnes a promise |
$mdExpander#show
Show content inside of the md-expander-expanded
element
// sync; // Async;
$mdExpander#hide
Hide content inside of the md-expander-expanded
element
// sync; // Async;
$mdExpander#isOpen
Returns true
if expander is open. Returns false
if expander is hidden
// sync; // Async;