import { ExpandableTextBlock } from '@uhg-abyss/mobile';<ExpandableTextBlock>Lorem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et. Penatibus et magnis dis parturient montes. Diam in arcu cursus euismod quis viverra nibh cras pulvinar. Lorem mollis aliquam ut porttitor. </ExpandableTextBlock>Props and Usage
Children are required to use ExpandableTextBlock.
The numberOfLines prop is used to control the number of lines shown while ExpandableTextBlock is closed. The default for numberOfLines is 2.
The showLess prop is used to give the consumer the ability to shrink the ExpandableTextBlock. The default for showLess is false.
The onLinkPress prop can be used when pressing the more/less link needs a callback function. This can take in expanded as an argument.
ExpandableTextBlock Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | string | - | The text to be displayed |
| color | string | - | Set the color of the text |
| fontFamily | string | - | Set the font family of text |
| fontWeight | string | - | Set the font weight of text |
| numberOfLines | number | - | The number of lines to be displayed while collapsed |
| onLinkPress | function | - | Callback fired when more/less button is pressed |
| showLess | boolean | - | Flag to enable show less button while expanded |
| size | number | string | - | Set the size of the text |
| textAlign | "left" | "center" | "right" | - | Specifies text alignment |
| transform | string | - | Reformat the text by changing whether letters are capitalized or not |
ExpandableTextBlock Classes
| Class Name | Description |
|---|---|
| abyss-expandable-text-block-link | Expandable text block link text |
| abyss-expandable-text-block-root | Expandable text block main text |
ExpandableTextBlock Translations
| Translation Key | Value |
|---|---|
| ExpandableTextBlock.more | more |
| ExpandableTextBlock.less | less |
Dynamic Type
Text scales according to Abyss standards. Note that the numberOfLines prop also scales according to the font scale.
Screen Reader Support
Accessibility focus may need to be reset to the start of the text paragraph after the "more" button is pressed. This can be done within your onLinkPress function.
ExpandableTextBlock Tokens
| Token Name | Value | |
|---|---|---|
| expandable-text-block.color.text.link | #196ECF | |
| expandable-text-block.color.text.paragraph | #4B4D4F |