Swiftpack.co - oskey-org/swift-ui-kit-oskey-org as Swift Package

Swiftpack.co is a collection of thousands of indexed Swift packages. Search packages.
See all packages published by oskey-org.
oskey-org/swift-ui-kit-oskey-org 1.1.1
A configurable carousel control for SwiftUI
⭐️ 0
🕓 1 week ago
iOS macOS
.package(url: "https://github.com/oskey-org/swift-ui-kit-oskey-org.git", from: "1.1.1")

License

OSKUIKit - OSkey supplemental UI kit for SwitfUI

Copyright (c) 2022 OSkey SAS. MIT License.

The OSkey app (not yet publicly released) uses SwiftUI, and is supplemented by additional UI elements provided in this UI kit.

Content

  • OSKUICarousel is a stylable carousel, perfect for scrolling though photos, cards, ...
  • OSKUIListTile is a stylable list tile suitable for list row element

Supported platforms and minimal versions

Platform  Minimal version  Comments
macOS 12 Only tested on macOS v12
iOS 15 Only tested on iOS v15

Adding to your project

Swift Package Manager

Open Xcode, go to File -> Swift Packages -> Add Package Dependency and enter https://github.com/oskey-org/swift-ui-carousel-oskey-org.git.

You can also add ACarousel as a dependency to your Package.swift:

dependencies: [ .package(url: "https://github.com/oskey-org/swift-ui-kit-oskey-org.git", from: "1.0.0") ]

OSKUICarousel

Get started

Below is an example of sliding cards, with a person photo and it's name below.

import SwiftUI
import OSKUICarousel

struct ColorItem: Identifiable {
    let name: String
    let color: Color

    var id: String { return name }
}

struct ContentView: View {
    let colors = [
        ColorItem(name: "Red", color: .red),
        ColorItem(name: "Green", color: .green),
        ColorItem(name: "Blue", color: .blue),
    ]

    @State private var currentIndex = 0

    var body: some View {
      OSKUICarousel(
          colors,
          index: $currentIndex,
          spacing: 16,
          headspace: 16,
          sidesScaling: 0.8,
          isWrap: false,
          autoScroll: .active(5),
          allowSwipe: true,
          proxy: proxy
      ) { color in
          VStack {
              color.color
                  .aspectRatio(16/9, contentMode: .fit)
              Text("**Color:** \(color.name)")
                  .padding()
          }
          .background(.white)
          .clipShape(RoundedRectangle(cornerRadius: 8))
          .shadow(color: .gray, radius: 2, x: 1, y: 1)
      }
      .padding(.vertical)
    }
}

Styling your carousels

Styling the carousel is done by implementing the OSKUICarouselStyle protocol:

class OSKUIMyCarouselStyle: OSKUICarouselStyle {
    func makeBody(configuration: OSKUIConfiguration) -> some View {
        VStack(spacing: 16) {
            configuration.content

            HStack(spacing: 4) {
                ForEach(configuration.dots) { dot in
                    Image(systemName: "circle.fill")
                        .resizable()
                        .frame(width: dot.isActiveItem ? 8 : 4, height: dot.isActiveItem ? 8 : 4, alignment: .center)
                        .scaledToFit()
                        .foregroundColor(dot.isActiveItem ? .red : .white)
                }
            }
            .padding(8)
            .frame(maxWidth: configuration.itemMaxWidth)
            .background(Color.red.opacity(0.13))
            .clipShape(RoundedRectangle(cornerRadius: 8))
            .scaledToFit()
        }
        .padding(.vertical)
        .background(Color.blue.opacity(0.13))
    }
}

Then, in the above example, add the modifier .oskuiCarouselStyle(OSKUIMyCarouselStyle()):


[...]

struct ContentView: View {
    let colors = [
        ColorItem(name: "Red", color: .red),
        ColorItem(name: "Green", color: .green),
        ColorItem(name: "Blue", color: .blue),
    ]

    @State private var currentIndex = 0

    var body: some View {
      OSKUICarousel(
          colors,
          index: $currentIndex,
          spacing: 16,
          headspace: 16,
          sidesScaling: 0.8,
          isWrap: false,
          autoScroll: .active(5),
          allowSwipe: true,
          proxy: proxy
      ) { color in
          VStack {
              color.color
                  .aspectRatio(16/9, contentMode: .fit)
              Text("**Color:** \(color.name)")
                  .padding()
          }
          .background(.white)
          .clipShape(RoundedRectangle(cornerRadius: 8))
          .shadow(color: .gray, radius: 2, x: 1, y: 1)
      }
      .oskuiCarouselStyle(OSKUIMyCarouselStyle())
      .padding(.vertical)
    }
}

Example

An example can be found here.

OSKUIListTile

Get started

Coming soon...

Styling your list tiles

Coming soon...

Example

Coming soon...

Dependencies

This package has no dependencies.

Thanks

This example is inspired by:

Contributions

Please find here the instructions for contributions.

Licenses

Please find here the detail on licensing.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

GitHub

link
Stars: 0
Last commit: 1 week ago
jonrohan Something's broken? Yell at me @ptrpavlik. Praise and feedback (and money) is also welcome.

Release Notes

1.1.1
1 week ago

Swiftpack is being maintained by Petr Pavlik | @ptrpavlik | @swiftpackco | API | Analytics