Version 0.40.0

UI Organisms

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

<div class="sui-o-accordion">
    <div class="sui-o-accordion__item">
        <div class="sui-o-accordion__title">
            
              ...
            
        </div>
        <div class="sui-o-accordion__body">
            ...
        </div>
    </div>
    <div class="sui-o-accordion__item as--open">
        <div class="sui-o-accordion__title">
            
              ...
            
        </div>
        <div class="sui-o-accordion__body">
            ...
        </div>
    </div>
</div>

Accordion sizes

Accordion large

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Accordion large

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Accordion small

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Accordion small

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

<div class="sui-o-accordion">
    <div class="sui-o-accordion__item as--lg">
        <div class="sui-o-accordion__title">
            
              ...
            
        </div>
        <div class="sui-o-accordion__body">
            ...
        </div>
    </div>
    <div class="sui-o-accordion__item as--open as--lg">
        <div class="sui-o-accordion__title">
            
              ...
            
        </div>
        <div class="sui-o-accordion__body">
            ...
        </div>
    </div>
</div>


<div class="sui-o-accordion">
    <div class="sui-o-accordion__item as--sm">
        <div class="sui-o-accordion__title">
            
              ...
            
        </div>
        <div class="sui-o-accordion__body">
            ...
        </div>
    </div>
    <div class="sui-o-accordion__item as--open as--sm">
        <div class="sui-o-accordion__title">
            
              ...
            
        </div>
        <div class="sui-o-accordion__body">
            ...
        </div>
    </div>
</div>

React

Name: saagie-ui/organisms/Accordion

Dependencies

React PropTypes

Example

Code Example

import React from 'react';
import { Accordion, AccordionItem, AccordionTitle, AccordionBody } from 'saagie-ui/react';

class AccordionExample extends React.Component {
  render() {
    return (
      <Accordion>
        <AccordionItem>
          <AccordionTitle>
            Title
          </AccordionTitle>
          <AccordionBody>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?
            </p>
          </AccordionBody>
        </AccordionItem>
        <AccordionItem>
          <AccordionTitle>
            Title
          </AccordionTitle>
          <AccordionBody>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?
            </p>
          </AccordionBody>
        </AccordionItem>
        <AccordionItem isOpen>
          <AccordionTitle>
            Title
          </AccordionTitle>
          <AccordionBody>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?
            </p>
          </AccordionBody>
        </AccordionItem>
      </Accordion>
    );
  }
}

export default AccordionExample;

Arguments

Params Type Details
Accordion params
children node Children elements.
className (optional) string Custom CSS class names.
attributes (optional) object Extra HTML attributes like id, data-, aria- etc.
AccordionBody params
children node Children elements.
className (optional) string Custom CSS class names.
attributes (optional) object Extra HTML attributes like id, data-, aria- etc.
AccordionItem params
children node Children elements.
className (optional) string Custom CSS class names.
isOpen (optional) bool True for as--open behavior.
onToggle (optional) func Pass current item state.
attributes (optional) object Extra HTML attributes like id, data-, aria- etc.
AccordionTitle params
children node Children elements.
className (optional) string Custom CSS class names.
attributes (optional) object Extra HTML attributes like id, data-, aria- etc.