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

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.

vue

<script lang="ts" setup>
import MazReadMore from 'maz-ui/components/MazReadMore'

const longText = `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.`
</script>

<template>
  <MazReadMore :text="longText" />
</template>

With default slot

vue

<script lang="ts" setup>
import MazReadMore from 'maz-ui/components/MazReadMore'
</script>

<template>
  <MazReadMore>
    <p>
      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.
    </p>
  </MazReadMore>
</template>

Truncation with max lines

Control the number of visible lines using the max-lines prop.

2 lines

6 lines

vue

<script lang="ts" setup>
import MazReadMore from 'maz-ui/components/MazReadMore'

const longText = `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.
Duis aute irure dolor in reprehenderit in voluptate velit esse.
Excepteur sint occaecat cupidatat non proident, sunt in culpa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`
</script>

<template>
  <MazReadMore :text="longText" :max-lines="2" />
  <MazReadMore :text="longText" :max-lines="6" />
</template>

Truncation with max characters

Use the max-chars prop to truncate based on character count instead of lines.

50 characters

Lorem ipsum dolor sit amet, consectetur adipiscing...

150 characters

vue

<script lang="ts" setup>
import MazReadMore from 'maz-ui/components/MazReadMore'

const longText = `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.`
</script>

<template>
  <MazReadMore :text="longText" :max-chars="50" />
  <MazReadMore :max-chars="150">
    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.
  </MazReadMore>
</template>

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.

vue

<script lang="ts" setup>
import MazReadMore from 'maz-ui/components/MazReadMore'
</script>

<template>
  <MazReadMore :max-lines="2">
    <p>
      <strong>Rich content example:</strong> Lorem ipsum dolor sit amet,
      <em>consectetur adipiscing elit</em>. 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.
    </p>
  </MazReadMore>
</template>

Colors

Customize the color of the toggle link using the color prop.

vue

<script lang="ts" setup>
import MazReadMore from 'maz-ui/components/MazReadMore'

const longText = `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.`
</script>

<template>
  <MazReadMore :text="longText" color="primary" :max-lines="2" />
  <MazReadMore :text="longText" color="secondary" :max-lines="2" />
  <MazReadMore :text="longText" color="info" :max-lines="2" />
  <MazReadMore :text="longText" color="success" :max-lines="2" />
  <MazReadMore :text="longText" color="warning" :max-lines="2" />
  <MazReadMore :text="longText" color="destructive" :max-lines="2" />
</template>

Custom toggle text

Customize the "Read more" and "Read less" text using the expand-text and collapse-text props.

vue

<script lang="ts" setup>
import MazReadMore from 'maz-ui/components/MazReadMore'

const longText = `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.`
</script>

<template>
  <MazReadMore
    :text="longText"
    :max-lines="2"
    expand-text="Show more"
    collapse-text="Show less"
  />
</template>

Short content (no button)

When the content is shorter than the truncation limit, the toggle button is automatically hidden.

This is a short text that doesn't need truncation.

vue

<script lang="ts" setup>
import MazReadMore from 'maz-ui/components/MazReadMore'
</script>

<template>
  <MazReadMore text="This is a short text that doesn't need truncation." :max-lines="4" />
</template>

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

MazReadMore ​

Basic usage ​

With text prop ​

With default slot ​

Truncation with max lines ​

Truncation with max characters ​

Using slot for content ​

Colors ​

Custom toggle text ​

Short content (no button) ​

Props ​

Slots ​