Show: Inherited Protected Private Deprecated

# ButtonStyles Class

Defined in: `src/ui/react/src/components/buttons/button-styles.jsx:4`

The ButtonStyles class provides functionality for styling a selection with a list of configurable and customizable styles. The allowed styles follow CKEDITOR.Style configuration (http://docs.ckeditor.com/#!/api/CKEDITOR.style)

## Index

### Methods

- _checkActive
- _getStyles
- render

### Properties

- editor
- expanded
- key static
- label
- showRemoveStylesItem
- styles
- tabIndex
- toggleDropdown

## Methods

### `_checkActive`

(

- `styleConfig`

)
Boolean protected

Defined in `src/ui/react/src/components/buttons/button-styles.jsx:113`

Checks if the given style definition is applied to the current selection in the editor.

#### Parameters:

- `styleConfig` Object

  Style definition as per http://docs.ckeditor.com/#!/api/CKEDITOR.style.

#### Returns:

Boolean:

Returns true if the style is applied to the selection, false otherwise.

### `_getStyles`

() Array
protected

Defined in `src/ui/react/src/components/buttons/button-styles.jsx:133`

Returns an array of styles. Each style consists from two properties:

- name - the style name, for example "h1"
- style - an object with one property, called `element` which value represents the style which have to be applied to the element.

#### Returns:

Array
:

An array of objects containing the styles.

### `render`

() Object

Defined in `src/ui/react/src/components/buttons/button-styles.jsx:77`

Lifecycle. Renders the UI of the button.

#### Returns:

Object:

The content which should be rendered.

## Properties

### `editor`

Object

Defined in `src/ui/react/src/components/buttons/button-styles.jsx:14`

The editor instance where the component is being used.

### `expanded`

Boolean

Defined in `src/ui/react/src/components/buttons/button-styles.jsx:21`

Indicates whether the styles list is expanded or not.

### `key`

String static

Defined in `src/ui/react/src/components/buttons/button-styles.jsx:67`

The name which will be used as an alias of the button in the configuration.

Default: styles

### `label`

String

Defined in `src/ui/react/src/components/buttons/button-styles.jsx:28`

The label that should be used for accessibility purposes.

### `showRemoveStylesItem`

Boolean

Defined in `src/ui/react/src/components/buttons/button-styles.jsx:35`

Indicates whether the remove styles item should appear in the styles list.

### `styles`

Array

Defined in `src/ui/react/src/components/buttons/button-styles.jsx:42`

List of the styles the button is able to handle.

### `tabIndex`

Number

Defined in `src/ui/react/src/components/buttons/button-styles.jsx:49`

The tabIndex of the button in its toolbar current state. A value other than -1 means that the button has focus and is the active element.

### `toggleDropdown`

Function

Defined in `src/ui/react/src/components/buttons/button-styles.jsx:57`

Callback provided by the button host to notify when the styles list has been expanded.