Classes added to the button wrapped by the "read more" hylo-button component.
Aria-label added to the "read more" button.
The amount of words the "read more" marker is set after.
The amount of words the "read more" marker is set after in lg view. Overwrites the "count" property.
The amount of lines after the "read more" button is placed in lg view. Overwrites any "count" or "countP" marker set and the "countLines" property.
The amount of paragraphs the "read more" marker is set after in lg view. Overwrites the "countP" property.
The amount of lines after the "read more" button is placed. Overwrites any "count" or "countP" marker set.
The amount of words the "read more" marker is set after in md view. Overwrites the "count" property.
The amount of lines after the "read more" button is placed in md view. Overwrites any "count" or "countP" marker set and the "countLines" property.
The amount of paragraphs the "read more" marker is set after in md view. Overwrites the "countP" property.
The amount of paragraphs the "read more" marker is set after.
The amount of words the "read more" marker is set after in sm view. Overwrites the "count" property.
The amount of lines after the "read more" button is placed in sm view. Overwrites any "count" or "countP" marker set and the "countLines" property.
The amount of paragraphs the "read more" marker is set after in sm view. Overwrites the "countP" property.
The amount of words the "read more" marker is set after in xl view. Overwrites the "count" property.
The amount of lines after the "read more" button is placed in xl view. Overwrites any "count" or "countP" marker set and the "countLines" property.
The amount of paragraphs the "read more" marker is set after in xl view. Overwrites the "countP" property.
The amount of words the "read more" marker is set after in xs view. Overwrites the "count" property.
The amount of lines after the "read more" button is placed in xs view. Overwrites any "count" or "countP" marker set and the "countLines" property.
The amount of paragraphs the "read more" marker is set after in xs view. Overwrites the "countP" property.
Classes added to the three dots section.
Has no influence when using "countLines".
Classes added to the "read more" hylo-button component.
Emitted when the toggle button is clicked. Contains the new state.
If set, three dots are shown at the bottom right of the clipped area. The value is set as background color for the three dots.
Has no influence when using "countLines". With "countLines" the dots are always shown.
You can define your own "read more" marker as alternative to the "count" and "countP" properties. Can be set as css query or HTMLElement.
If set, the "read more" button functions as a toggle button. By default the button disappears after click.
Generated using TypeDoc
Adds "read more" functionality to the wrapped content.
You can set the "read more" threshold by amount of words, paragraphs or lines. "words" and "paragraphs" count what ever fits first. If using "words" or "paragraphs", an invisible "read more" marker will be placed inside the content to indicate where the content should be toggled.
"lines" works on its own and overwrites "words" and "paragraphs". To get animation and dynamic showing of the button depending whether it is already showing everything or not, you have to set content for the slot "lines". That content has to be an exact copy of the "default" content.
The component does not update itself when you change its content. If you change the component's text, use the universal "key" attribute to trigger a reinitialization by giving the key attribute a new value.
Adds the classes "hylo-text-more-visible" and "hylo-open" when the full content is visible.
Needs a hylo-breakpoint-listener to work with the breakpoint specific properties.
Used slots: