js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

backport

Browse Source
This commit is contained in:
Cory LaViska
2023-12-06 17:18:12 -05:00
parent fcf0a136f2
commit 349aa45d2b
5 changed files with 96 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
docs/pages/components/menu-item.md
View File

@@ -60,35 +60,6 @@ const App = () => (
## Examples
### Disabled
Add the `disabled` attribute to disable the menu item so it cannot be selected.
```html:preview
<wa-menu style="max-width: 200px;">
<wa-menu-item>Option 1</wa-menu-item>
<wa-menu-item disabled>Option 2</wa-menu-item>
<wa-menu-item>Option 3</wa-menu-item>
</wa-menu>
```
{% raw %}
```jsx:react
import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
const App = () => (
<WaMenu style={{ maxWidth: '200px' }}>
<WaMenuItem>Option 1</WaMenuItem>
<WaMenuItem disabled>Option 2</WaMenuItem>
<WaMenuItem>Option 3</WaMenuItem>
</WaMenu>
);
```
{% endraw %}
### Prefix & Suffix
Add content to the start and end of menu items using the `prefix` and `suffix` slots.
@@ -151,6 +122,64 @@ const App = () => (
{% endraw %}
### Disabled
Add the `disabled` attribute to disable the menu item so it cannot be selected.
```html:preview
<wa-menu style="max-width: 200px;">
<wa-menu-item>Option 1</wa-menu-item>
<wa-menu-item disabled>Option 2</wa-menu-item>
<wa-menu-item>Option 3</wa-menu-item>
</wa-menu>
```
{% raw %}
```jsx:react
import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
const App = () => (
<WaMenu style={{ maxWidth: '200px' }}>
<WaMenuItem>Option 1</WaMenuItem>
<WaMenuItem disabled>Option 2</WaMenuItem>
<WaMenuItem>Option 3</WaMenuItem>
</WaMenu>
);
```
{% endraw %}
### Loading
Use the `loading` attribute to indicate that a menu item is busy. Like a disabled menu item, clicks will be suppressed until the loading state is removed.
```html:preview
<wa-menu style="max-width: 200px;">
<wa-menu-item>Option 1</wa-menu-item>
<wa-menu-item loading>Option 2</wa-menu-item>
<wa-menu-item>Option 3</wa-menu-item>
</wa-menu>
```
{% raw %}
```jsx:react
import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
const App = () => (
<WaMenu style={{ maxWidth: '200px' }}>
<WaMenuItem>Option 1</WaMenuItem>
<WaMenuItem loading>Option 2</WaMenuItem>
<WaMenuItem>Option 3</WaMenuItem>
</WaMenu>
);
```
{% endraw %}
### Checkbox Menu Items
Set the `type` attribute to `checkbox` to create a menu item that will toggle on and off when selected. You can use the `checked` attribute to set the initial state.

1
docs/pages/resources/changelog.md
View File

@@ -22,6 +22,7 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
## Next
- Added the `loading` attribute and the `spinner` and `spinner__base` part to `<sl-menu-item>` [#1700]
- Added the `hover-bridge` feature to `<sl-popup>` to support better tooltip accessibility [#1734]
- Fixed a bug in `<sl-input>` and `<sl-textarea>` that made it work differently from `<input>` and `<textarea>` when using defaults [#1746]
- Fixed a bug in `<sl-select>` that prevented it from closing when tabbing to another select inside a shadow root [#1763]