Skip to content

Polymer 1.0 component for the accordion [pure javascript, no libraries].

License

Notifications You must be signed in to change notification settings

dreammmr/paper-accordion

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

<paper-accordion>

<paper-accordion> is a material design styled Polymer 1.x component for the accordion [pure javascript, no libraries].

Live Example

##Installing with Bower

To install the component with the Bower, just run:

bower install --save paper.accordion

Example:

<link href="path/to/paper-accordion/paper-accordion.html" rel="import">

...

<paper-accordion>
    <paper-accordion-item title="Addy Osmani" icon="add" icon-position="left" sub-title="@polymer">
        The first.
    </paper-accordion-item>
    <paper-accordion-item title="Rob Dodson" icon="add" icon-position="left" sub-title="@polymer">
        The second.
    </paper-accordion-item>
    <paper-accordion-item title="Paul Irish" icon="add" icon-position="left" sub-title="@chrome">
        The third.
    </paper-accordion-item>
    <paper-accordion-item title="Rouben Meschian" icon="add" icon-position="left" sub-title="@cambridesemantics">
        The fourth.
    </paper-accordion-item>
</paper-accordion>

Styling

The following custom properties are available for styling:

Custom property Description Default
--paper-accordion-item-header-background The background color of the accordion header transparent
--paper-accordion-item-header-border-color The border color of the accordion header container rgba(0, 0, 0, 0.25)
--paper-accordion-item-header-color The text color of the accordion header container black
--paper-accordion-item-header-icon-color The icon color of the accordion header container black
--paper-accordion-item-content-background The accordion content background color rgba(0,0,0,0.1)
--paper-accordion-item-content-color The accordion content text color black

<paper-accordion> - Properties

The following properties are available:

Property Name Description Default
close-others If it's 'true' there could me only one opened accordion false

<paper-accordion-item> - Properties

The following properties are available:

Property Name Description Default
icon The name of the icon icons:chevron-right
icon-position The position of the icon left or right left
title The title of the accordion item header ``
sub-title The sub title of the accordion item header ``

About

Polymer 1.0 component for the accordion [pure javascript, no libraries].

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages