Skip to content

Latest commit

 

History

History

accordions

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
demo
demo
 
 
src
src
 
 
README.md
README.md
 
 
package.json
package.json
 
 
tsconfig.build.json
tsconfig.build.json
 
 

README.md

@zendeskgarden/react-accordions npm version

This package includes components related to accordions in the Garden Design System.

Installation

npm install @zendeskgarden/react-accordions

# Peer Dependencies - Also Required
npm install react react-dom styled-components @zendeskgarden/react-theming

Usage

Accordion

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Accordion } from '@zendeskgarden/react-accordions';

/**
 * Place a `ThemeProvider` at the root of your React application
 */
<ThemeProvider>
  <Accordion level={3}>
    <Accordion.Section>
      <Accordion.Header>
        <Accordion.Label>Turnip greens yarrow</Accordion.Label>
      </Accordion.Header>
      <Accordion.Panel>
        Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth
        water spinach avocado daikon napa cabbage asparagus winter purslane kale.
      </Accordion.Panel>
    </Accordion.Section>
    <Accordion.Section>
      <Accordion.Header>
        <Accordion.Label>Corn amaranth salsify</Accordion.Label>
      </Accordion.Header>
      <Accordion.Panel>
        Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.
        Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery.
      </Accordion.Panel>
    </Accordion.Section>
    <Accordion.Section>
      <Accordion.Header>
        <Accordion.Label>Celery quandong swiss</Accordion.Label>
      </Accordion.Header>
      <Accordion.Panel>
        Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram
        celery bitterleaf wattle seed collard greens nori.
      </Accordion.Panel>
    </Accordion.Section>
  </Accordion>
</ThemeProvider>;

Stepper

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Stepper } from '@zendeskgarden/react-accordions';

/**
 * Place a `ThemeProvider` at the root of your React application
 */
<ThemeProvider>
  <Stepper>
    <Stepper.Step>
      <Stepper.Label>Brussels</Stepper.Label>
      <Stepper.Content>
        Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi radish artichoke.
      </Stepper.Content>
    </Stepper.Step>
    <Stepper.Step>
      <Stepper.Label>Beetroot</Stepper.Label>
      <Stepper.Content>
        Beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean turnip greens.
      </Stepper.Content>
    </Stepper.Step>
    <Stepper.Step>
      <Stepper.Label>Turnip</Stepper.Label>
      <Stepper.Content>
        Turnip chicory salsify pea sprouts fava bean. Dandelion zucchini burdock yarrow chickpea.
      </Stepper.Content>
    </Stepper.Step>
  </Stepper>
</ThemeProvider>;