Configurable Drawer 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 Name | Core |
|---|
The standard library of mystique components.
v1.0.0
Initial changelog entry.
Alias
fc.drawer.button
Detailed technical description
Properties
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. |
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
v0.0.0
First release
Recommended Placement
None
