Fluent Commerce Logo
Docs
Sign In

Collapsible Text Component

UI Component

Changed on:

25 Oct 2023

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

Name

Type

Required

Default

Description

`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}

Language: json

Version History

2023-08-01

v23.8.1

n/a

Recommended Placement

n/a

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.

Fluent Logo