-
Notifications
You must be signed in to change notification settings - Fork 209
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(menu): split the various elements into individual docs pages
- Loading branch information
Showing
4 changed files
with
227 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| ## Overview | ||
|
|
||
| An `<sp-menu-group>` will gather a collection of `<sp-menu-item>` elements into a group as part of the content delivered in an `<sp-menu>` element. | ||
|
|
||
| ### Usage | ||
|
|
||
| [](https://www.npmjs.com/package/@spectrum-web-components/menu) | ||
| [](https://bundlephobia.com/result?p=@spectrum-web-components/menu) | ||
|
|
||
| ``` | ||
| yarn add @spectrum-web-components/menu | ||
| ``` | ||
|
|
||
| Import the side effectful registration of `<sp-menu-group>` as follows: | ||
|
|
||
| ``` | ||
| import '@spectrum-web-components/menu/sp-menu-group.js'; | ||
| ``` | ||
|
|
||
| When looking to leverage the `MenuGroup` base class as a type and/or for extension purposes, do so via: | ||
|
|
||
| ``` | ||
| import { MenuGroup } from '@spectrum-web-components/menu'; | ||
| ``` | ||
|
|
||
| ## Example | ||
|
|
||
| An `<sp-menu-group>` can be used to organize `<sp-menu-item>`s in an `<sp-memu>` in to collections with a shared header. Use an element addressed to the `slot="header` to pass the content of that header. | ||
|
|
||
| <!-- prettier-ignore --> | ||
| ```html | ||
| <sp-popover open style="position: relative"> | ||
| <sp-menu> | ||
| <sp-menu-group> | ||
| <span slot="header">New York</span> | ||
| <sp-menu-item> | ||
| Central Park | ||
| </sp-menu-item> | ||
| <sp-menu-item> | ||
| Prospect Park | ||
| </sp-menu-item> | ||
| </sp-menu-group> | ||
| <sp-menu-group> | ||
| <span slot="header">San Fransisco</span> | ||
| <sp-menu-item> | ||
| Golden Gate Park | ||
| </sp-menu-item> | ||
| <sp-menu-item> | ||
| Lake Merced Park | ||
| </sp-menu-item> | ||
| </sp-menu-group> | ||
| </sp-menu> | ||
| </sp-popover> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| ## Overview | ||
|
|
||
| For use within an `<sp-menu>` element, an `<sp-menu-item>` represents a single item in a menu. | ||
|
|
||
| ### Usage | ||
|
|
||
| [](https://www.npmjs.com/package/@spectrum-web-components/menu) | ||
| [](https://bundlephobia.com/result?p=@spectrum-web-components/menu) | ||
|
|
||
| ``` | ||
| yarn add @spectrum-web-components/menu | ||
| ``` | ||
|
|
||
| Import the side effectful registration of `<sp-menu-item>` as follows: | ||
|
|
||
| ``` | ||
| import '@spectrum-web-components/menu/sp-menu-item.js'; | ||
| ``` | ||
|
|
||
| When looking to leverage the `MenuItem` base class as a type and/or for extension purposes, do so via: | ||
|
|
||
| ``` | ||
| import { MenuItem } from '@spectrum-web-components/menu'; | ||
| ``` | ||
|
|
||
| ## Example | ||
|
|
||
| Menus are a collection of `<sp-menu-item>`s that can be modified via a `disabled` or `selected` attribute to represent an item in that state. | ||
|
|
||
| ```html | ||
| <sp-menu> | ||
| <sp-menu-item> | ||
| Active Menu Item | ||
| </sp-menu-item> | ||
| <sp-menu-item disabled> | ||
| Disabled Menu Item | ||
| </sp-menu-item> | ||
| <sp-menu-item selected> | ||
| Selected Menu Item | ||
| </sp-menu-item> | ||
| </sp-menu> | ||
| ``` | ||
|
|
||
| ### Value | ||
|
|
||
| When displayed as a descendent of an element that manages selection (e.g. `<sp-action-menu>`, `<sp-dropdown>`, `<sp-split-button>`, etc.), an `<sp-menu-item>` will represent the "selected" value of that ancestor when its `value` attribute or the trimmed `textContent` (represeted by `el.itemText`) matches the `value` of the ancestor element. | ||
|
|
||
| In the following example, the selected `<sp-menu-item>` represents a `value` of `Text that is really long and useful to a visitor, but not exactly good to use in your application or component state.` for the ancestor element. | ||
|
|
||
| ```html | ||
| <sp-dropdown | ||
| label="Menu items examples" | ||
| value="Text that is really long and useful to a visitor, but not exactly good to use in your application or component state." | ||
| > | ||
| <sp-menu> | ||
| <sp-menu-item> | ||
| Text that is really long and useful to a visitor, but not exactly | ||
| good to use in your application or component state. | ||
| </sp-menu-item> | ||
| <sp-menu-item>Not selected</sp-menu-item> | ||
| </sp-menu> | ||
| </sp-dropdown> | ||
|
|
||
| <sp-action-menu | ||
| value="Text that is really long and useful to a visitor, but not exactly good to use in your application or component state." | ||
| > | ||
| <span slot="label">Menu items examples</span> | ||
| <sp-menu> | ||
| <sp-menu-item> | ||
| Text that is really long and useful to a visitor, but not exactly | ||
| good to use in your application or component state. | ||
| </sp-menu-item> | ||
| <sp-menu-item>Not selected</sp-menu-item> | ||
| </sp-menu> | ||
| </sp-action-menu> | ||
| ``` | ||
|
|
||
| When the `value` attribute is leveraged, the selected `<sp-menu-item>` represents a `value` of `short-key` for the `<sp-action-menu>` element. | ||
|
|
||
| ```html | ||
| <sp-dropdown value="short-key"> | ||
| <span slot="label">Menu items examples</span> | ||
| <sp-menu> | ||
| <sp-menu-item value="not-selected">Not selected</sp-menu-item> | ||
| <sp-menu-item value="short-key"> | ||
| Text that is really long and useful to a visitor, but not exactly | ||
| good to use in your application or component state. | ||
| </sp-menu-item> | ||
| </sp-menu> | ||
| </sp-dropdown> | ||
| <sp-action-menu value="short-key"> | ||
| <span slot="label">Menu items examples</span> | ||
| <sp-menu> | ||
| <sp-menu-item value="not-selected">Not selected</sp-menu-item> | ||
| <sp-menu-item value="short-key"> | ||
| Text that is really long and useful to a visitor, but not exactly | ||
| good to use in your application or component state. | ||
| </sp-menu-item> | ||
| </sp-menu> | ||
| </sp-action-menu> | ||
| ``` |