https://github.com/hiddevdploeg/contentblurview

Easily get a fancy looking gradient blur as seen on watchOS 10
https://github.com/hiddevdploeg/contentblurview

ios swift swiftui watchos

Last synced: 2 months ago
JSON representation

Easily get a fancy looking gradient blur as seen on watchOS 10

• Host: GitHub
• URL: https://github.com/hiddevdploeg/contentblurview
• Owner: hiddevdploeg
• License: mit
• Created: 2023-07-20T13:44:08.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-07-20T14:18:14.000Z (over 1 year ago)
• Last Synced: 2024-10-14T20:10:57.343Z (3 months ago)
• Topics: ios, swift, swiftui, watchos
• Language: Swift
• Homepage:
• Size: 14.6 KB
• Stars: 55
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ContentBlurView

Easily get a fancy looking gradient blur as seen on watchOS 10



## Installation

Ready to use on iOS 17+ or watchOS 10+.

1. In Xcode, select **Add Packages…** from the File menu.

2. Enter `https://github.com/hiddevdploeg/ContentBlurView` in the search field.

3. Click **Add Package** (Set the Dependency Rule to Up to Next Major Version)

4. After adding the package, you will be able to import ContentBlurView in your project by using.

```swift

import ContentBlurView

```

## How use

You can use `ContentBlurView` with any `View` 

```swift

ContentBlurView {

    // Any view goes here

}

.ignoresSafeArea(edges: .all) // for fullscreen enjoyment

```

### Directions

You can decide on which side the blur should start: `.topBlur`, `.leadingBlur`, `trailingBlur` or `.bottomBlur`. the default is `.bottomBlur`

### Text

It's recommended to use [`HierarchicalShapeStyle`](https://developer.apple.com/documentation/swiftui/hierarchicalshapestyle) as a `.foregroundStyle` of your text as this will make it more vibrant with the background.

**Examples**

```swift

import MapKit

struct ContentView: View {

    var body: some View {

            TabView {

            // Example with image and blur on top

            ContentBlurView(direction: .topBlur) {

                AsyncImage(url: URL(string: "https://picsum.photos/800"))

            }

            .ignoresSafeArea(edges: .all)

            // Example with Map and text on top of it

            ZStack(alignment: .bottom) {

                ContentBlurView {

                    Map(interactionModes: .rotate) {

                        Marker("Apple Park", coordinate: CLLocationCoordinate2D(latitude: 37.334268, longitude: -122.008715))

                    }

                    .mapStyle(.imagery)

                }

                .ignoresSafeArea(edges: .all)

                Text("Apple Park")

                    .font(.headline)

                    .foregroundStyle(.primary)

                    .padding()

            }

        }

        .tabViewStyle(.verticalPage)

    }

}

```

## Authors

This library is created by [Hidde van der Ploeg](https://hidde.design). Feel free to reach out on [Twitter](https://twitter.com/hiddevdploeg) or [Mastodon](https://mastodon.design/@hidde).

## License

ContentBlurView is available under the MIT license.

    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.