Skip to content

A Brick box element in which cards can be cycled independently of order with a variety of different transitions.

License

Notifications You must be signed in to change notification settings

mozbrick/brick-deck

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

56 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

brick-deck

A Brick box element in which cards can be cycled independently of order with a variety of different transitions.

Demo

Check it live!

Usage

  1. Import Web Components polyfill:

    <script src="bower_components/platform/platform.js"></script>
  2. Import Custom Element:

    <link rel="import" href="dist/brick-deck.html">
  3. Start using it:

    <brick-deck selected-index="0">
      <brick-card selected>0</brick-card>
      <brick-card>1</brick-card>
      <brick-card>2</brick-card>
      <brick-card>3</brick-card>
      <brick-card>4</brick-card>
    </brick-deck>

Options

Attribute Options Default Description
transition-type string
  • slide-left
  • slide-right
  • slide-up
  • slide-down
- Defines the type of animation to use for cycling between cards. The default is no transition animation.
This property can either be set as an HTML attribute under the name transition-type, or programmatically with the property transitionType selected-index.
selected-index number - Gets/sets the index of the currently selected card in the deck.
Can either be set as an HTML attribute under the name selected-index or programmatically with the property selectedIndex.
loop boolean - Toggle allowance of looping when calling nextCard and previousCard methods has reached the end of either side of the index.

Accessors

Poperty Type Description
transitionType string corresponds to the transition-type attribute
selectedIndex string corresponds to the selected-index attribute
loop boolean corresponds to the loop attribute
cards (getter only) array array of all the brick-card elements contained in an brick-deck
selectedCard (getter only) brick-card the brick-card DOM element that is currently displayed by the deck. Returns null if no such card exists.

Methods

Method Returns Description
showCard(index / element, [direction]) - Transitions to the brick-card at the given index within the deck. If given a direction of 'forward', will perform the forwards/normal version of the current transition animation. If given 'reverse', will performs the reverse animation. If the direction is omitted, the deck will perform a forward animation.
hideCard(index / element) - Hides the card element or card located at a specified index.
nextCard([direction]) - Transitions to the next card in the deck, looping back to the start if needed.
previousCard([direction]) - Transitions to the previous card in the deck, looping back to the end if needed.

Events

Event Description
show Fired from a card target after it has completed its show animation, and the show state has been finalized.
hide Fired from a card target after it has completed its hide animation, and the hide state has been finalized.

Development

Brick components use Stylus to generate their CSS.

This repository comes outfitted with a set of tools to ease the development process.

To get started:

  • Install Bower & Gulp:

    $ npm install -g bower gulp
  • Install local dependencies:

    $ npm install && bower install

While developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code.

To run the development server:

  • Run gulp server
  • Navigate to http://localhost:3001

To simply build and lint your code, run gulp build.

You can also push your code to GitHub Pages by running gulp deploy.

About

A Brick box element in which cards can be cycled independently of order with a variety of different transitions.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •