| 1 |
efrain |
1 |
---
|
|
|
2 |
layout: docs
|
|
|
3 |
title: "Show more"
|
|
|
4 |
date: 2023-06-12T00:00:00+01:00
|
|
|
5 |
draft: false
|
|
|
6 |
weight: 70
|
|
|
7 |
tags:
|
|
|
8 |
- MDL-78204
|
|
|
9 |
- 4.3
|
|
|
10 |
---
|
|
|
11 |
|
|
|
12 |
## How to use
|
|
|
13 |
|
|
|
14 |
The show more component is used to show and hide content. It is useful for showing a preview of content and then allowing the user to expand it to see more.
|
|
|
15 |
|
|
|
16 |
The parameters for the template context are:
|
|
|
17 |
* collapsedcontent: The content to show when collapsed.
|
|
|
18 |
* expandedcontent: The content to show when expanded.
|
|
|
19 |
* extraclasses: Any extra classes added to the showmore outer container.
|
|
|
20 |
* buttonextraclasses: Any extra classes added to the button.
|
|
|
21 |
* collapsedextraclasses: Any extra classes added to the collapsed content container.
|
|
|
22 |
* expandedextraclasses: Any extra classes added to the expanded content container.
|
|
|
23 |
|
|
|
24 |
## Example
|
|
|
25 |
|
|
|
26 |
{{< mustache template="core/showmore" >}}
|
|
|
27 |
{
|
|
|
28 |
"collapsedcontent": "Hello...",
|
|
|
29 |
"expandedcontent": "Hello<br>Is it me you're looking for? I can see it in your eyes",
|
|
|
30 |
"extraclasses": "rounded p-2 border",
|
|
|
31 |
"buttonextraclasses": "font-weight-bold"
|
|
|
32 |
}
|
|
|
33 |
{{< /mustache >}}
|
|
|
34 |
|
|
|
35 |
## Example used as a template block
|
|
|
36 |
|
|
|
37 |
{{< mustache template="tool_componentlibrary/examples/showmore/example" >}}
|
|
|
38 |
{
|
|
|
39 |
}
|
|
|
40 |
{{< /mustache >}}
|