React
Is new design vision part implemented using new tokens?
Component checklist
Up to date
Resources
Example
import { ExpandableContent } from '@optimus-web/core';
import { getToken } from '@optimus-web/common';
return (
<ExpandableContent
expandedToggleText="Read Less"
collapsedToggleText="Read More"
hasPlaceholder={args.hasPlaceholder}
backgroundColor={getToken('backgroundStaticFlat')({ theme })}
lines={1}
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id molestie quam. In hac habitasse platea
dictumst. Curabitur ornare sem condimentum, auctor purus nec, congue magna. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Mauris rhoncus tristique lorem a sagittis. Ut ut est vitae nunc malesuada
laoreet. Duis aliquam, tellus id lobortis eleifend, erat dolor tempus lectus, a rhoncus urna odio non
tellus. Donec pharetra, purus sed facilisis fringilla, orci ante dignissim risus, ut lacinia quam turpis et
tellus. Mauris tincidunt velit vel ullamcorper malesuada. In rhoncus orci arcu, ut consectetur diam faucibus
ut.
</ExpandableContent>
)
API
|
Name |
Description |
Type |
Default |
|---|---|---|---|
|
backgroundColor? |
The background color of the component |
string |
|
|
children? |
The content to be rendered inside the component |
React.ReactNode |
|
|
collapsedToggleText?
|
The text to be displayed on the toggle button when the description is collapsed |
React.ReactNode |
|
|
expandedToggleText |
The text to be displayed on the toggle button when the description is expanded |
React.ReactNode |
|
|
hasPlaceholder? |
Indicates whether a placeholder should be displayed when the description is collapsed |
boolean |
|
|
lineHeight? |
The number to be rendered for each line height of the content |
number |
|
|
lines? |
The number of lines you want to show for the content when it’s collapsed |
number |
|