Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork4
A SwiftUI color picker component library for macOS
License
jaywcjlove/ColorSelector
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A SwiftUI color picker component library for macOS, designed to replace the default ColorPicker component. In addition, I’ve created another component library,Colorful, which offers a different user experience with a distinct style.
Welcome to downloadDevTutor, a cheat sheet app designed to help developers quickly build excellent applications using SwiftUI.
import ColorSelectorstructContentView:View{@Statevarcolor:Color?=.red@StatevarcolorClear:Color?=.clear@StatevarnsColor:NSColor?=NSColor.redvarbody:someView{ColorSelector("Color", selection: $color)ColorSelector(selection: $colorClear)ColorSelector(nsColor: $nsColor, arrowEdge:.top)ColorSelector(selection: $color){Text("Color Picker")}}}
Using theswatchColors environment value, developers can customize the color list in the color selector, replacing the default color options.
structContentView:View{@Statevarcolor:Color?=.redvarbody:someView{ColorSelector(selection: $color).environment(\.swatchColors,[NSColor(hue:0.999, saturation:0.857, brightness:0.878, alpha:1.0),NSColor(hue:0.066, saturation:1.000, brightness:0.980, alpha:1.0),NSColor(hue:0.121, saturation:0.976, brightness:0.969, alpha:1.0),]) ///ColorSelector(selection: $colorClear, arrowEdge:.top)}}
By setting thecornerSize (corner radius) andpointSize (point size) environment values, the corner radius and point size can be dynamically adjusted.
structContentView:View{@Statevarcolor:Color?=.red@StatevarcornerRadius:CGFloat=6@StatevarpointSize:CGSize=.init(width:12, height:12)varbody:someView{ColorSelector(selection: $color).environment(\.cornerSize, cornerRadius).environment(\.pointSize, pointSize)}}
arrowEdge: The edge of the attachmentAnchor that defines the location of the popover’s arrow. The default is nil, which results in the system allowing any arrow edge.
import ColorSelectorstructContentView:View{@StatevarcolorClear:Color?=.clearvarbody:someView{ColorSelector(selection: $colorClear, arrowEdge:.bottom)}}
Use theshowsAlpha modifier to control the visibility of the alpha (opacity) slider in the picker panel.
import ColorSelectorstructContentView:View{@Statevarcolor:Color?=.clearvarbody:someView{ColorSelector(selection: $color).showsAlpha(false)}}
Customize button size using thecontrolSize modifier
ColorSelector(selection: $color).controlSize(.regular)
ThecolorSelectorPopover modifier provides an easy way to add color picker functionality to any view. The modifier attaches a popover that shows when triggered externally.
structContentView:View{@StateprivatevarbackgroundColor:Color?=.blue@StateprivatevarshowColorPicker=falsevarbody:someView{Text("Background Color").padding().background(backgroundColor??.clear).onTapGesture{ showColorPicker=true}.colorSelectorPopover( selection: $backgroundColor, isPresented: $showColorPicker)}}
Basic usage with external popover control:
@StateprivatevartextColor:Color?=.primary@StateprivatevarshowTextPicker=falseButton("Choose Text Color"){ showTextPicker=true}.colorSelectorPopover( selection: $textColor, isPresented: $showTextPicker, showsAlpha:false)
Using NSColor binding:
@StateprivatevarshadowColor:NSColor?=NSColor.gray@StateprivatevarshowShadowPicker=falseText("Shadow Color").onTapGesture{ showShadowPicker=true}.colorSelectorPopover( nsColor: $shadowColor, isPresented: $showShadowPicker, arrowEdge:.top)
Available parameters:
selection: A binding to the selected ColornsColor: A binding to the selected NSColor (alternative to selection)isPresented: A binding to control popover visibilityarrowEdge: The edge where the popover arrow appears (default: system decides)showsAlpha: Whether to show alpha controls (default: true)
TheColorSelectorButton is a standalone button component that displays the current selected color and can trigger a popover when tapped. This component provides the visual color representation without the popover functionality built-in.
structContentView:View{@StateprivatevarselectedColor:Color?=.blue@StateprivatevarshowColorPicker=false@StateprivatevarbuttonSize:ControlSize=.regularvarbody:someView{VStack(spacing:20){ // Color selector buttonColorSelectorButton( popover: $showColorPicker, selection: $selectedColor, controlSize: $buttonSize) // Display current colorText("Selected:\(selectedColor?.description??"None")")}.colorSelectorPopover( selection: $selectedColor, isPresented: $showColorPicker)}}
Customize button size:
@StateprivatevarbuttonSize:ControlSize=.largeColorSelectorButton( popover: $showColorPicker, selection: $selectedColor, controlSize: $buttonSize)
Available control sizes:.mini,.small,.regular,.large,.extraLarge
structContentView:View{@Statevaralpha:CGFloat=1.0varsaturation:CGFloat=1.0varbrightness:CGFloat=1.0varhue:CGFloat=0.0varbody:someView{AlphaSlider( alpha: $alpha, hue: hue, saturation: saturation, brightness: brightness)}}
structContentView:View{@Statevarcolor:Color=Color.redvarcornerRadius:CGFloat=6varpointSize:CGSize=.init(width:8, height:8)varbody:someView{ColorSampler( color: $color, cornerRadius: cornerRadius, pointSize: pointSize)}}
You can customize the width and height of the rectangle using therectSize modifier.
#Preview{@Previewable@Statevarcolor:Color?=Color.blueColorSampler(color: $color).rectSize(23)}
structContentView:View{@Statevarhue:CGFloat=1varbody:someView{HueSlider(hue: $hue)}}
structContentView:View{@Statevarsaturation:CGFloat=1.0@Statevarbrightness:CGFloat=1.0varhue:CGFloat=0.0varbody:someView{Saturation( saturation: $saturation, brightness: $brightness, hue: hue, cornerRadius:16)}}
structContentView:View{@Statevarcolor:NSColor=NSColor.whitevarbody:someView{Swatch()Swatch(nsColor: color){ valuein color= value}}}
structContentView:View{@Statevarsaturation:CGFloat=1.0@Statevarbrightness:CGFloat=1.0@Statevarhue:CGFloat=0.0@Statevaralpha:CGFloat=1.0varbody:someView{Sketch( hue: $hue, saturation: $saturation, brightness: $brightness, alpha: $alpha).frame(width:180, height:230)}}
Licensed under the MIT License.
About
A SwiftUI color picker component library for macOS
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
