Accordion

Accordions are useful when you want to arrange your content by menus and only want to show one type of content at a time.

Usage

Below are few examples of the usage of this component. For full working demos, Please refer under js/core/components/accordian/demo

Simple Accordion

import {Accordion} from 'arivaa-basic';
const data = [
    {
        title: "Sample Title 1",
        content: "Sample Description 1",
    },
    {
        title: "Sample Title 2",
        content: "Sample Description 2",
    }
];
<Accordion data={data}/>

 

Accordion with Callbacks

import {Accordion} from 'arivaa-basic';
const data = [
    {
        title: "Sample Title 1",
        content: "Sample Description 1",
    },
    {
        title: "Sample Title 2",
        content: "Sample Description 2",
    }
];
<Accordion
    data={data}
    onShow={(key, obj) => {
        Toast.info(obj.title + " was shown")
    }}
    onHide={(key, obj) => {
        Toast.info(obj.title + " was hidden")
    }}
 />

 

Accordion with Custom Styles

import { Colors } from 'arivaa-basic/styles';
import {Accordion} from 'arivaa-basic';
const data = [
    {
        title: "Sample Title 1",
        content: "Sample Description 1",
    },
    {
        title: "Sample Title 2",
        content: "Sample Description 2",
    }
];
const styles = [
  customTitle: {
        color: Colors.primaryColor,
        fontSize: 14
  },
  customContent: {
        color: Colors.brandGrey,
        lineHeight: 24,
        backgroundColor: '#f7f7f7',
        padding: 10
  }
];
<Accordion
    data={data}
    styles = {{
       headerText : styles.customTitle,
       contentText : styles.customContent
    }}
/>

 

Supported properties

Properties	Description	Type	Default
data	data to be shown in accordion	Array	[]
onShow	Callback When a accordion panel is shown. Key and AccordionItem of the panel being shown are passed as arguments.	function(key,accordionItem)	-
onHide	Callback When a accordion panel is hidden.Key and AccordianItem of the panel being shown are passed as arguments.	function(key,accordionItem)	-
activeKey	currently active Panel key	string | number	Null
defaultActiveKey	Active key the first time Accordion is rendered	string | number	Null
onChange	called when collapse Panel is changed	( key: string ) : void	-
style	Style of container for Accordion	React Native View Styles	Null
styles	For detailed customization of component's internal styles.	Object( DetailedStyles ) (Refer the format below)	Null

AccordionItem Object Format

Property Name	Description	Type	Required	Default
key	Key uniquely describing the Accordion tab	String	No	Index of the item in array
title	Title of the Accordion tab	String	No	Empty
content	Content of the tab	String	No	Empty

Note : Content should be a string. If you try to pass any other React Element, it will throw an error

DetailedStyles Format

Property Name	Description	Type	Required	Default
accordionTitle	Style Title	React Native Text Styles	No	Null
accordionContent	Title of the Accordion tab	React Native Text Styles	No	Null

Detailed styles reference - node_modules/antd-mobile-rn/lib/accordion/style/index.native.d.ts