Chip are compact element that represent an input, attribute, or action.
Ready to use on iOS 13+. Working with SwiftUI
.
In Xcode go to Project -> Your Project Name -> Package Dependencies
-> Tap Plus. Insert url:
https://github.com/Torear797/Chip
or adding it to the dependencies
of your Package.swift
:
dependencies: [
.package(url: "https://github.com/Torear797/Chip", .upToNextMajor(from: "1.0.0"))
]
If you prefer not to use any of dependency managers, you can integrate manually. Put Sources/Chip
folder in your Xcode project. Make sure to enable Copy items if needed
and Create groups
.
import Chip
@State var isOn = false
var body: some View {
Chip("My wonderful chip", isOn: $isOn)
}
You can customize the chip using styles:
struct MyCustomeChipStyle: ChipStyle {
func makeBody(configuration: Configuration) -> some View {
MyCustomeChipStyle(configuration: configuration)
}
private struct MyCustomeChipStyle: View {
// MARK: Constants
private let textFont = Font.subheadline
private let textColor = Color.black.opacity(0.7)
private let backgroundUnselectedColor = Color.red.opacity(0.2)
private let backgroundSelectedColor = Color.green
private let borderColor = Color.gray
private let height: CGFloat = 40
private let radius: CGFloat = 10
private let configuration: ChipStyleConfiguration
init(configuration: ChipStyleConfiguration) {
self.configuration = configuration
}
private var backgroundColor: Color {
configuration.$isOn.wrappedValue
? backgroundSelectedColor
: backgroundUnselectedColor
}
private var fontColor: Color {
configuration.$isOn.wrappedValue ? .white : .black
}
var body: some View {
configuration
.label
.font(textFont)
.foregroundColor(fontColor)
.lineLimit(1)
.frame(height: height)
.padding(.horizontal, 10)
.background(backgroundColor)
.clipShape(.rect(cornerRadius: radius))
.animation(.default, value: configuration.isOn)
}
}
}
VStack {
Chip("My wonderful chip 1", isOn: $isOn)
.chipStyle(MyCustomeChipStyle())
Chip("My wonderful chip 2", isOn: $isOn2)
.chipStyle(MyCustomeChipStyle())
}
Chip(isOn: $isOn) {
HStack {
Image(systemName: "xmark")
Text("My Custom Label")
.font(.system(size: 25))
}
}
Chip(isOn: $isOn) {
HStack {
Image(systemName: "xmark")
Text("My Custom Label")
.font(.system(size: 25))
}
} action: {
print("Alohomora")
}
extension ChipStyle where Self == MyCustomeChipStyle {
static var myCustomeChipStyle: Self { .init() }
}
Chip("My wonderful chip", isOn: $isOn)
.chipStyle(.myCustomeChipStyle)
Chip is released under the MIT license. See LICENSE for details.