“Collapsible Overflow Text” Component

Collapsible overflow text component is used for displaying text based data that can span many lines and as a result take a lot of space in pages. But this component can force a limit to number of lines the to display in its initial collapsed state.

The usefulness of this component lies in the fact that if we set a limit of 3 lines and the actual text only spans 2 lines then expandable features are disabled and we just see a simple text paragraph.

Plain Text Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dignissimos error, excepturi expedita non quis repellat. Aut beatae dolor ipsam modi quaerat quisquam reiciendis reprehenderit rerum! Earum officiis quos voluptatum! Adipisci aliquam atque blanditiis consequatur cupiditate dolore dolorem, doloribus, ea iste laboriosam nisi possimus quae quidem ratione tempora. Consequatur explicabo facere facilis minima porro quos repudiandae sequi tempore, vel velit?

Plain Text with Less Text

HTML Text Example

Adipisci aliquam atque blanditiis consequatur cupiditate dolore dolorem, doloribus, ea iste laboriosam nisi possimus quae quidem ratione tempora. Consequatur explicabo facere facilis minima porro quos repudiandae sequi tempore, vel velit?

A accusamus asperiores corporis cupiditate esse facilis modi natus, pariatur totam voluptatibus? Expedita, libero, perferendis. Doloribus eos esse hic, ipsum, laboriosam magnam nesciunt, numquam odit praesentium sapiente veniam veritatis voluptate?

At blanditiis consequatur perferendis! Ad animi ea eius eum illum in molestias quam quod quos ullam! Amet aut deleniti doloribus excepturi hic in, labore, minima neque odio, quibusdam vero voluptatum!

HTML text with image

The component is not built for things other than text but this shows that it can handle simple cases:

Our clients: IBM, HP, Adobe, GE, Accenture, Allianz, Phillips, Deezer, Capgemin, Mcafee, SAP, Telenor, Cigna, British Parliament, State of New York

Usage

// minimal usage
@component('components.collapsibleOverflowText')
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dignissimos error, excepturi
    expedita non quis repellat. Aut beatae dolor ipsam modi quaerat quisquam reiciendis reprehenderit
    rerum! Earum officiis quos voluptatum!
@endcomponent

// full customization
@component('components.collapsibleOverflowText', [
    'expandButtonText' => 'Read full description',
    'collapseButtonText' => 'Hide full description',
    'approxLineHeight' => 27,
    'tag' => 'p',
    'maxVisibleLines' => 2,
])
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dignissimos error, excepturi
    expedita non quis repellat. Aut beatae dolor ipsam modi quaerat quisquam reiciendis reprehenderit
    rerum! Earum officiis quos voluptatum!
@endcomponent

Props

tag

string

The enclosing tag to wrap the content passed by slot.

Default Value: div
maxVisibleLines

int

The max number of lines show in collapsed state.

Default Value: 4
approxLineHeight

int|float

Approx line height is passed so that we can set initial max-height for content.

Default Value: 30.6
expandButtonText

string

The expand button text.
collapseButtonText

string

The collapse button text.
darkBackground

bool

Set to true if the background is dark so that overlay can be of right color.