Skip to content

A component based on a MD Card. Can be 'expanded' on user interaction.

License

Notifications You must be signed in to change notification settings

torontomulibrary/rula-expandable-card

Repository files navigation

Build status Published on webcomponents.org

<rula-expandable-card>

rula-expandable-card is an elements combining aspects of Material Design Cards and Dialogs. It displays static content in similar fashion to a Card, and when clicked by the user it expands to fill the screen like a modal dialog while showing additional content.

Example

<rula-expandable-card>
  <div main-content>
    <h2>Here's a question</h2>
    <span>How much wood can a woodchuck chuck if a woodchuck chould chuck wood?</span>
  </div>
  <div extra-content>
    A woodchuck would chuck as much wood as a woodchuck could chuck if a woodchuck could chuck wood!
  </div>
</rula-expandable-card>

Structure

A rula-expandable-card has three main parts:

<div id="scrim"></div>
<div id="body"></div>
<div id="modal">
  <slot></slot>
</div>
  • scrim is used to hide the rest of the page when the card is open.
  • body displays everything in [main-content] and is what the user sees when the card is closed.
  • modal displays everything in both [main-content] and [extra-content] and is what the user sees when the card is open.

Install

bower install --save rula-expandable-card

Styling

The following custom properties and mxing are available for styling:

Custom propery Description Default
--rula-expandable-card-scrim Mixin applied to the background when the card is open {}
--rula-expandable-card-body Mixin applied to the body of the card when closed {}
--rula-expandable-card-modal Mixin applied to the modal container when open {}
--rula-expandable-card Mixin applied to the element {}

About

A component based on a MD Card. Can be 'expanded' on user interaction.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages