Expand

Meet Expand, your new favorite component! 🚀

Tired of long content cluttering your pages? The Expand component solves this by automatically showing or hiding content when it’s too lengthy. With a sleek, Design-inspired toggle, users can expand to read more or collapse to keep things tidy.

Key features:

✅ Clean & User-Friendly: Keeps your design clean while letting users control what they want to see.
✅ Responsive by Design: Works perfectly on any screen size.
✅ Simple Integration: Plug and play—just add it to your project, no hassle!
✅ Customizable: Easily tweak styles and behaviors to fit your app's needs.

Make your apps smarter and more user-focused with Expand! 👌

Basic Expand

If you were hoping I had a magical, complete solution to this problem,
I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides. If you were hoping I had a magical, complete solution to this problem,
I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides. If you were hoping I had a magical, complete solution to this problem,
I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides. If you were hoping I had a magical, complete solution to this problem,
I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides. If you were hoping I had a magical, complete solution to this problem,
I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides. If you were hoping I had a magical, complete solution to this problem,
I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides. If you were hoping I had a magical, complete solution to this problem,
I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides. If you were hoping I had a magical, complete solution to this problem,
I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides. If you were hoping I had a magical, complete solution to this problem,
I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides. If you were hoping I had a magical, complete solution to this problem,
I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.If you were hoping I had a magical, complete solution to this problem,
I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.

Show button if expanded

Custom button labels

API Reference

ngs-expand component - shows and hides blocks with large contents.

Properties for the ngs-expand component.

Properties

Events

Prop	Type	Default
expanded Show/Hide block content	boolean	false
color Color of a fade	boolean	false
expandLabel Label of the expand button if block collapsed	string	Show more
collapseLabel Label of the expand button if block expanded	string	Show less
showButtonIfExpanded Show button by hover if block is expanded	boolean	false
height Height of a block	string(px)	–