Page Section Component

UI Component

Changed on:

19 Oct 2023

Overview

The page section is a simple component that renders all children. It is primarily used for grouping multiple components together for index-based components like the tab card.

There are no properties on the page section, but standard configuration options like descendants and datasource work as usual.

Plugin Name	Core

The standard library of mystique components.

0000-00-00

v1.0.0

Initial changelog entry.

Alias

fc.page.section

Detailed technical description

Page Section Header Component

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).

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 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.