MazReadMore
MazReadMore is a standalone component to truncate long text with a "Read more" / "Read less" toggle functionality
Before use it, you should install the MazUi plugin in your project, follow instructions in Getting Started
TIP
This component can be translated globally using the MazUi plugin.
Basic usage
Use the text prop or the default slot to provide the content to truncate. By default, the component uses line-clamp with 4 lines.
With text prop
With default slot
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Truncation with max lines
Control the number of visible lines using the max-lines prop.
2 lines
6 lines
Truncation with max characters
Use the max-chars prop to truncate based on character count instead of lines.
50 characters
150 characters
Using slot for content
You can use the default slot to provide rich content instead of plain text.
Rich content example: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Colors
Customize the color of the toggle link using the color prop.
Custom toggle text
Customize the "Read more" and "Read less" text using the expand-text and collapse-text props.
Short content (no button)
When the content is shorter than the truncation limit, the toggle button is automatically hidden.
Props
| Name | Description | Type | Required | Default |
|---|---|---|---|---|
| text | The text to be truncated. | string | No | undefined |
| max-lines | The maximum number of lines to be displayed. | number | No | 4 |
| max-chars | The maximum number of characters to be displayed. | number | No | undefined |
| color | The color of the link (MazLink). | MazColor | No | primary |
| collapse-text | The text of the link when the content is collapsed. | string | No | readMore.collapse' (translations) |
| expand-text | The text of the link when the content is expanded. | string | No | readMore.expand' (translations) |
| id | Unique identifier for accessibility linking. | string | No | undefined |
| aria-label | Accessibility label for the content region. | string | No | readMore.ariaLabel' (translations) |
Slots
| Name | Description | Bindings |
|---|---|---|
| default |