# Class: DropdownView

## module:core.dropdown.views. DropdownView

Composite View that implements dropdown logic similar to SELECT HTML-element. Unlike PopoutView, a panel doesn't have a speech bubble triangle and it's min-width is always determined and equal to the width of a button view. A dropdown view contains button and panel regions that can be fully customizable by the properties `buttonView` and `panelView`.

- Button View is used for displaying a button. Click on that button trigger a panel to open.
- Panel View is used to display a panel that drops down.

Panel width is determined by its layout but it cannot be less than the button's width. Panel height is fully determined by its layout. A place where the panel appears depends on the `panelPosition` option.
Possible events:

- `'open' (dropdownView)` - fires after the panel has opened.
- `'close' (dropdownView, ...)` - fires after the panel has closed. If the panel was closed via `close(...)` method, the arguments of this method are transferred into this event.
- `'button:\*'` - all events the buttonView triggers are repeated by this view with 'button:' prefix.
- `'panel:\*'` - all events the panelView triggers are repeated by this view with 'panel:' prefix.

#### new DropdownView(options)

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---

  `options`

  Object

  Options object.

  ###### Properties

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `buttonView` | Marionette.View |  |  | View class for displaying the button.
  `buttonViewOptions` | Object | function | <optional> |  | Options passed into the view on its creation.
  `panelView` | Marionette.View |  |  | View class for displaying the panel. The view is created every time the panel is triggered to open.
  `panelViewOptions` | Object | function | <optional> |  | Options passed into the view on its creation.
  `autoOpen` | Boolean | <optional> | true | Whether click on the button should trigger the panel to open.

  `panelPosition`

  String

  <optional>

  'down'

  Opening direction:
  - `'down'` - opens down.
  - `'down-over'` - opens down and the panel is located above the button overlapping it.
  - `'up'` - opens up.
  - `'up-over'` - opens up and the panel is located above the button overlapping it.

  `renderAfterClose` | Boolean | <optional> | true | Whether to trigger button render when the panel has closed.

### Extends

- Marionette.LayoutView

### Members

#### buttonView

  Contains an instance of `options.buttonView` if the dropdown is rendered, `null` otherwise.

#### panelView

  Contains an instance of `options.panelView` if the dropdown is open, `null` otherwise. The view is created every time (!) the panel is triggered to open.

### Methods

#### close(arguments)

  Closes the dropdown panel.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `arguments` | * | <repeatable> | Arguments transferred into the `'close'` event.

#### open()

  Opens the dropdown panel.

#### Search results