In Magento UI library the dropdown does not depend on the toggle tag. To toggle the drop-down, the corresponding tag must have class="action toggle"
.
To implement a drop-down using a button + drop-down, use the following markup:
To implement a drop-down using a span + drop-down, use the following markup:
.example-dropdown-1 {
.lib-dropdown();
}
.example-dropdown-2 {
.lib-dropdown();
}
Mixin variable | Default value | Allowed values | Comment |
---|---|---|---|
@_dropdown-actions-padding | false | '' | false | value | Drop-down toggle element padding |
Drop-down list | |||
@_dropdown-list-position-top | 100% | '' | false | value | Drop-down list position: top |
@_dropdown-list-position-right | false | '' | false | value | Drop-down list position: right |
@_dropdown-list-position-bottom | false | '' | false | value | Drop-down list position: bottom |
@_dropdown-list-position-left | false | '' | false | value | Drop-down list position: left |
@_dropdown-list-background | @color-white | '' | false | value | Drop-down list background |
@_dropdown-list-border | 1px solid #bbb | '' | false | value | Drop-down list border |
@_dropdown-list-pointer | true | true | false | Drop-down list pointer is visible |
@_dropdown-list-pointer-border | #bbb | '' | false | value | Drop-down list pointer border |
@_dropdown-list-item-border | 0 | '' | false | value | Drop-down list item border |
@_dropdown-list-item-padding | 3px 5px | '' | false | value | Drop-down list item padding |
@_dropdown-list-item-margin | 0 | '' | false | value | Drop-down list item margin |
@_dropdown-list-item-hover | #e8e8e8 | '' | false | value | Drop-down list item hovered background |
@_dropdown-list-shadow | 0 3px 3px rgba(0,0,0,.15) | '' | false | value | Drop-down list shadow |
@_dropdown-list-z-index | 100 | '' | false | value | Drop-down list z-index |
Drop-down icon | |||
@_dropdown-toggle-icon-content | @icon-pointer-down | '' | false | value | Drop-down toggle icon symbol code for default state |
@_dropdown-toggle-active-icon-content | @icon-pointer-up | '' | false | value | Drop-down toggle icon symbol code for active state |
@_icon-font | @button-icon__font | '' | false | value | Drop-down toggle icon font |
@_icon-font-size | @button-icon__font-size | '' | false | value | Drop-down toggle icon font size |
@_icon-font-line-height | @button-icon__line-height | '' | false | value | Drop-down toggle icon line height |
@_icon-font-color | @button-icon__color | '' | false | value | Drop-down toggle icon color |
@_icon-font-color-hover | @button-icon__hover__font-color | '' | false | value | Drop-down toggle icon hovered color |
@_icon-font-color-active | @button-icon__active__font-color | '' | false | value | Drop-down toggle icon active color |
@_icon-font-margin | @button-icon__margin | '' | false | value | Drop-down toggle icon margin |
@_icon-font-position | after | before | after | Drop-down toggle icon position |
@_icon-font-vertical-align | @button-icon__vertical-align | '' | false | value | Drop-down toggle icon vertical align |
@_icon-font-text-hide | @button-icon__text-hide | true | false | Text in the tag, that contains icon, is hidden |
To customize drop-down icon symbol, specify variables for default state icon code and active state icon code:
@_dropdown-toggle-icon-content: @icon-expand,
@_dropdown-toggle-active-icon-content: @icon-collapse
The .lib-dropdown()
mixin uses the .icon-font()
mixin to display and customize toggle icon. More information about .icon-font()
mixin parameters you can find at the Icons page
.example-dropdown-3 {
.lib-dropdown(
@_dropdown-toggle-icon-content: @icon-expand,
@_dropdown-toggle-active-icon-content: @icon-collapse,
@_icon-font-line-height: 1,
@_icon-font-position: before,
@_icon-font-color: #f00,
@_icon-font-color-hover: #f00
);
}
.example-dropdown-5 {
.lib-dropdown(
@_dropdown-list-pointer: false,
@_dropdown-list-background: #eef1f3,
@_dropdown-list-item-hover: #d8e3e3,
@_dropdown-list-border: 2px solid #ced1d4,
@_dropdown-list-item-padding: 10px,
@_dropdown-list-item-border: 2px solid #e8eaed,
@_dropdown-list-shadow: none,
@_icon-font-line-height: 1
);
}
Split button can be formed of two buttons or a link and a button. The first element (link or button) must have class="action split"
, the toggle element must have class="action toggle"
.
.example-dropdown-6 {
.lib-dropdown-split(
@_dropdown-split-button-border-radius-fix: true
);
}
.split.example-dropdown-7 {
.lib-dropdown-split();
}
Mixin variable | Default value | Allowed values | Comment |
---|---|---|---|
@_dropdown-split-actions-padding | 0 @indent__xs | '' | false | value | Split button toggle element padding |
@_dropdown-split-toggle-position | right | '' | false | value | Split button toggle element position |
Drop-down list | |||
@_dropdown-split-list-position-top | @dropdown-list__position-top | '' | false | value | Split button drop-down list position: top |
@_dropdown-split-list-position-right | @dropdown-list__position-right | '' | false | value | Split button drop-down list position: right |
@_dropdown-split-list-position-bottom | @dropdown-list__position-bottom | '' | false | value | Split button drop-down list position: bottom |
@_dropdown-split-list-position-left | @dropdown-list__position-left | '' | false | value | Split button drop-down list position: left |
@_dropdown-split-list-background | @dropdown-list__background | '' | false | value | Split button drop-down background |
@_dropdown-split-list-border | @dropdown-list__border | '' | false | value | Split button drop-down border |
@_dropdown-split-list-pointer | @dropdown-list__pointer | '' | false | value | Split button drop-down list pointer |
@_dropdown-split-list-pointer-border | @dropdown-list-pointer__border | '' | false | value | Split button drop-down list pointer border |
@_dropdown-split-button-border-radius-fix | false | true | false | Split button drop-down list item border |
@_dropdown-split-list-item-border | @dropdown-list-item__border | '' | false | value | Split button drop-down list item border |
@_dropdown-split-list-item-padding | @dropdown-list-item__padding | '' | false | value | Split button drop-down list item padding |
@_dropdown-split-list-item-margin | @dropdown-list-item__margin | '' | false | value | Split button drop-down list item margin |
@_dropdown-split-list-item-hover | @dropdown-list-item__hover | '' | false | value | Split button drop-down list item hovered background |
@_dropdown-split-list-shadow | @dropdown-list__shadow | '' | false | value | Split button drop-down list shadow |
@_dropdown-split-list-z-index | @dropdown-list__z-index | '' | false | value | Split button drop-down list z-index |
Dropdown icon | |||
@_dropdown-split-toggle-icon-content | @dropdown-toggle-icon__content | '' | false | value | Split button drop-down toggle icon - default state |
@_dropdown-split-toggle-active-icon-content | @dropdown-toggle-icon__active__content | '' | false | value | Split button drop-down toggle icon - active state |
@_icon-font | @button-icon__font | '' | false | value | Split button drop-down toggle icon font |
@_icon-font-size | @button-icon__font-size | '' | false | value | Split button drop-down toggle icon font size |
@_icon-font-line-height | @button-icon__line-height | '' | false | value | Split button drop-down toggle icon line height |
@_icon-font-color | @button-icon__color | '' | false | value | Split button drop-down toggle icon color |
@_icon-font-color-hover | @button-icon__hover__font-color | '' | false | value | Split button drop-down toggle icon hovered color |
@_icon-font-color-active | @button-icon__active__font-color | '' | false | value | Split button drop-down toggle icon active color |
@_icon-font-margin | @button-icon__margin | '' | false | value | Split button drop-down toggle icon margin |
@_icon-font-position | after | before | after | Split button drop-down toggle icon position |
@_icon-font-vertical-align | @button-icon__vertical-align | '' | false | value | Split button drop-down toggle icon vertical align |
@_icon-font-text-hide | @button-icon__text-hide | true | false | The text in the toggle tag is hidden |
Split buttons can be customized the same way as all types of buttons from Magento UI library.
Regular button:
Big button:
Small button:
.example-dropdown-8 {
.lib-dropdown-split(@_dropdown-split-button-border-radius-fix: true);
}
.example-dropdown-9 {
.action.split,
.action.toggle {
.lib-button-l();
}
.lib-dropdown-split(@_dropdown-split-button-border-radius-fix: true);
}
.example-dropdown-10 {
.action.split,
.action.toggle {
.lib-button-s();
}
.lib-dropdown-split(@_dropdown-split-button-border-radius-fix: true);
}
Mixin .lib-dropdown-split()
uses .icon-font()
mixin to customize icon. More information about .icon-font()
parameters you can find at Icons page
.example-dropdown-11 {
.lib-dropdown-split(
@_dropdown-split-toggle-position: left,
@_dropdown-split-button-border-radius-fix: true,
@_dropdown-split-toggle-icon-content: @icon-expand,
@_dropdown-split-toggle-active-icon-content: @icon-collapse,
@_icon-font-position: before,
@_icon-font-color: red,
@_icon-font-color-hover: red
);
}
.example-dropdown-12 {
.lib-dropdown-split(
@_dropdown-split-list-pointer: false,
@_dropdown-split-list-background: #eef1f3,
@_dropdown-split-list-item-hover: #d8e3e3,
@_dropdown-split-list-border: 2px solid #ced1d4,
@_dropdown-split-list-item-padding: 10px,
@_dropdown-split-list-item-border: 2px solid #e8eaed,
@_dropdown-split-list-shadow: none,
@_dropdown-split-button-border-radius-fix: true
);
}