Docs
Changed on:
18 Jan 2024
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 Name | Core |
|---|
The standard library of mystique components.
Initial changelog entry.
fc.drawer.button
Name | Type | Required | Default | Description |
expandIcon | | Yes | The components that will be rendered in the drawer. | |
expanded | | Yes | The button label is intended to render. Templates are allowed here when data contains the data source with the info. | |
defaultExpanded | | No | Text to be shown in the configurable drawer header. | |
disabled | | No | Page level query | Takes a GraphQL query to execute on the drawer open. |
summary | | No | A list of entries that maps each GraphQL variable to its value. |
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
First release
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.
