Expandable text with show/hide functionnality



  • Hello.

    I would love to find a Quasar component which allows to:

    • truncate some content put into a container (div, p, span) if the size of the content goes over the container’s size or a predefined number of lines
    • display a button that shows the whole content (’show content’) or less (‘show less’)
    • define some sort of decreased opacity as soon as the reader gets closed to the truncated line

    If I am not mistaken, Collapsable allows to display either the full content or nothing.

    Of course, one might argue that it is easily doable through some JS and CSS tricks but I think it is a fairly common pattern used nowadays on websites and would deserve maybe a Quasar component.

    What do you think?



  • Well, I would love to see an organized page with many such lightweight quasar components. Similar to:

    https://bootsnipp.com/

    Bootsnipp had a tremendous impact on bootstrap popularity. I think almost everybody here has some interesting “components” or snippets of quasar code worth sharing.