{"id":13537030,"url":"https://github.com/joogps/SlideOverCard","last_synced_at":"2025-04-02T03:31:31.582Z","repository":{"id":37262929,"uuid":"309839294","full_name":"joogps/SlideOverCard","owner":"joogps","description":"A SwiftUI card view, made great for setup interactions.","archived":false,"fork":false,"pushed_at":"2024-03-29T20:12:43.000Z","size":62168,"stargazers_count":998,"open_issues_count":5,"forks_count":40,"subscribers_count":12,"default_branch":"main","last_synced_at":"2024-04-24T08:25:10.083Z","etag":null,"topics":["apple","card","ios","ipados","over","slide","swift","swiftui"],"latest_commit_sha":null,"homepage":"","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/joogps.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-11-04T00:19:52.000Z","updated_at":"2024-07-06T03:31:19.458Z","dependencies_parsed_at":"2024-01-16T14:04:01.779Z","dependency_job_id":"7dfbfaff-8d04-4a7d-8e7d-b9a8846cbd09","html_url":"https://github.com/joogps/SlideOverCard","commit_stats":{"total_commits":59,"total_committers":7,"mean_commits":8.428571428571429,"dds":0.1694915254237288,"last_synced_commit":"98af5370e49d3d51efb387aacee0245ec656e32b"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joogps%2FSlideOverCard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joogps%2FSlideOverCard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joogps%2FSlideOverCard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joogps%2FSlideOverCard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joogps","download_url":"https://codeload.github.com/joogps/SlideOverCard/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246746932,"owners_count":20827061,"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":["apple","card","ios","ipados","over","slide","swift","swiftui"],"created_at":"2024-08-01T09:00:53.759Z","updated_at":"2025-04-02T03:31:31.555Z","avatar_url":"https://github.com/joogps.png","language":"Swift","funding_links":[],"categories":["Samples","Card"],"sub_categories":["Content"],"readme":"\u003ch1\u003e SlideOverCard\n  \u003cimg align=\"right\" alt=\"Project logo\" src=\"../assets/icon-small.png\" width=128px\u003e\n\u003c/h1\u003e\n\n\u003cp\u003e\n    \u003cimg src=\"https://img.shields.io/badge/iOS-13.0+-blue.svg\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-SwiftUI-red.svg\" /\u003e\n    \u003ca href=\"https://twitter.com/joogps\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/Contact-@joogps-lightgrey.svg?style=social\u0026logo=twitter\" alt=\"Twitter: @joogps\" /\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\nA SwiftUI card design similar to the one used by Apple in HomeKit, AirPods, Apple Card and AirTag setup, NFC scanning, Wi-Fi password sharing and more. It is specially great for setup interactions.\n\n\u003cbr\u003e\n\u003cp\u003e\n    \u003cimg alt=\"Clear Spaces demo\" src=\"../assets/demo-clear-spaces.gif\" margin-right=20px\u003e\n    \u003cimg alt=\"QR code scanner demo\" src=\"../assets/demo-qr-code.gif\"\u003e\n    \u003cimg alt=\"Example preview demo\" src=\"../assets/demo-example.gif\"\u003e\n\u003c/p\u003e\n\u003cbr\u003e\n\n\u003e _From left to right: SlideOverCard being used in [Clear Spaces](https://apps.apple.com/us/app/clear-spaces/id1532666619), a QR code scanner prompt (made with [CodeScanner](https://github.com/twostraws/CodeScanner)) and a sample demo app_\n\n## Installation\nThis repository is a Swift package, so just include it in your Xcode project and target under **File \u003e Add package dependencies**. Then, `import SlideOverCard` to the Swift files where you'll be using it.\n\n\u003e [!NOTE]  \n\u003e If your app runs on iOS 13, you might find a problem with keyboard responsiveness in your layout. That's caused by a SwiftUI limitation, unfortunately, since the [`ignoresSafeArea`](https://developer.apple.com/documentation/swiftui/text/ignoressafearea(_:edges:)) modifier was only introduced for the SwiftUI framework in the iOS 14 update.\n\u003e \n\n## Usage\nAdding a card to your app is insanely easy. Just add a `.slideOverCard()` modifier anywhere in your view hierarchy, similarly to a `.sheet()`:\n```swift\n.slideOverCard(isPresented: $isPresented) {\n  // Here goes your awesome content\n}\n```\n\nAnd that's it! It just works. In this case, `$isPresented` is a boolean binding. This way you can dismiss the view anytime by setting it to `false`.\n\n## Extra steps\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003eCustomization\u003c/b\u003e\u003c/summary\u003e\u003cbr\u003e\n\n  The default `.slideOverCard()` modifier will have a transition, drag and tap controls and a dismiss button set by default. You can override this by manually setting the `SOCOptions` option set:\n  ```swift\n  \n  // This creates a card that can be dragged, but not dismissed by dragging\n  .slideOverCard(isPresented: $isPresented, options: [.disableDragToDismiss]) {\n  }\n  \n  // This creates a card that can't be dragged nor dismissed by dragging\n  .slideOverCard(isPresented: $isPresented, options: [.disableDrag, .disableDragToDismiss]) {\n  }\n\n  // This creates a card that can't be dismissed by an outside tap\n  .slideOverCard(isPresented: $isPresented, options: [.disableTapToDismiss]) {\n  }\n  \n  // This creates a card with no dismiss button\n  .slideOverCard(isPresented: $isPresented, options: [.hideDismissButton]) {\n  }\n  ```\n  \n  If you want to change styling attributes of the card, such as the **corner size**, the **corner style**, the **inner and outer paddings**, the  **dimming opacity** and the **shape fill style**, such as a gradient, just specify a custom `SOCStyle` struct.\n  \n  ```swift\n  .slideOverCard(isPresented: $isPresented, style: SOCStyle(cornerRadius: 24.0,\n                                                            continuous: false,\n                                                            innerPadding: 16.0,\n                                                            outerPadding: 4.0,\n                                                            dimmingOpacity: 0.1,\n                                                            style: .black)) {\n  }\n  ```\n  \n  In case you want to execute code when the view is dismissed (either by the exit button or drag controls), you can also set an optional `onDismiss` closure parameter:\n  \n  ```swift\n  // This card will print some text when dismissed\n  .slideOverCard(isPresented: $isPresented, onDismiss: {\n      print(\"I was dismissed.\")\n  }) {\n      // Here goes your amazing layout\n  }\n  ```\n  \n  Alternatively, you can add the card using a binding to an optional identifiable object. That will automatically animate the card between screen changes.\n  ```swift\n  // This uses a binding to an optional object in a switch statement\n  .slideOverCard(item: $activeCard) { item in\n      switch item {\n          case .welcomeView:\n              WelcomeView()\n          case .loginView:\n              LoginView()\n          default:\n              ..........\n      }\n  }\n  ```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003eAccessory views\u003c/b\u003e\u003c/summary\u003e\u003cbr\u003e\n\nThis package also includes a few accessory views to enhance your card layout. The first one is the `SOCActionButton()` button style, which can be applied to any button to give it a default \"primary action\" look, based on the app's accent color. The `SOCAlternativeButton()` style will reproduce the same design, but with gray. And `SOCEmptyButton()`  will create a text-only button. You can use them like this:\n```swift\nButton(\"Do something\") {\n  ...\n}.buttonStyle(SOCActionButton()) // Use the modifier of your choice\n```\n\nThere's also the `SOCDismissButton()` view. This view will create the default dismiss button icon used for the card (based on https://github.com/joogps/ExitButton).\n\u003c/details\u003e\n\n## Demo\nYou can check out a demo project for this package in the [`demo`](https://github.com/joogps/SlideOverCard/tree/demo) branch of this repository.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoogps%2FSlideOverCard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoogps%2FSlideOverCard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoogps%2FSlideOverCard/lists"}