@astrouxds/rux-accordion

Astro Web Component for accordions

Stats

StarsIssuesVersionUpdatedCreatedSize
@astrouxds/rux-accordion
4.0.44 months ago3 years agoMinified + gzip package size for @astrouxds/rux-accordion in KB

Readme

Accordion

An Accordion is a device which presents a hierarchical set of items in which only a single branch of that hierarchy may be exposed at one time. Accordions are not commonly used for direct action or data manipulation. Use Accordions for navigation within a master-detail navigational pattern. Consider Trees for more complex navigation.

Guidelines

Web Components Usage

1. Installation

Install the Astro UXDS Accordion package via Command Line (Preferred Method)

npm i --save @astrouxds/rux-accordion

You may use Yarn, NPM, or your Node package manager of choice. The --save flag adds this component as a dependency in your package.json file.

Alternatively, download the Astro UXDS Component Library source to your project.

Via CLI:

git clone https://github.com/RocketCommunicationsInc/astro-components.git

Or, download the Astro UXDS Components as a .zip

2. Import the Astro Accordion Web Component

This example assumes you're using the NPM package in node_modules. Otherwise, import the component using the path to the Astro Components directory in your project.

import { RuxAccordion } from "@astrouxds/rux-accordion/rux-accordion.js";

3. Render the Astro Accordion Web Component

Render any HTML or string within the named slots. The Boolean open attribute of the Astro UXDS Accordion custom element expands that accordion on load or mount:

<rux-accordion open>
  <span slot="label">Accordion title</span>
  <span slot="content">Accordion content</span>
</rux-accordion>
<rux-accordion>
  <span slot="label">
    Another accordion title, with <b>HTML</b>
  </span>
  <span slot="content">
    <div>Accordion <b>HTML</b> here</div>
  </span>
</rux-accordion>

Properties

Property Type Default Required Description
open Boolean false No When set to true, opens this accordion item on mount or update. By default, all accordions are closed. Multiple accordions can be open at the same time.

Basic HTML Usage

1. Include the Astro UXDS CSS file

Latest release is available in the static css directory.

<link rel="stylesheet" href="/your-project/path/astro.css" />

2. Markup the component using HTML and the Astro CSS classes

Astro CSS classes follow the BEM-style naming convention.

The Boolean open attribute of the<details> HTML element sets an accordion's open state, as defined by default browser behavior for the HTML Details/Summary pattern.

 <div class="rux-accordion">
  <details class="rux-accordion__item" open>
    <summary class="rux-accordion__label">
      Accordion title
    </summary>
    <div class="rux-accordion__content">
      Accordion content
    </div>
  </details>
</div>

Attributes

Attribute Type Default Required Description
open Boolean false No While this attribute is present on the component, this accordion is open. By default, all accordions are closed. Multiple accordions can be open at the same time.

For more information about AstroUXDS usage outside of a Web Component environment, please see Astro UXDS Stylesheets

Revision History

4.0
  • Introduced new Details/Summary pattern and flattened usage to support a simple parent/child relationship. Recursive child accordions not supported at this time, but may come in a future update.
  • Replaced Polymer 3 implementation with LitElement for improved speed and interoperability with JS Frameworks as well as simpler template declaration now available in vanilla JavaScript.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.