mirror of
https://github.com/material-components/material-web.git
synced 2024-10-27 06:04:44 +03:00
fix(menu): x and y correctly set anchor margins
fixes #949 PiperOrigin-RevId: 298909721
This commit is contained in:
Elliott Marquez
Copybara-Service
parent
edd465cd61
commit
2b02d01711
@ -45,6 +45,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
|
||||
- `mwc-textfield` will not set `value` on the internal input tag on `input` event causing caret jumping in Safari
|
||||
- `mwc-select`'s `--mdc-select-ink-color` actually does something now
|
||||
- Setting `disabled` on `mwc-ripple` will hide the ripple
|
||||
- mwc-menu's x and y anchor margins now work for all corners
|
||||
|
||||
## [0.13.0] - 2020-02-03
|
||||
|
||||
|
||||
@ -228,26 +228,26 @@ so the default slot has the same interface as the default slot of `mwc-list`.
|
||||
|
||||
### Properties/Attributes
|
||||
|
||||
| Name | Type | Default | Description
|
||||
| --------------------- | ------------------ | -------- |------------
|
||||
| `open` | `boolean` | `false` | Whether the menu should open and display.
|
||||
| `anchor` | `HTMLElement\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.
|
||||
| `corner` | `Corner`* | `"TOP_START"` | Corner of the anchor from which the menu should position itself.
|
||||
| `quick` | `boolean` | `false` | Whether to skip the opening animation.
|
||||
| `absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.
|
||||
| `fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.
|
||||
| `x` | `number\|null` | `null` | Modifies `left` on the menu. Requires `y` not to be null.
|
||||
| `y` | `number\|null` | `null` | Modifies `top` on the menu. Requires `x` not to be null.
|
||||
| `forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.
|
||||
| `defaultFocus` | `DefaultFocusState`** | `"LIST_ROOT"` | Item to focus upon menu open.
|
||||
| `fullwidth` | `boolean` | `false` | Sets surface width to 100%.
|
||||
| `wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.
|
||||
| `innerRole` | `"menu"|"listbox"` | `"menu"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.
|
||||
| `multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.
|
||||
| `activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.
|
||||
| `items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.
|
||||
| `index` | `MWCListIndex` (readonly)\*\*\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.
|
||||
| `selected` | `SelectedType` (readonly)\*\*\*\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.
|
||||
Name | Type | Default | Description
|
||||
--------------------- | --------------------------------- | ------------- | -----------
|
||||
`open` | `boolean` | `false` | Whether the menu should open and display.
|
||||
`anchor` | `HTMLElement\|null` | `null` | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.
|
||||
`corner` | `Corner`* | `"TOP_START"` | Corner of the anchor from which the menu should position itself.
|
||||
`quick` | `boolean` | `false` | Whether to skip the opening animation.
|
||||
`absolute` | `boolean` | `false` | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.
|
||||
`fixed` | `boolean` | `false` | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.
|
||||
`x` | `number\|null` | `null` | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.
|
||||
`y` | `number\|null` | `null` | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.
|
||||
`forceGroupSelection` | `boolean` | `false` | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.
|
||||
`defaultFocus` | `DefaultFocusState`** | `"LIST_ROOT"` | Item to focus upon menu open.
|
||||
`fullwidth` | `boolean` | `false` | Sets surface width to 100%.
|
||||
`wrapFocus` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.
|
||||
`innerRole` | `"menu" | "listbox"` | `"menu"`
|
||||
`multi` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.
|
||||
`activatable` | `boolean` | `false` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.
|
||||
`items` | `ListItemBase[]` (readonly) | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.
|
||||
`index` | `MWCListIndex` (readonly)\*\*\* | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.
|
||||
`selected` | `SelectedType` (readonly)\*\*\*\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.
|
||||
|
||||
\* `Corner` is equivalent to type
|
||||
`"TOP_LEFT"|"TOP_RIGHT"|"BOTTOM_LEFT"|"BOTTOM_RIGHT"|"TOP_START"|"TOP_END" |"BOTTOM_START"|"BOTTOM_END"`
|
||||
|
||||
@ -26,6 +26,18 @@ import {classMap} from 'lit-html/directives/class-map.js';
|
||||
export type Corner = keyof typeof CornerEnum;
|
||||
export type AnchorableElement = HTMLElement&{anchor: Element | null};
|
||||
|
||||
// required for closure compiler
|
||||
const stringToCorner = {
|
||||
'TOP_LEFT': CornerEnum.TOP_LEFT,
|
||||
'TOP_RIGHT': CornerEnum.TOP_RIGHT,
|
||||
'BOTTOM_LEFT': CornerEnum.BOTTOM_LEFT,
|
||||
'BOTTOM_RIGHT': CornerEnum.BOTTOM_RIGHT,
|
||||
'TOP_START': CornerEnum.TOP_START,
|
||||
'TOP_END': CornerEnum.TOP_END,
|
||||
'BOTTOM_START': CornerEnum.BOTTOM_START,
|
||||
'BOTTOM_END': CornerEnum.BOTTOM_END,
|
||||
};
|
||||
|
||||
/**
|
||||
* @fires opened
|
||||
* @fires closed
|
||||
@ -77,7 +89,8 @@ export abstract class MenuSurfaceBase extends BaseElement {
|
||||
@observer(function(this: MenuSurfaceBase, value: number|null) {
|
||||
if (this.mdcFoundation && this.y !== null && value !== null) {
|
||||
this.mdcFoundation.setAbsolutePosition(value, this.y);
|
||||
this.mdcFoundation.setAnchorMargin({left: value, top: this.y});
|
||||
this.mdcFoundation.setAnchorMargin(
|
||||
{left: value, top: this.y, right: -value, bottom: this.y});
|
||||
}
|
||||
})
|
||||
x: number|null = null;
|
||||
@ -86,7 +99,8 @@ export abstract class MenuSurfaceBase extends BaseElement {
|
||||
@observer(function(this: MenuSurfaceBase, value: number|null) {
|
||||
if (this.mdcFoundation && this.x !== null && value !== null) {
|
||||
this.mdcFoundation.setAbsolutePosition(this.x, value);
|
||||
this.mdcFoundation.setAnchorMargin({left: this.x, top: value});
|
||||
this.mdcFoundation.setAnchorMargin(
|
||||
{left: this.x, top: value, right: -this.x, bottom: value});
|
||||
}
|
||||
})
|
||||
y: number|null = null;
|
||||
@ -113,10 +127,10 @@ export abstract class MenuSurfaceBase extends BaseElement {
|
||||
open = false;
|
||||
|
||||
@property({type: String})
|
||||
@observer(function(this: MenuSurfaceBase, value: Corner|null) {
|
||||
@observer(function(this: MenuSurfaceBase, value: Corner) {
|
||||
if (this.mdcFoundation) {
|
||||
if (value) {
|
||||
this.mdcFoundation.setAnchorCorner(CornerEnum[value]);
|
||||
this.mdcFoundation.setAnchorCorner(stringToCorner[value]);
|
||||
} else {
|
||||
this.mdcFoundation.setAnchorCorner(CornerEnum.TOP_START);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user