Skip to content

Latest commit

 

History

History
399 lines (262 loc) · 9.68 KB

accordion.md

File metadata and controls

399 lines (262 loc) · 9.68 KB
Raw

Accordion

Source

Accordions are collapsible sections that are toggled by interacting with a permanently visible header.

Usage

You should have the chayns-components package installed. If that is not the case already, run

yarn add chayns-components

or

npm i chayns-components

After the chayns-components package is installed, you can import the component and use it with React:

import React from 'react'
import { Accordion } from 'chayns-components';

// ...

<Accordion {...} />

Props

The Accordion-component takes the following props:

Name Type Default Required
head ReactNode | { open: ReactNode, close: ReactNode } ✓
headMultiline boolean false
headClassNames string | Array<string> | object
headCustomAttributes object
children ReactNode ✓
right ReactNode | { open: ReactNode, close: ReactNode }
renderClosed boolean false
isWrapped boolean false
dataGroup string
className string ''
id string
style { [key: string]: string | number }
styleBody { [key: string]: string | number }
onOpen function
onClose function
defaultOpened boolean
reference function
autogrow boolean true
open boolean
icon object | string | ReactNode 'ts-angle-right'
noRotate boolean false
fixed boolean false
noIcon boolean false
onSearch function
onSearchEnter function
searchPlaceholder string ''
searchValue string
removeContentClosed boolean false
onClick function
disabled boolean false
controlled boolean false

head

head: ReactNode | { open: ReactNode, close: ReactNode };

The component that should be displayed in the accordion head when it is closed. Can be a string, React node or object like this: { open: OpenComponent, close: CloseComponent }. If an object is provided, the components will be swapped based on the opening state.

headMultiline

headMultiline?: boolean

Allows text to wrap inside of the head.

headClassNames

headClassNames?: string | Array<string> | object

Additional classnames to be applied to the head. Can be specified as a string, string[] or {[key: string]: boolean}, which will be passed to the classnames function.

headCustomAttributes

headCustomAttributes?: object

Custom HTML attributes that will be added to the <div> that contains the head component.

children

children: ReactNode;

The content the Accordion reveals when it is open. To get proper spacing inside of the Accordion body, supply a <div> with the classname accordion__content applied to it.

right

right?: ReactNode | { open: ReactNode, close: ReactNode }

Component that will be shown on the right side of the component. Typically a badge. If you want different components for the open and closed state, supply an object: { open: ..., closed: ... }.

renderClosed

renderClosed?: boolean

Render the Accordion content, even if it is closed.

isWrapped

isWrapped?: boolean

Enables the wrapped Accordion style. Use this if the Accordion is nested inside of another Accordion.

dataGroup

dataGroup?: string

A string identifier for a group of Accordions. Only one Accordion of a group that have the same dataGroup-prop can be open.

className

className?: string

A classname that will be applied to the outer most <div>-wrapper of the Accordion.

id

id?: string

An HTML id that will be applied to the outer most <div>-wrapper.

style

style?: { [key: string]: string | number }

A React style object that will be applied to the outer most <div>-wrapper of the Accordion.

styleBody

styleBody?: { [key: string]: string | number }

A React style object that will be applied to the body of the Accordion.

onOpen

onOpen?: function

A callback that is called when the Accordion gets opened.

onClose

onClose?: function

A callback that is called when the Accordion gets closed.

defaultOpened

defaultOpened?: boolean

Wether the Accordion should be opened by default (when it first gets rendered).

reference

reference?: function

A function that receives the ref of the outer most <div>-element of the Accordion.

autogrow

autogrow?: boolean

Wether the Accordion should adjust its height in the opened state.

open

open?: boolean

Control the open state.

icon

icon?: object | string | ReactNode

The icon that is displayed to the left of the Accordion head. Supply a FontAwesome string like "fa fa-plane" or a React component.

noRotate

noRotate?: boolean

Disable the icon rotation.

fixed

fixed?: boolean

Disable the opening and closing logic. The Accordion will be stuck in one state.

noIcon

noIcon?: boolean

Remove the Accordion to the left of the head.

onSearch

onSearch?: function

A callback that will be called when the text in the search field on the right changes. This will also enable the search field.

onSearchEnter

onSearchEnter?: function

A callback that will be called when the enter-key is pressed in the search field.

searchPlaceholder

searchPlaceholder?: string

The placeholder for the search field.

searchValue

searchValue?: string

The value for the search field (for making a controlled input).

removeContentClosed

removeContentClosed?: boolean

Remove content from the Accordion body when it is closing.

onClick

onClick?: function

Add a click listener for the Accordion head.

disabled

disabled?: boolean

Disables the Accordion, which changes the style and removes any interactions.

controlled

controlled?: boolean

When set, the open-prop updates and onChange does not update the internal state.