diff --git a/src/color-chart/README.md b/src/color-chart/README.md index 3ca0bbbf..bac1e8c0 100644 --- a/src/color-chart/README.md +++ b/src/color-chart/README.md @@ -39,6 +39,20 @@ You can also specify a whole label, and if it contains a number, the number will _(Colors courtesy of Tailwind)_ +### The `info` attribute + +You can use the `info` attribute to show information about the color scale points. Currently, the only type of information supported is color coords (in any color space), but more will be added in the future. + +The format of this attribute is analogous to the one of [``](../color-swatch/#the-info-attribute). + +```html + + + + + +``` + Reactivity: ```html @@ -64,6 +78,7 @@ Reactivity: |-----------|----------|---------------|---------------|-------------| | `x` | `x` | `string` | `null` | The coord to plot on the X axis, if any | | `y` | `y` | `string` | `"oklch.l"` | The coord to plot on the Y axis, if any | +| `info` | `info` | `string` | - | Comma-separated list of coords of the color point to be shown. | ### Events diff --git a/src/color-chart/color-chart.js b/src/color-chart/color-chart.js index 68a2f5e9..0ed98eff 100644 --- a/src/color-chart/color-chart.js +++ b/src/color-chart/color-chart.js @@ -178,6 +178,12 @@ const Self = class ColorChart extends NudeElement { // Re-render swatches this.render(evt); } + + if (name === "info") { + for (let colorScale of this.children) { + colorScale.info = this.info; + } + } } static props = { @@ -198,6 +204,8 @@ const Self = class ColorChart extends NudeElement { return this.yResolved.space; }, }, + + info: {}, }; };