diff --git a/demo/index.html b/demo/index.html index 0cd7c10..056fc33 100644 --- a/demo/index.html +++ b/demo/index.html @@ -96,7 +96,7 @@

You can pre-select a value using the selected attribute

You can change the direction in which the menu opens

+

You can apply offset to the menu position

+ + +

A paper-dropdown-menu can be disabled

diff --git a/paper-dropdown-menu-light.html b/paper-dropdown-menu-light.html index 31ea351..103f08b 100644 --- a/paper-dropdown-menu-light.html +++ b/paper-dropdown-menu-light.html @@ -286,7 +286,8 @@ id="menuButton" vertical-align="[[verticalAlign]]" horizontal-align="[[horizontalAlign]]" - vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat)]]" + vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat,verticalOffset)]]" + horizontal-offset="[[horizontalOffset]]" disabled="[[disabled]]" no-animations="[[noAnimations]]" on-iron-select="_onIronSelect" @@ -440,6 +441,28 @@ value: 'top' }, + /** + * A pixel value that will be added to the position calculated for the + * given `horizontalAlign`. Use a negative value to offset to the + * left, or a positive value to offset to the right. + */ + horizontalOffset: { + type: Number, + value: 0, + notify: true + }, + + /** + * A pixel value that will be added to the position calculated for the + * given `verticalAlign`. Use a negative value to offset towards the + * top, or a positive value to offset towards the bottom. + */ + verticalOffset: { + type: Number, + value: 0, + notify: true + }, + hasContent: { type: Boolean, readOnly: true @@ -558,12 +581,12 @@ * @param {boolean} noLabelFloat True if the label should not float * above the input, otherwise false. */ - _computeMenuVerticalOffset: function(noLabelFloat) { + _computeMenuVerticalOffset: function(noLabelFloat, verticalOffset) { // NOTE(cdata): These numbers are somewhat magical because they are // derived from the metrics of elements internal to `paper-input`'s // template. The metrics will change depending on whether or not the // input has a floating label. - return noLabelFloat ? -4 : 8; + return verticalOffset + (noLabelFloat ? -4 : 8); }, /** diff --git a/paper-dropdown-menu.html b/paper-dropdown-menu.html index 4873f9e..8a9a961 100644 --- a/paper-dropdown-menu.html +++ b/paper-dropdown-menu.html @@ -91,7 +91,8 @@ vertical-align="[[verticalAlign]]" horizontal-align="[[horizontalAlign]]" dynamic-align="[[dynamicAlign]]" - vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat)]]" + vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat, verticalOffset)]]" + horizontal-offset="[[horizontalOffset]]" disabled="[[disabled]]" no-animations="[[noAnimations]]" on-iron-select="_onIronSelect" @@ -271,6 +272,28 @@ type: Boolean }, + /** + * A pixel value that will be added to the position calculated for the + * given `horizontalAlign`. Use a negative value to offset to the + * left, or a positive value to offset to the right. + */ + horizontalOffset: { + type: Number, + value: 0, + notify: true + }, + + /** + * A pixel value that will be added to the position calculated for the + * given `verticalAlign`. Use a negative value to offset towards the + * top, or a positive value to offset towards the bottom. + */ + verticalOffset: { + type: Number, + value: 0, + notify: true + }, + /** * Whether focus should be restored to the dropdown when the menu closes. */ @@ -391,12 +414,12 @@ * @param {boolean} noLabelFloat True if the label should not float * above the input, otherwise false. */ - _computeMenuVerticalOffset: function(noLabelFloat) { + _computeMenuVerticalOffset: function(noLabelFloat, verticalOffset) { // NOTE(cdata): These numbers are somewhat magical because they are // derived from the metrics of elements internal to `paper-input`'s // template. The metrics will change depending on whether or not the // input has a floating label. - return noLabelFloat ? -4 : 8; + return verticalOffset + (noLabelFloat ? -4 : 8); }, /**