Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(expandablesection): Added a demo to show how to use expandable section to create an expandable text component. #9887

Merged
merged 4 commits into from
Jan 4, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
id: Expandable section
section: components
---

## Demos

- The following demo shows how to use the ExpandableSection to create an expandable text component.
dlabaj marked this conversation as resolved.
Show resolved Hide resolved

### Expandable Text Component
tlabaj marked this conversation as resolved.
Show resolved Hide resolved

dlabaj marked this conversation as resolved.
Show resolved Hide resolved
```ts file='./examples/ExpandableTextDemo.tsx'

```
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from 'react';
import { ExpandableSection, ExpandableSectionVariant, Truncate } from '@patternfly/react-core';

export const ExpandableTextDemo: React.FunctionComponent = () => {
const [isExpanded, setIsExpanded] = React.useState(false);

const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
setIsExpanded(isExpanded);
};

const content = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec dignissim turpis, et tristique purus.
Phasellus efficitur ante quis dolor viverra imperdiet. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Pellentesque laoreet, sem ac elementum semper, lectus mauris vestibulum nulla,
eget volutpat massa neque vel turpis. Donec finibus enim eu leo accumsan consectetur. Praesent massa diam,
tincidunt eu dui ac, ullamcorper elementum est. Phasellus metus felis, venenatis vitae semper nec, porta a metus.
Vestibulum justo nisi, imperdiet id eleifend at, varius nec lorem. Fusce porttitor mollis nibh, ut elementum ante
commodo tincidunt. Integer tincidunt at ipsum non aliquet.`;

return (
<ExpandableSection
variant={ExpandableSectionVariant.truncate}
toggleText={isExpanded ? 'Show less' : 'Show more'}
onToggle={onToggle}
isExpanded={isExpanded}
truncateMaxLines={-1}
>
{isExpanded ? content : <Truncate content={content} style={{ maxWidth: '10ch' }} />}
</ExpandableSection>
);
};
Loading