Skip to content

Commit 62a1b71

Browse files
Update README.md
1 parent 8c70bb1 commit 62a1b71

File tree

1 file changed

+18
-13
lines changed

1 file changed

+18
-13
lines changed

README.md

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,8 @@ Compose enables users to choose from HSL, HSV or RGB color models to pick Solid
55
With colorful Sliders, panels, hex and color displays and various elements to create customized
66
pickers based on preference.
77

8-
There are 10(for now) different color pickers and 3 different color+gradient pickers available
9-
to choose from to use as Composables or inside dialogs that are available in demos.
10-
11-
8+
There are 10(for now) different color pickers and 3 different color+gradient pickers available to
9+
choose from to use as Composables or inside dialogs that are available in demos.
1210

1311
Inspired
1412
by [mchome's flutter_colorpicker for Flutter](https://github.com/mchome/flutter_colorpicker)
@@ -46,8 +44,10 @@ ColorPickerRingRectHSL(
4644
)
4745
```
4846

49-
ColorPicker with `SelectorRingHue` hue selector and `SelectorRectSaturationLightnessHSL` saturation lightness Selector that uses [HSL](https://en.wikipedia.org/wiki/HSL_and_HSV) color model as base.
50-
This color picker has tabs section that can be changed between HSL, HSV and RGB color models and color can be set using `CompositeSliderPanel` which contains sliders for each color models.
47+
ColorPicker with `SelectorRingHue` hue selector and `SelectorRectSaturationLightnessHSL` saturation
48+
lightness Selector that uses [HSL](https://en.wikipedia.org/wiki/HSL_and_HSV) color model as base.
49+
This color picker has tabs section that can be changed between HSL, HSV and RGB color models and
50+
color can be set using `CompositeSliderPanel` which contains sliders for each color models.
5151

5252
* **initialColor** color that is passed to this picker initially.
5353
* **ringOuterRadiusFraction** outer radius of `SelectorRingHue`.
@@ -56,9 +56,11 @@ ColorPicker with `SelectorRingHue` hue selector and `SelectorRectSaturationLight
5656
* **ringBorderStrokeColor** stroke color for drawing borders around inner or outer radius.
5757
* **ringBorderStrokeWidth** stroke width of borders.
5858
* **selectionRadius radius** of white and black circle selector.
59-
* **onColorChange** callback that is triggered when `Color` is changed using `SelectorRingHue` `SelectorDiamondSaturationLightnessHSL` or `CompositeSliderPanel`
59+
* **onColorChange** callback that is triggered when `Color` is changed
60+
using `SelectorRingHue` `SelectorDiamondSaturationLightnessHSL` or `CompositeSliderPanel`
6061

6162
#### Implementation for other Color Pickers
63+
6264
```
6365
ColorPickerCircleValueHSV(
6466
modifier: Modifier = Modifier,
@@ -67,6 +69,7 @@ ColorPickerCircleValueHSV(
6769
onColorChange: (Color) -> Unit
6870
)
6971
```
72+
7073
* **selectionRadius radius** of white and black circle selector.
7174
* **initialColor** color that is passed to this picker initially.
7275
* **onColorChange** callback that is triggered when `Color` is changed
@@ -78,6 +81,7 @@ ColorPickerCircleValueHSV(
7881
| <img src="./screenshots/colorpicker/cp_gradient_diamond_hsl.png"/> | <img src="./screenshots/colorpicker/cp_gradient_diamond_hsl2.png"/> | <img src="./screenshots/colorpicker/cp_gradient_rect_hsl.png"/> | <img src="./screenshots/colorpicker/cp_gradient_rect_hsv.png"/> |
7982

8083
### Implementation
84+
8185
```
8286
ColorPickerGradientRingDiamondHSL(
8387
modifier: Modifier = Modifier,
@@ -92,12 +96,13 @@ ColorPickerGradientRingDiamondHSL(
9296
onBrushColorChange: (BrushColor) -> Unit
9397
)
9498
```
99+
95100
Gradients in Compose might require **Size**, Offset, or radius based on Linear, Radial, or Sweep
96101
gradient is implemented.
97102

98-
A `GradientColorState` should be provided to this picker that hold **brush**, **color** and
99-
other meta-data about the gradient or color. When no size is provided it's not possible
100-
to choose linear gradient other than with angle, or other gradients.
103+
A `GradientColorState` should be provided to this picker that hold **brush**, **color** and other
104+
meta-data about the gradient or color. When there is no size provided you won't be able to choose
105+
linear gradient with start end offset, angle rotation still available, or other gradients.
101106

102107
```
103108
@Composable
@@ -126,6 +131,7 @@ fun rememberGradientColorState(
126131
```
127132

128133
Set size of your container that you wish to display gradients in and pass it
134+
129135
```
130136
val size = DpSize(150.dp, 100.dp)
131137
@@ -136,8 +142,8 @@ val gradientColorState = rememberGradientColorState(
136142
)
137143
```
138144

139-
`BrushColor` class is a color and brush wrapper class that is returned from gradient pickers
140-
in **onChange** callback instead of **Color**
145+
`BrushColor` class is a color and brush wrapper class that is returned from gradient pickers in **
146+
onChange** callback instead of **Color**
141147

142148
```
143149
/**
@@ -162,7 +168,6 @@ data class BrushColor(
162168
}
163169
```
164170

165-
166171
### Demos
167172

168173
* `SaturationSelectorDemo` different type of Hue/Saturation/Value/Lightness Selectors

0 commit comments

Comments
 (0)