Skip to content

Latest commit

 

History

History
106 lines (82 loc) · 3.46 KB

File metadata and controls

106 lines (82 loc) · 3.46 KB

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 Badge Static Badge Static Badge Static Badge Static Badge

Features 🚀

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

Configuration ⚙️

Parameter Type Default Value Description
items [T] N/A Required: An array of items conforming to Hashable.
hSpacing CGFloat 10 Horizontal spacing between items.
vSpacing CGFloat 10 Vertical spacing between rows.
alignment HorizontalAlignment .leading The alignment of items horizontally.
fixedSize Bool true Whether each item should have a fixed size or not.
animation Animation? nil Optional animation when the container height changed.

Usage Guide 📖

First, import StackWrapper package

import StackWrapper

Default Use:

struct MySkills: View {
  
  @State var skills: [String] = ["Swift", "SwiftUI", "UIKit", "Kotlin", "JavaScript", "HTML", "CSS", "React", "Node.js", "Git", "TypeScript", "MongoDB", "Express.js", "REST APIs"]
  
  var body: some View {
    VStack {
      Hwrapper(items: skills) {skill in
        Text(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 in
  Text(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 in
    Text(skill)
    .padding(12)
    .background(.yellow)
    .clipShape(RoundedRectangle(cornerRadius: 12))
  }
      
  Button("Delete Skill") {
    skills.removeLast()
  }
   .buttonStyle(.borderedProminent)
}

Image

Installation via Swift Package Manager 🖥️

Contact 📬