ReadMore

The DhlReadMore component is used on a page to make a long text expand and collapsable based on number of lines to be visible by default.

Import

React

// with @dhl-official/react-library:
import { DhlReadMore } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlReadMore } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-read-more></dhl-read-more>

Vue.js

// with @dhl-official/vue-library:
import { DhlReadMore } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlReadMore } from "@dhl-official/ui-libraries/vue-library"

Code

React

<DhlReadMore>Some long text be here.</DhlReadMore>

Angular

<dhl-read-more>Some long text be here.</dhl-read-more>

Vue.js

<dhl-read-more>Some long text be here.</dhl-read-more>

Interactive Demo

Readme

Properties

Property	Attribute	Description	Type	Default
dataAriaControls	data-aria-controls	An optional ariaControls prop that is used as a 'relationship attribute' which denotes which elements in a page an interactive element or set of elements has control over and affects. It's commonly used to describe a relationship between a button and the expandable region revealed by that button.	string	undefined
dataClassName	data-class-name	An optional class name prop for the component.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	dhl-read-more-${getRandomString()}
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
dataTitle	data-title	An optional prop used to set the title for the text component.	string	undefined
dataTracking	data-tracking	An optional data tracking prop for the component.	string	undefined
fontStyle	font-style	An optional prop used to set the font-style property of the text component.	"italic" \| "normal"	undefined
isExpanded	is-expanded	An optional prop used to set if the text be expanded or collapsed	boolean	false
isParagraph	is-paragraph	An optional prop used to set if ReadMore should use a <p> instead of a <span> tag.	boolean	undefined
less	less	An optional prop used to set the text to display on the show less button.	string	"Read Less"
lines	lines	An optional prop used to set the amount of lines of text that should be preserved until truncating. Any integer < 1 will not clip at all	number	3
more	more	An optional prop used to set the text to display on the show more button.	string	"Read More"
size	size	An optional size prop for the component.	"10xl" \| "11xl" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl" \| "8xl" \| "9xl" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"	undefined
stretch	stretch	An optional prop used to set the font-stretch property of the component.	"condensed" \| "normal"	undefined
weight	weight	An optional prop used to set the font-weight property of the text component.	200 \| 400 \| 700 \| 800	undefined

Slots

Slot	Description
"unnamed"	unnamed children slot for ReadMore text

Dependencies

Depends on

• dhl-text
• dhl-button

Graph

---

Built by DHL User Interface Library Team!