New to KendoReactStart a free 30-day trial

ColorGradientProps

Represents the props of the KendoReact ColorGradient component.

NameTypeDefaultDescription

ariaDescribedBy?

string

Identifies the element(s) which will describe the component, similar to HTML aria-describedby attribute. For example these elements could contain error or hint message.

ariaLabel?

string

Represent the label of the component.

ariaLabelHSV?

string

Represents the label of the hsv drag handle component used inside the ColorGradient.

ariaLabelledBy?

string

Identifies the element(s) which will label the component.

ariaValueText?

string

Represents the text rendered inside the hsv drag handle.

backgroundColor?

string

Enables the color contrast tool. Sets the background color that will be compared to the selected value. The tool will calculate the contrast ratio between two colors. Currently, only the RGBA format is supported.

className?

string

Sets additional classes to the ColorGradient.

defaultValue?

string

The default value of the ColorGradient.

disabled?

boolean

Determines whether the ColorGradient is disabled (more information and example).

jsx
class App extends React.Component {
   render() {
      return (
          <ColorGradient disabled={true} />
      );
   }
}
ReactDOM.render(<App />, document.querySelector('my-app'));

format?

"hex" | "rgba" | "rgb"

'rgb'

Sets the default input format in the gradient input editor.

gradientSliderSmallStep?

number

2

Determines the step (in pixels) when moving the gradient drag handle using the keyboard arrow keys while holding the shift key.

gradientSliderStep?

number

5

Determines the step (in pixels) when moving the gradient drag handle using the keyboard arrow keys.

id?

string

Specifies the id of the component.

onChange?

(event: ColorGradientChangeEvent) => void

Determines the event handler that will be fired when the user edits the value.

onFocus?

(event: any) => void

Represents the focus event.

opacity?

boolean

Determines whether the alpha slider and the alpha input will be displayed. Defaults to true.

size?

"null" | "small" | "large" | "medium"

medium

Configures the size of the ColorGradient.

The available options are:

  • small
  • medium
  • large
  • null—This option removes the the built-in size styles of the ColorGradient. Allows for custom padding.

style?

React.CSSProperties

The styles that are applied to the ColorGradient.

tabIndex?

number

Sets the tabIndex property of the ColorGradient.

value?

string

The value of the ColorGradient.

Not finding the help you need?
Contact Support