Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

7 Commits

Repository files navigation

StackWrapper

StackWrapper helps you easily and efficiently arrange your desired elements using a flexible layout. This component dynamically adjusts in height and width based on the elements and the device’s screen size. It also allows you to use various properties to customize your design needs.

Static BadgeStatic BadgeStatic BadgeStatic BadgeStatic Badge

Features 🚀

  • Flexible Horizontal Wrapping
  • Customizable Spacing
  • Alignment Control
  • Fixed Size Option
  • Animation Support
  • Layout Calculation
  • Responsive to Screen Size

Configuration ⚙️

ParameterTypeDefault ValueDescription
items[T]N/ARequired: An array of items conforming to Hashable.
hSpacingCGFloat10Horizontal spacing between items.
vSpacingCGFloat10Vertical spacing between rows.
alignmentHorizontalAlignment.leadingThe alignment of items horizontally.
fixedSizeBooltrueWhether each item should have a fixed size or not.
animationAnimation?nilOptional animation when the container height changed.

Usage Guide 📖

First, import StackWrapper package

import StackWrapper

Default Use:

structMySkills:View{@Statevarskills:[String]=["Swift","SwiftUI","UIKit","Kotlin","JavaScript","HTML","CSS","React","Node.js","Git","TypeScript","MongoDB","Express.js","REST APIs"]varbody:someView{VStack{Hwrapper(items: skills){skill inText(skill).padding(12).background(.yellow).clipShape(RoundedRectangle(cornerRadius:12))}}.padding()}}
Image

With custom parameters

Hwrapper(items: skills, vSpacing:10, hSpacing:20, alignment:.center, fixedSize:true){ skill inText(skill).padding(12).background(.yellow).clipShape(RoundedRectangle(cornerRadius:12))}
Image

Animation Support

Smooth transitions when the container’s height increases or decreases

VStack{Hwrapper(items: skills, animation:.easeIn){ skill inText(skill).padding(12).background(.yellow).clipShape(RoundedRectangle(cornerRadius:12))}Button("Delete Skill"){
skills.removeLast()}.buttonStyle(.borderedProminent)}

Image

Installation via Swift Package Manager 🖥️

Contact 📬

About

StackWrapper helps you easily and efficiently arrange your desired elements using a flexible layout. This component dynamically adjusts in height and width based on the elements and the device’s screen size. It also allows you to use various properties to customize your design needs.

Topics

Resources

Stars

8 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages