Fluent Commerce Logo
Docs

Collapsible Text Component

UI Component

Changed on:

4 July 2024

Overview

The Collapsible Text component takes a string and a maximum number of characters into its props. When the string exceeds the maximum number of characters the text is cut off. Then `More` hyperlink is displayed to allow the user to expand the label to its full length, exposing the remaining text.
No alt text provided
Plugin NameCore
The standard library of mystique components. 
0000-00-00

v1.0.0

Initial changelog entry.

Alias

fc.mystique.collapsible.text

Detailed technical description

None

Properties

NameTypeRequiredDefaultDescription
`text``string`Yes
The text to display
`charCutoff``number`Yes
The number of characters to display before cutting off the rest of the string.

Configuration example

1{
2    "label": "",
3    "type": "component",
4    "options": {
5        "component": "fc.mystique.collapsible.text",
6        "props": {
7            "text": "{{node.product.name}} - {{node.ref}}",
8            "charCutoff": 10
9        }
10    }
11}

Version History

2023-08-01

v23.8.1

n/a

Recommended Placement

n/a