├── example-1.png
├── example-4.png
├── README.md
└── BackgroundCard.swift


/example-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bonney/SwiftUI-BackgroundCard/HEAD/example-1.png


--------------------------------------------------------------------------------
/example-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bonney/SwiftUI-BackgroundCard/HEAD/example-4.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # SwiftUI-BackgroundCard
 2 | A simple SwiftUI ViewModifier to add a card-like background to a View.
 3 | 
 4 | ## Usage
 5 | 
 6 | Simply apply the modifier to an exisiting View...
 7 | 
 8 | ```
 9 | Text("This is some text, but it could be any SwiftUI view.")
10 |   .modifier( BackgroundCard() )
11 | ```
12 | 
13 | ... and you'll end up with this:
14 | 
15 | ![image of card in light mode](example-1.png)
16 | 
17 | As you can see, it works nicely in dark mode as well (*additional padding and background has been added to these previews to better show off the cards*).
18 | 
19 | ![image of card in both light and dark modes](example-4.png)
20 | 


--------------------------------------------------------------------------------
/BackgroundCard.swift:
--------------------------------------------------------------------------------
 1 | import SwiftUI
 2 | 
 3 | struct BackgroundCard: ViewModifier {
 4 |     var radius: CGFloat = 12
 5 |     var border: CGFloat = 1
 6 |     var shadow: Double = 0.03
 7 |     
 8 |     func body(content: Content) -> some View {
 9 |         content
10 |             .padding()                  // Padding around the edges of content
11 |             .background(innerRect)      // White|Black background color
12 |             .padding(border)            // Make space for border rectangle
13 |             .background(outerRect)      // Dark|Light gray border rectangle
14 |             .shadow(color: Color.black.opacity(shadow), radius: 4, x: 0, y: 4)
15 |     }
16 |     
17 |     var innerRect: some View {
18 |         RoundedRectangle(cornerRadius: radius, style: .continuous)
19 |             .foregroundColor(Color(UIColor.secondarySystemGroupedBackground))
20 |     }
21 |     
22 |     var outerRect: some View {
23 |         RoundedRectangle(cornerRadius: (radius + border), style: .continuous)
24 |             .foregroundColor(Color(UIColor.systemGray5))
25 |     }
26 | }
27 | 
28 | struct BackgroundCard_Previews: PreviewProvider {
29 | 	static var previews: some View {
30 | 		Text("Hi there! I hope you find this simple ViewModifier useful.")
31 | 			.modifier(BackgroundCard())
32 | 	}
33 | }
34 | 


--------------------------------------------------------------------------------