Skip to content

Commit

Permalink
Update docs for "color"-field
Browse files Browse the repository at this point in the history
add "allow-gradient" attr
  • Loading branch information
matthias-own3d committed Dec 5, 2024
1 parent cd161e1 commit aa15301
Showing 1 changed file with 24 additions and 3 deletions.
27 changes: 24 additions & 3 deletions docs/docs/extensions/syntax-for-forms.md
Original file line number Diff line number Diff line change
Expand Up @@ -241,18 +241,21 @@ Resulting `values`:

### Color Field

The `color` field provides a color picker that can be used to select a color. The `value` must be a valid hex color
code. The hex code can be either 6 or 8 characters long. The 8 character hex code will be used for the alpha channel.
The `color` field provides a color picker that can be used to select a color. The hex code can be either 6 or 8 characters long. The 8 character hex code will be used for the alpha channel.

If `allow-gradient` is set, the user can choose between `color`, `linear gradient` and `radial gradient`.


```yaml
- type: color
id: color
attributes:
label: Color
allow-gradient: true
value: "#ff0000"
```

Resulting `values`:
Resulting `values` for hex-color:

```json
{
Expand All @@ -262,6 +265,24 @@ Resulting `values`:
}
```

Resulting `values` for `linear-gradient`
```json
{
"values": {
"color": "linear-gradient(90deg, #FF9602 0%, #ffffff 100%)"
}
}
```

Resulting `values` for `radial-gradient`
```json
{
"values": {
"color": "radial-gradient(circle, #c99144ff 0%, #ffffff 100%)"
}
}
```

<!--
### Divider

Expand Down

0 comments on commit aa15301

Please sign in to comment.