mirror of
https://github.com/material-components/material-web.git
synced 2024-10-27 06:04:44 +03:00
Merge pull request #910 from material-components:better-document-anchor
PiperOrigin-RevId: 296909678
This commit is contained in:
commit
23540389ae
@ -118,33 +118,37 @@ limitations under the License.
|
||||
</div>
|
||||
|
||||
<div class="scrollable">
|
||||
<mwc-button id="fixedButton" raised label="Open Fixed Menu"></mwc-button>
|
||||
<mwc-menu fixed id="fixedMenu">
|
||||
<mwc-list-item>one</mwc-list-item>
|
||||
<mwc-list-item>two</mwc-list-item>
|
||||
<mwc-list-item>three</mwc-list-item>
|
||||
<mwc-list-item disabled><div>four</div></mwc-list-item>
|
||||
<li divider></li>
|
||||
<mwc-list-item>aaa</mwc-list-item>
|
||||
<mwc-list-item>bbb</mwc-list-item>
|
||||
</mwc-menu>
|
||||
<span>
|
||||
<mwc-button id="fixedButton" raised label="Open Fixed Menu"></mwc-button>
|
||||
<mwc-menu fixed id="fixedMenu">
|
||||
<mwc-list-item>one</mwc-list-item>
|
||||
<mwc-list-item>two</mwc-list-item>
|
||||
<mwc-list-item>three</mwc-list-item>
|
||||
<mwc-list-item disabled><div>four</div></mwc-list-item>
|
||||
<li divider></li>
|
||||
<mwc-list-item>aaa</mwc-list-item>
|
||||
<mwc-list-item>bbb</mwc-list-item>
|
||||
</mwc-menu>
|
||||
</span>
|
||||
|
||||
<mwc-button id="nonfixedButton" raised label="Open Non-Fixed Menu"></mwc-button>
|
||||
<mwc-menu id="nonfixedMenu">
|
||||
<mwc-list-item>one</mwc-list-item>
|
||||
<mwc-list-item>two</mwc-list-item>
|
||||
<mwc-list-item>three</mwc-list-item>
|
||||
<mwc-list-item disabled><div>four</div></mwc-list-item>
|
||||
<li divider></li>
|
||||
<mwc-list-item>aaa</mwc-list-item>
|
||||
<mwc-list-item>bbb</mwc-list-item>
|
||||
</mwc-menu>
|
||||
<span style="position:relative;">
|
||||
<mwc-button id="nonfixedButton" raised label="Open Non-Fixed Menu"></mwc-button>
|
||||
<mwc-menu id="nonfixedMenu">
|
||||
<mwc-list-item>one</mwc-list-item>
|
||||
<mwc-list-item>two</mwc-list-item>
|
||||
<mwc-list-item>three</mwc-list-item>
|
||||
<mwc-list-item disabled><div>four</div></mwc-list-item>
|
||||
<li divider></li>
|
||||
<mwc-list-item>aaa</mwc-list-item>
|
||||
<mwc-list-item>bbb</mwc-list-item>
|
||||
</mwc-menu>
|
||||
</span>
|
||||
<div>Open each menu and then scroll this div</div>
|
||||
<div class="spacer"></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<mwc-button id="absoluteButton" raised label="Open Absolute Menu"></mwc-button>
|
||||
<mwc-button id="absoluteButton" raised label="Open Absolute Menu (no anchor)"></mwc-button>
|
||||
<mwc-menu
|
||||
absolute
|
||||
x="0"
|
||||
@ -257,6 +261,32 @@ limitations under the License.
|
||||
<mwc-list-item value="LAST_ITEM">LAST_ITEM</mwc-list-item>
|
||||
</mwc-select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>
|
||||
Absolute w/ anchor
|
||||
</h3>
|
||||
<div>This is reusing the same menu and changing the anchor</div>
|
||||
<mwc-button
|
||||
id="absoluteLeftButton"
|
||||
raised
|
||||
label="anchor = this">
|
||||
</mwc-button>
|
||||
<mwc-button
|
||||
id="absoluteRightButton"
|
||||
raised
|
||||
label="anchor = this">
|
||||
</mwc-button>
|
||||
<mwc-menu absolute id="absoluteAnchorMenu">
|
||||
<mwc-list-item>one</mwc-list-item>
|
||||
<mwc-list-item>two</mwc-list-item>
|
||||
<mwc-list-item>three</mwc-list-item>
|
||||
<mwc-list-item disabled><div>four</div></mwc-list-item>
|
||||
<li divider></li>
|
||||
<mwc-list-item>aaa</mwc-list-item>
|
||||
<mwc-list-item>bbb</mwc-list-item>
|
||||
</mwc-menu>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
basicMenu.anchor = basicButton;
|
||||
@ -333,6 +363,16 @@ limitations under the License.
|
||||
dfsMenu.open = !dfsMenu.open;
|
||||
});
|
||||
|
||||
absoluteLeftButton.addEventListener('click', function (e) {
|
||||
absoluteAnchorMenu.anchor = absoluteLeftButton;
|
||||
absoluteAnchorMenu.open = !absoluteAnchorMenu.open;
|
||||
});
|
||||
|
||||
absoluteRightButton.addEventListener('click', function (e) {
|
||||
absoluteAnchorMenu.anchor = absoluteRightButton;
|
||||
absoluteAnchorMenu.open = !absoluteAnchorMenu.open;
|
||||
});
|
||||
|
||||
addEventListener('load', function() { document.body.classList.remove('unresolved'); });
|
||||
</script>
|
||||
</body>
|
||||
|
@ -228,16 +228,16 @@ so the default slot has the same interface as the default slot of `mwc-list`.
|
||||
|
||||
### Properties/Attributes
|
||||
|
||||
| Name | Type | Default | Description
|
||||
| --------------------- | -------------- | ------- |------------
|
||||
| Name | Type | Default | Description
|
||||
| --------------------- | ------------------ | -------- |------------
|
||||
| `open` | `boolean` | `false` | Whether the menu should open and display.
|
||||
| `anchor` | `HTMLElement|null` | `null` | Determines which element the floating menu should anchor to. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`.
|
||||
| `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.
|
||||
| `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%.
|
||||
|
Loading…
Reference in New Issue
Block a user