📝 Docs: Update README - ContextMenuViewExample06

This commit is contained in:
Dominic Go 2022-07-03 14:01:54 +08:00
parent 2338a3e002
commit 337cdcb689

View File

@ -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',
},
}
// ...
}]
}],
}}