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
- Angular
- Vue.js
// 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"
If the DUIL has been installed, you can use the web component directly:
<dhl-read-more></dhl-read-more>
// 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
- Angular
- Vue.js
<DhlReadMore>Some long text be here.</DhlReadMore>
<dhl-read-more>Some long text be here.</dhl-read-more>
<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
Graph
Built by DHL User Interface Library Team!