Appearance
Ellipsis
Ellipsis
ts
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 ellipsis component. |
Slots
| Name | Purpose |
|---|---|
| default | The content that may be truncated with ellipsis |
Multi Line Ellipsis
ts
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 multi-line ellipsis component. |
Slots
| Name | Purpose |
|---|---|
| default | The content that may be truncated with ellipsis |
Accessibility
As the ellipsis component does not hide the actual 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.