DropDownButton

Version: 9.0

A DropDownButton control displays a button that users can click. It has two states: open and closed. The DropDownButton control displays the current state with an arrow. When it is in the open state, the arrow points up, when it is in the closed state, the arrow points down. The DropDownButton control toggles between these two states each time a user clicks the button.

A DropDownButton control adds a placeholder called Content. It displays all controls that you put in this placeholder when it is in the open state. You can add any SPEAK component to this placeholder.

Note

When users click any control in the Content placeholder, the click event is raised for both the clicked control and the DropDownButton control. This means that the DropDownButton control toggles to the closed state.

If you set the ButtonType property to Primary, SPEAK makes it stand out visually. You can set the size of a button to normal or large with the Dimensions property.

You should specify Primary as the button type of buttons that users click to carry out the main purpose of a page, and you should specify Default for other buttons. You can also set the ButtonType property to Inverse. An Inverse button type uses the same colors as a Default button type, but swaps the text and background colors.

Buttons can display icons as well as text, and they can display both at the same time.

You specify icons using the ImageUrl property. You can use the same icons here as when you select an icon for an item in the content tree. Button controls also support defining the icon as a “sprite,” selected from a sprite sheet. The ImageUrl property stores the URL of the sprite sheet, and the BackgroundPosition property stores the coordinates of the desired sprite (icon/image).

If you use both an icon and text, SPEAK positions the icon to the left of the text. You cannot change this position.

Properties

Name

Description

Default

Appearance

BackgroundPosition

Specify the offset of the sprite/icon/image in a sprite sheet file in this format:

-<x>px -<y>px

Where <x> indicates the horizontal number of pixels from the left edge of the sprite sheet to the left edge of the sprite (represented as a negative number), and <y> indicates the vertical number of pixels from the top edge of the sprite sheet (represented as a negative number) to the top edge of the sprite.

-0px -0px

ButtonType

Specify Default, Primary, or Inverse.

Default

ContentAlignment

Specify how the content in the Content placeholder is aligned: Left or Right.

Left

ImageUrl

Specify the Sitecore path of an icon (for example, Network/16x16/home.png for the icon shown for the /sitecore/content/home item) or sprite sheet. SPEAK provides a number of sprite sheets in the img folder, \sitecore\shell\client\Speak\Assets\img (found in the Website folder).

Text

Specify the text you want displayed on the DropDownButton control. You can enter a static text, set the text from page code or you can bind to a property of another control.

Events

Click

Specify JavaScript that SPEAK executes when a user clicks the button.

Configuration

You can create a configuration item for a DropDownButton control by creating an item based on the DropDownButton Parameters template.

The configuration item has these specific fields:

  • ButtonType

  • Text – this field corresponds to the Text property, and you use the field to make it easier to translate UI texts.

  • ImageUrl

  • BackgroundPosition

  • ContentAlignment

It inherits these fields:

  • Click

  • IsEnabled

  • IsVisible

  • AccessKey

  • Tooltip

  • Behaviors

  • Id

Do you have some feedback for us?

If you have suggestions for improving this article,