📝 Docs: Update README - ContextMenuViewExample06
This commit is contained in:
parent
2338a3e002
commit
337cdcb689
40
README.md
40
README.md
@ -1275,6 +1275,16 @@ export function ContextMenuViewExample05(props) {
|
||||
|
||||
### `ContextMenuView` Example 06
|
||||
|
||||
**Summary**: A context menu that has a destructive submenu.
|
||||
|
||||
<br>
|
||||
|
||||
| Notes |
|
||||
| ------------------------------------------------------------ |
|
||||
| You can set the menu options via the `MenuConfig.menuOptions` property. It accepts an array of `UIMenuOptions` strings (e.g. `destructive`, `displayInline`).<br><br>If you pass in `['destructive']` to `menuOptions`, it will tint the submenu to red (but it's menu items won't be affected). |
|
||||
|
||||
<br>
|
||||
|
||||
[🔗 Full Example](example/src/examples/ContextMenuViewExample06.tsx)
|
||||
|
||||
```jsx
|
||||
@ -1289,42 +1299,24 @@ export function ContextMenuViewExample06(props) {
|
||||
menuItems: [{
|
||||
actionKey : 'key-01',
|
||||
actionTitle: 'Action #1',
|
||||
icon: {
|
||||
type: 'IMAGE_SYSTEM',
|
||||
imageValue: {
|
||||
systemName: 'folder',
|
||||
},
|
||||
}
|
||||
// ...
|
||||
}, {
|
||||
menuTitle: 'Submenu...',
|
||||
// Create an "destructive" submenu by adding
|
||||
// `destructive` in the menu options...
|
||||
menuOptions: ['destructive'],
|
||||
menuItems: [{
|
||||
actionKey : 'key-01-01',
|
||||
actionTitle: 'Submenu Action #1',
|
||||
icon: {
|
||||
type: 'IMAGE_SYSTEM',
|
||||
imageValue: {
|
||||
systemName: 'star',
|
||||
},
|
||||
}
|
||||
// ...
|
||||
}, {
|
||||
actionKey : 'key-01-02',
|
||||
actionTitle: 'Submenu Action #2',
|
||||
icon: {
|
||||
type: 'IMAGE_SYSTEM',
|
||||
imageValue: {
|
||||
systemName: 'star.lefthalf.fill',
|
||||
},
|
||||
}
|
||||
// ...
|
||||
}, {
|
||||
actionKey : 'key-01-03',
|
||||
actionTitle: 'Submenu Action #3',
|
||||
icon: {
|
||||
type: 'IMAGE_SYSTEM',
|
||||
imageValue: {
|
||||
systemName: 'star.fill',
|
||||
},
|
||||
}
|
||||
// ...
|
||||
}]
|
||||
}],
|
||||
}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user