Page Section Header Component

UI Component

Changed on:

4 July 2024

Overview

This component allows rendering a title on top of the page (fc.page) component. In addition, this component can take "descendants" and render them on the right side of the component, this is useful for action buttons.

The three common use cases for the Section Header component are:

render a title on top of the page.
render an icon + title on top of the page.
render an icon + title on the top left of the page, and some other component/s on the top right of the page (passed as descendants, generally a print button).

Plugin Name	Core

The standard library of mystique components.

0000-00-00

v1.0.0

Initial changelog entry.

Alias

fc.page.section.header

Detailed technical description

N/A

Properties

*Name*	*Type*	*Required*	*Default*	*Description*
icon	string	no		The icon to display before this heading. See Icons for details.
title	string	yes		The title that is intended to render. Templets are allowed here when data contains the data source with the info.
descendants	component or component[]		no	The components that will be rendered in the top right corner.

Configuration example

1{
2   "component":"fc.page.section.header",
3   "props":{
4      "icon":"shopping_basket",
5      "title":"Pick - Wave: {{id}}",
6      "data":"waveById"
7   },
8   "descendants":[
9      {
10         "component":"fc.button.print.download",
11         "props":{
12            "label":"i18n:fc.sf.ui.waves.detail.action.pickList.download.label",
13            "href":"/api/v4.1/wave/{{id}}/pickingList",
14            "filename":"pick_list.pdf"
15         }
16      }
17   ]
18}

Language: json

Version History

2023-08-01

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.