torontomulibrary/rula-expandable-card

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

<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	{}