@polarityio/pi-show-more
v1.1.3
Published
Content container that truncates to max lines with expand/collapse toggle
Readme
Polarity Integration Component Library
Show More Component
A content container that truncates to a maximum number of lines with a toggle button to expand and collapse.
Installation
npm install @polarityio/pi-show-morePeer Dependencies
- lit ^3.0.0
Usage
import '@polarityio/pi-show-more';<!-- Basic usage with default 3 lines -->
<pi-show-more>
<p>
This is a long block of text that will be truncated after three lines with a "Show more" button to expand the full
content.
</p>
</pi-show-more>
<!-- Custom max lines and labels -->
<pi-show-more max-lines="5" show-more-label="Read more" show-less-label="Read less">
<div>Long content here...</div>
</pi-show-more>API Reference
Properties
| Property | Type | Default | Description |
| --------------- | --------- | ------------- | ---------------------------------------------- |
| maxLines | number | 3 | Maximum number of visible lines when collapsed |
| expanded | boolean | false | Whether the content is currently expanded |
| showMoreLabel | string | 'Show more' | Label for the expand button |
| showLessLabel | string | 'Show less' | Label for the collapse button |
Events
| Event Name | Detail | Description |
| --------------------- | ----------------------- | ------------------------------------------------------------------------------------------- |
| pi-show-more-toggle | { expanded: boolean } | Fired when the expand/collapse button is toggled. detail.expanded reflects the new state. |
Slots
| Slot Name | Description | | --------- | -------------------------------------- | | Default | Content to be truncated and expandable |
Theming
Customize the appearance using CSS custom properties. This component uses design tokens from @polarityio/pi-shared for consistent theming across the component library.
License
MIT