Ellipsis
javascript
import { XerEllipsis } from "@xerius/codey-components";Showcases
Default
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| contentClass | String | false | The CSS class(es) of the content | |
| dataAutomationId | String | ellipsis | false | Sets the data automation id for the alert component. |
Multi Line Ellipsis
javascript
import { XerMultiLineEllipsis } from "@xerius/codey-components";Showcases
Default
With Multiple Lines
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| lines | Number | 2 | false | The number of lines to show before ellipsis |
| currentLanguageCode | String | nl-be | true | The current language code used to display the toggle text |
| contentClass | String | false | The CSS class(es) of the content | |
| dataAutomationId | String | multi-line-ellipsis | false | Sets the data automation id for the alert component. |
Accessibility
As the ellipsis component does not hide the excual text from the DOM screen readers will always read the full text. This als means that the show more button does not need any aria attributes as the screen reader will read the full text.
More info about this topic can be found here.