material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-10-27 06:04:44 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #910 from material-components:better-document-anchor

Browse Source 
PiperOrigin-RevId: 296909678
This commit is contained in:
Copybara-Service 2020-02-24 09:36:26 -08:00
commit 23540389ae
2 changed files with 66 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
demos/menu.html
View File

@ -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>

10
packages/menu/README.md
View File

@ -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%.