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