Accordion

@shopify/shop-minis-platform-sdk / components/Accordion/Accordion

AccordionProps

Properties

alwaysOpen?

optional alwaysOpen: boolean

By default, alwaysOpen is true meaning that when an item title is pressed it's body will open and stay open even when another item is pressed.

If false, when an item title is pressed, all other open bodies will be closed. This way, only one item will be open at a time.

Example

-- initial state --
Item 1: open
Item 2: closed
-- user presses Item 2 title --

-- alwaysOpen={true} new state (default) --
Item 1: open
Item 1: open

-- alwaysOpen={false} new state --
Item 1: closed
Item 1: open

items

items: AccordionItemData[]

An Accordion is made up of accordion items. Pass data like title and body through this prop.

Component

Example

 const items = [
   {
     title: "Item One",
     body: (
       <Text>I am body One</Text>
     )
   },
   {
     title: "Item Two",
     body: (
       <Text>I am body Two</Text>
     )
   },
 ]

 return (
   <Acordion items={items} />
 )

onItemTitlePress()?

optional onItemTitlePress: (index, title) => void

A callback to fire when an item is pressed. This can be helpful when tracking which items a user has pressed

Parameters

Parameter	Type
index	number
title	string

Returns

void

Component

Example

 const handleItemTitlePress = (index: number, title: string) =>
   console.log(`item ${title} at index ${index} clicked!`)

return (
 <Acordion {...} onItemTitlePress={handleItemTitlePress} />
)

---

Accordion()

Accordion(__namedParameters): Element

Parameters

Parameter	Type
__namedParameters	AccordionProps

Returns

Element