DOCSEARCHbyAlgolia
Submit Docs

MaterialView Documentation

repository·main·Indexed 18 days ago

https://github.com/oskargroth/materialview

A customizable macOS material blur view providing more control than NSVisualEffectView, allowing adjustments to blur radius, saturation, brightness, and tinting. Supports both SwiftUI and AppKit via NSMaterialView, with the ability to create custom materials using NSMaterialView.Effect.

Tokens
647
Snippets
4
Records
5
Agent score
14%

What's inside MaterialView

  1. Install MaterialView via Swift Package Manager

    main

    Add MaterialView to your project's dependencies using the following URL and version constraint in your Package.swift or Xcode project settings:

    dependencies: [
    .package(url: "https://github.com/OskarGroth/MaterialView.git", from: "1.0.0")
]

  2. Important stability note regarding undocumented APIs

    main
    MaterialView utilizes undocumented CoreAnimation classes (CABackdropLayer, CAFilter) and private window properties to achieve its effects. While these have been stable in macOS for a long time, they are not part of the public API and could change in future macOS releases.

  3. Use MaterialView in SwiftUI

    main

    Import MaterialView and use the MaterialView view. You can specify an effect (such as .panelDark) and a cornerRadius to style the blur view.

    import MaterialView

MaterialView(effect: .panelDark, cornerRadius: 12)
    .frame(width: 300, height: 200)

  4. Use MaterialView in AppKit

    main

    Import MaterialView and instantiate NSMaterialView. You can configure the effect and cornerRadius properties directly on the instance.

    import MaterialView

let materialView = NSMaterialView()
materialView.effect = .panelDark
materialView.cornerRadius = 12

  5. Create custom materials with NSMaterialView.Effect

    main

    You can define highly customized materials by initializing NSMaterialView.Effect. This allows you to control the appearance for different states (like active) using MaterialStyle, as well as defining rim colors and widths for borders.

    let customEffect = NSMaterialView.Effect(
    active: .MaterialStyle(
        backgroundColor: NSColor(white: 0.15, alpha: 0.5),
        tintColor: NSColor(white: 0.1, alpha: 0.3),
        tintFilter: kCAFilterLightenBlendMode,
        saturationFactor: 1.8,
        brightnessFactor: 0.02,
        blurRadius: 30
    ),
    rimColor: (inner: .white.withAlphaComponent(0.15), outer: .clear),
    rimWidth: (inner: 1, outer: 0)
)