{"id":17233534,"url":"https://github.com/filiplazov/cornerstacks","last_synced_at":"2025-04-14T01:53:48.913Z","repository":{"id":63909863,"uuid":"249276197","full_name":"filiplazov/CornerStacks","owner":"filiplazov","description":"Layout SwiftUI views in corners with ease.","archived":false,"fork":false,"pushed_at":"2020-03-29T20:10:09.000Z","size":54,"stargazers_count":13,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-14T01:53:43.733Z","etag":null,"topics":["ios","library","macos","swift","swift-package-manager","swiftui","tvos","watchos"],"latest_commit_sha":null,"homepage":null,"language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/filiplazov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-22T21:31:53.000Z","updated_at":"2024-03-02T19:58:38.000Z","dependencies_parsed_at":"2022-11-29T07:10:25.205Z","dependency_job_id":null,"html_url":"https://github.com/filiplazov/CornerStacks","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filiplazov%2FCornerStacks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filiplazov%2FCornerStacks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filiplazov%2FCornerStacks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filiplazov%2FCornerStacks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/filiplazov","download_url":"https://codeload.github.com/filiplazov/CornerStacks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248809032,"owners_count":21164895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ios","library","macos","swift","swift-package-manager","swiftui","tvos","watchos"],"created_at":"2024-10-15T05:04:42.737Z","updated_at":"2025-04-14T01:53:48.883Z","avatar_url":"https://github.com/filiplazov.png","language":"Swift","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"Images/Logo.png\" width=\"520\" max-width=\"90%\" alt=\"CornerStacks\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Swift-5.1-red?style=flat\" /\u003e\n    \u003ca href=\"https://swift.org/package-manager\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/spm-compatible-brightgreen.svg?style=flat\" alt=\"Swift Package Manager\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://twitter.com/filiplazov\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/contact-@filiplazov-blue.svg?style=flat\" alt=\"Twitter: @filiplazov\" /\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n\nCornerStacks provides an easy way to layout SwiftUI views at the 4 corners of the parent view. It works by wrapping `HStack` and `VStack`, with a straightforward implementation combining both `HStack` and `VStack` along with some `Spacer`s to produce the desired layout for each of the corner views. The primary purpose is to reduce boilerplate setup, increase code readability and allow for rapid prototyping. This layout technique is nicely explained by John Sundell in [this video](https://www.youtube.com/watch?v=XC5NOBsHcf0).\n\n## Requirements\n\n- iOS 13.0+ / macOS 10.15+ / tvOS 13.0+ / watchOS 6.0+\n- Xcode 11.0+\n- Swift 5.1+\n\n\n## Installation\n\nI . Automatically in Xcode:\n\n - Click **File \u003e Swift Packages \u003e Add Package Dependency...**  \n - Use the package URL `https://github.com/filiplazov/CornerStacks` to add `CornerStacks` to your project.\n\nII . Manually in your **Package.swift** file add:\n\n```swift\n.package(url: \"https://github.com/filiplazov/CornerStacks\", from: \"0.1.0\")\n```\n\n## Usage\n\nBefore using any of the views make sure you import the `CornerStacks` module \n\n```swift\nimport CornerStacks\n```\n\nThere are 4 views defined for both `HStack` and `VStack` that represent the 4 corners.\n\n**HStack**\n\n- `TopLeadingHStack`\n- `TopTrailingHStack`\n- `BottomLeadingHStack`\n- `BottomTrailingHStack`\n\n**VStack**\n\n- `TopLeadingVStack`\n- `TopTrailingVStack`\n- `BottomLeadingVStack`\n- `BottomTrailingVStack`\n\n**Example**\n\nIt is much easier to explain in an example\n\n```swift\nvar body: some View {\n  ZStack {\n    // just like a normal HStack you can place many nested views\n    TopLeadingHStack {\n      makeSquare(size: 80)\n      makeSquare(size: 80)\n    }\n    // spacing is passed along to the wrapped HStack and VStack\n    TopTrailingVStack(spacing: 30) {\n      makeSquare(size: 80)\n      makeSquare(size: 80)\n    }\n    // horizontal alignment is passed along to the wrapped VStack\n    BottomLeadingVStack(alignment: .leading) {\n      makeSquare(size: 40)\n      makeSquare(size: 80)\n    }\n    // vertical alignment passed along to the wrapped VStack\n    BottomTrailingHStack(alignment: .top) {\n      makeSquare(size: 80)\n      makeSquare(size: 40)\n    }\n    // it also works in nested views like other VStacks and HStacks\n    HStack {\n      TopLeadingHStack {\n        makeSquare(size: 40)\n      }\n      BottomTrailingVStack {\n        makeSquare(size: 40)\n        makeSquare(size: 40)\n      }\n    }\n    .frame(width: 200, height: 150)\n    .background(Color.black)\n  }\n}\n```\nHere is the output from the code above\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"Images/Example.png\" alt=\"Example\" /\u003e\n\u003c/p\u003e\n\n## Contributing\n\nContributions are more than welcome. Please create a GitHub issue before submitting a pull request to plan and discuss implementation.\n\n## Author\n* [Filip Lazov](https://github.com/filiplazov) ([@filiplazov](https://twitter.com/filiplazov))\n\n## License\n\nCornerStacks is available under the MIT license. See the [LICENSE](LICENSE) file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffiliplazov%2Fcornerstacks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffiliplazov%2Fcornerstacks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffiliplazov%2Fcornerstacks/lists"}