EnesKaraosman / Swipecell
Licence: mit
Swipe Left2Right & Right2Left, pure SwiftUI implementation
Stars: ✭ 96
Programming Languages
swift
15916 projects
Labels
Projects that are alternatives of or similar to Swipecell
Swipe Listener
Zero-dependency, minimal swipe-gesture listener for the web.
Stars: ✭ 68 (-29.17%)
Mutual labels: swipe
Jquery.touchslider
A jQuery plugin that makes it easy to create touch sliders.
Stars: ✭ 43 (-55.21%)
Mutual labels: swipe
Pullupcontroller
Pull up controller with multiple sticky points like in iOS Maps
Stars: ✭ 1,130 (+1077.08%)
Mutual labels: swipe
Gesturerecognizerclosures
Closure support for handling gesture recognizers in Swift.
Stars: ✭ 84 (-12.5%)
Mutual labels: swipe
React Native Overlay Section
Overlay section like iOS Notification Center
Stars: ✭ 14 (-85.42%)
Mutual labels: swipe
Konamicode
Installs the Konami code easter-egg into your Android app ;)
Stars: ✭ 90 (-6.25%)
Mutual labels: swipe
Flutter swipe action cell
A flutter UI package provides ListView leading and trailing swipe action menu.
Stars: ✭ 65 (-32.29%)
Mutual labels: swipe
Uwp App Launcher Mobile
[Open Source] It's like the iOS and Android Home Screens but for Windows 10 (Phones).
Stars: ✭ 47 (-51.04%)
Mutual labels: swipe
React Native Deck Swiper
tinder like react-native deck swiper
Stars: ✭ 1,261 (+1213.54%)
Mutual labels: swipe
Nativescript Image Swipe
A NativeScript widget to easily 👆 and 🔍 through a list of images
Stars: ✭ 35 (-63.54%)
Mutual labels: swipe
Angular Swipe
Simple vertical and horizontal swipe gesture directive for angular js
Stars: ✭ 88 (-8.33%)
Mutual labels: swipe
Fullpage.js
fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple
Stars: ✭ 32,974 (+34247.92%)
Mutual labels: swipe
Abmediaview
Media view which subclasses UIImageView, and can display & load images, videos, GIFs, and audio and from the web, and has functionality to minimize from fullscreen, as well as show GIF previews for videos.
Stars: ✭ 79 (-17.71%)
Mutual labels: swipe
Mipivotpagecontroller
MIPivotPageController allows switching view controllers with an horizontal swipe
Stars: ✭ 95 (-1.04%)
Mutual labels: swipe
Godot Swipe Detector
Detect gestures and swipes in your game
Stars: ✭ 90 (-6.25%)
Mutual labels: swipe
SwipeCell
Preview
Features
- [x] Swipe cell from Left2Right & Right2Left.
- [ ] Destructive swipe
Usage
- Simply add
onSwipe(leading, trailing)
method to your list item
List {
HStack {
Text("Enes Karaosman")
Spacer()
}
.listRowInsets(EdgeInsets())
.onSwipe(leading: [
.. // here add slots
])
}
But what is Slot
?
It's just a container that wraps your elements
public struct Slot: Identifiable {
/// The Icon will be displayed.
public let image: () -> Image
/// To allow modification on Text, wrap it with AnyView.
public let title: () -> AnyView
/// Tap Action
public let action: () -> Void
/// Style
public let style: SlotStyle
}
public struct SlotStyle {
/// Background color of slot.
public let background: Color
/// Image tint color
public let imageColor: Color // default = .white
/// Individual slot width
public let slotWidth: CGFloat // default = 60
}
That's it, here is full working example
struct SwipeCellDemoView: View {
var slidableContent: some View {
HStack(spacing: 16) {
Image(systemName: "person.crop.circle.fill")
.resizable()
.scaledToFit()
.foregroundColor(.secondary)
.frame(height: 60)
VStack(alignment: .leading) {
Text("Enes Karaosman")
.fontWeight(.semibold)
Text("[email protected]")
.foregroundColor(.secondary)
}
}.padding()
}
var slots = [
// First item
Slot(
image: {
Image(systemName: "envelope.open.fill")
},
title: {
Text("Read")
.foregroundColor(.white)
.font(.footnote)
.fontWeight(.semibold)
.embedInAnyView()
},
action: { print("Read Slot tapped") },
style: .init(background: .orange)
),
// Second item
Slot(
image: {
Image(systemName: "hand.raised.fill")
},
title: {
Text("Block")
.foregroundColor(.white)
.font(.footnote)
.fontWeight(.semibold)
.embedInAnyView()
},
action: { print("Block Slot Tapped") },
style: .init(background: .blue, imageColor: .red)
)
]
var left2Right: some View {
slidableContent
.frame(height: 60)
.padding()
.onSwipe(leading: slots)
}
var right2Left: some View {
slidableContent
.frame(height: 60)
.padding()
.onSwipe(trailing: slots)
}
var leftAndRight: some View {
slidableContent
.frame(height: 60)
.padding()
.onSwipe(leading: slots, trailing: slots)
}
var items: [AnyView] {
[
left2Right.embedInAnyView(),
right2Left.embedInAnyView(),
leftAndRight.embedInAnyView()
]
}
var body: some View {
NavigationView {
List {
ForEach(items.indices, id: \.self) { idx in
self.items[idx]
}.listRowInsets(EdgeInsets())
}.navigationBarTitle("Messages")
}
}
}
Custom
In demo I used system images, but using local image is allowed as well.
ListItem
.onSwipe(leading: [
Slot(
image: {
Image("localImageName")
// To allow colorifying
.renderingMode(.template)
},
title: {
Text("Title").embedInAnyView()
},
action: { print("Slot tapped") },
style: .init(background: .orange)
)
])
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].