search

skeletonlabs / skeleton

A complete design system and component solution, built on Tailwind.
https://skeleton.dev
MIT License
4.9k stars 307 forks source link

Content truncation with "show more" expander button #2496

Open robrogan opened 7 months ago

robrogan commented 7 months ago

Describe the feature in detail (code, mocks, or screenshots encouraged)

Let's say we want to show the first two lines of a paragraph. The rest of the text would become visible (overflow show/hide) with the click of a button.

You see this on a lot of sites as "read more" or "show more" and it often looks and feels like an accordion, with chevron icon next to the button label.

In the Figma library, the accordion component only has the header (button) above the text body. It also only shows/hides the body and doesn't allow any preview text. So although it's similar, I think we'd need a different type of component to support the truncation use case, with a button at the bottom of the text instead of at the top.

image I also think, based on other examples this should support a container of any kind of content, not just text. Image above shows Patreon truncating their group of chips.

What type of pull request would this be?

New Feature

Provide relevant links or additional information.

https://mobbin.com/screens/2c2f643e-ca3a-44a6-ba75-f808b3880ba5

Or search for 'show more' interaction.

endigo9740 commented 5 months ago

We're planning a few new components to introduce as part of Skeleton v3. We're aiming to introduce a "Collapsible" component, which is common in many component libraries. I think this may fulfill this role.

I'll go ahead and tag this for review in the future. Though I cannot promise if/when this feature will be delivered.

In the meantime, my recommendation is to use a simple state toggle in Svelte. Have a button that flips a boolean value true/false. Then hide/show the desired contents using an if blog or controlling the height/overflow settings for a styled element.