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

Published On June 6, 2020 6:13 PM

Last Updated October 9, 2020 6:57 AM