Skip to main content

Web2PrintGradientAttributeController

You get this controller when useAttribute(...) resolves a Web2Print gradient attribute. A gradient value holds a primary color, a secondary color, and a direction ("left_to_right" or "top_to_bottom"). Colors are normalized to the attribute's configured output color spaces on the way in.

import { useAttribute } from "@expivi/product-configurator";

const attribute = useAttribute(configurator, attributeCid);

Editing and previewing a gradient​

Set the whole value with setValue(...), or change one part at a time with setGradientProperty(...). Use getGradientCSS() to render a live preview.

attribute.setValue({
  primaryColor: "#ff0000",
  secondaryColor: "#0000ff",
  direction: "left_to_right",
});

attribute.setGradientProperty("direction", "top_to_bottom");

previewEl.style.background = attribute.getGradientCSS();

API​

setGradientProperty(property, value): void​

Updates one field of the gradient value (primaryColor, secondaryColor, or direction), keeping the rest. Color values are normalized to the internal format and then converted to the output color spaces before storing.

configuredValue: Web2PrintGradientConfiguredValue | undefined​

The first configured gradient value, if present.

gradientSettings: GradientPrintSettings | null | undefined​

The raw gradient settings object.

colorSpaces: string[]​

The output color spaces from settings (empty array when unset).

getPaletteColors(): Promise<PaletteColor[]>​

Loads colors from every palette referenced by the gradient settings. Empty array when none are configured.

resetGradient(): void​

Resets the gradient to the settings defaults (default_primary_color, default_secondary_color, default_direction), falling back to white and left_to_right.

getGradientCSS(): string​

Returns a CSS linear-gradient(...) string for previews, e.g. linear-gradient(to right, #ff0000 0%, #0000ff 100%).

getInternalColor(colorValue: string): string​

Normalizes a stored color value into the internal color format.

For all other members, see the Common Attribute API.