@aurigma/ui-framework/docs/reference/interfaces/idesignselectorconfig.md

A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.

# Interface: IDesignSelectorConfig

Provides gallery properties.

You can use these properties in **params** of the [AuWidgetGallery](../classes/auwidgetgallery.md) class.
```
   {
   "type": "pim-design-selector",
   "name": "pim-design-selector",
   "params": {
      "designs": "{{ $['pim-ajax'].output.designs }}",
      "onChange": "{{ #function console.warn($['pim-design-selector']._); }}",
      "itemWidth": "200px"
    }
  }
```

## Hierarchy

* **IDesignSelectorConfig**

## Index

### Properties

* [designs](idesignselectorconfig.md#designs)
* [itemsPerPage](idesignselectorconfig.md#optional-itemsperpage)
* [onChange](idesignselectorconfig.md#optional-onchange)
* [onItemClick](idesignselectorconfig.md#optional-onitemclick)
* [onItemDoubleClick](idesignselectorconfig.md#optional-onitemdoubleclick)
* [showItemsTitle](idesignselectorconfig.md#optional-showitemstitle)

## Properties

###  designs

• **designs**: *[ProductInformationDesign](../classes/productinformationdesign.md)[]*

An array of designs to display in the gallery.

___

### `Optional` itemsPerPage

• **itemsPerPage**? : *number*

Number of elements per page. Default value is 24.

___

### `Optional` onChange

• **onChange**? : *Function | Array‹Function›*

A single function or an array of functions that will be executed when an item is changed.

___

### `Optional` onItemClick

• **onItemClick**? : *Function | Array‹Function›*

A single function or an array of functions that will be executed when an item is clicked.

___

### `Optional` onItemDoubleClick

• **onItemDoubleClick**? : *Function | Array‹Function›*

A single function or an array of functions that will be executed when an item is double clicked.

___

### `Optional` showItemsTitle

• **showItemsTitle**? : *boolean*

If `true`, displays the title.