Fluent Commerce Logo
Docs
Sign In

Configurable Drawer Component

UI Component

Changed on:

18 Jan 2024

Overview

The Configurable Drawer is a Mystique content component that displays other components in the hidden by-default section. The drawer button click event expands this hidden section on the right-hand side of the screen.

The component allows you to redefine the context for its descendants.

Plugin NameCore

The standard library of mystique components. 

0000-00-00

v1.0.0

Initial changelog entry.

Alias

fc.drawer.button

Detailed technical description

Properties

Name

Type

Required

Default

Description

expandIcon

`Component or Component[]`

Yes


The components that will be rendered in the drawer.

expanded

`String`

Yes


The button label is intended to render. Templates are allowed here when data contains the data source with the info.

defaultExpanded

`String`

No


Text to be shown in the configurable drawer header.

disabled

`GraphQL String`

No

Page level query

Takes a GraphQL query to execute on the drawer open.

summary

`Object`

No


A list of entries that maps each GraphQL variable to its value.

Configuration example

1{ 
2  "component": "fc.list", 
3  "props": { 
4    "title": "i18n:fc.om.orders.detail.list.deliveryInfo.title", 
5    "dataSource": "orderById.fulfilmentChoices", 
6    "responsiveness": "card", 
7    "attributes": [ 
8      { 
9        "label": "i18n:fc.om.orders.detail.list.deliveryInfo.column.type.heading", 
10        "type": "component", 
11        "options": { 
12          "component": "fc.drawer.button", 
13          "props": { 
14            "label": "i18n:fc.om.orders.detail.list.deliveryInfo.column.type.heading", 
15            "title": "Custom Drawer", 
16            "query": "query ( $id: ID! $item_first: Int) { fulfilmentChoiceById(id: $id) }", 
17            "variables": { 
18              "id": "{{node.id}}", 
19              "item_first": 100 
20            }, 
21            "descendants": [] 
22          }
23        } 
24      } 
25    ]
26  } 
27}

Language: json

Version History

2023-07-31

v0.0.0

First release

Recommended Placement

None

Copyright © 2024 Fluent Retail Pty Ltd (trading as Fluent Commerce). All rights reserved. No materials on this docs.fluentcommerce.com site may be used in any way and/or for any purpose without prior written authorisation from Fluent Commerce. Current customers and partners shall use these materials strictly in accordance with the terms and conditions of their written agreements with Fluent Commerce or its affiliates.

Fluent Logo