add menu illustrations

This commit is contained in:
Mads Rasmussen
2023-03-01 19:00:17 +01:00
parent f8f881083f
commit 46664a6fa9
3 changed files with 53 additions and 2 deletions

View File

@@ -0,0 +1,13 @@
<svg width="70" height="74" viewBox="0 0 70 74" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="70" height="74" fill="white"/>
<path d="M11 58L14.4641 64H7.5359L11 58Z" fill="#848484"/>
<rect x="20" y="60" width="40" height="2" fill="#848484"/>
<path d="M11 42L14.4641 48H7.5359L11 42Z" fill="#848484"/>
<rect x="20" y="44" width="40" height="2" fill="#848484"/>
<path d="M11 26L14.4641 32H7.5359L11 26Z" fill="#848484"/>
<rect x="20" y="28" width="40" height="2" fill="#848484"/>
<path d="M11 10L14.4641 16H7.5359L11 10Z" fill="#848484"/>
<rect x="20" y="12" width="40" height="2" fill="#848484"/>
<path opacity="0.8" d="M0 0H70V22H0V0Z" fill="#D9D9D9"/>
<path opacity="0.8" d="M0 36H70V74H0V36Z" fill="#D9D9D9"/>
</svg>

After

Width:  |  Height:  |  Size: 735 B

View File

@@ -0,0 +1,11 @@
<svg width="70" height="74" viewBox="0 0 70 74" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="70" height="74" fill="white"/>
<path d="M11 58L14.4641 64H7.5359L11 58Z" fill="#848484"/>
<rect x="20" y="60" width="40" height="2" fill="#848484"/>
<path d="M11 42L14.4641 48H7.5359L11 42Z" fill="#848484"/>
<rect x="20" y="44" width="40" height="2" fill="#848484"/>
<path d="M11 26L14.4641 32H7.5359L11 26Z" fill="#848484"/>
<rect x="20" y="28" width="40" height="2" fill="#848484"/>
<path d="M11 10L14.4641 16H7.5359L11 10Z" fill="#848484"/>
<rect x="20" y="12" width="40" height="2" fill="#848484"/>
</svg>

After

Width:  |  Height:  |  Size: 619 B

View File

@@ -7,7 +7,7 @@ import { Meta } from '@storybook/addon-docs';
TODO: introduction to the menu
The menu is still work in progress
<img src="docs/section.svg" width="400" />
<img src="docs/menu.svg" width="150" />
```json
{
@@ -21,7 +21,7 @@ The menu is still work in progress
TODO: introduction to the menu item
<img src="docs/section.svg" width="400" />
<img src="docs/menu-item.svg" width="150" />
```json
{
@@ -35,6 +35,33 @@ TODO: introduction to the menu item
}
```
#### Tree Menu Item
// TODO adds docs when we have extension kinds
**Manifest**
```json
// it will be something like this
{
"type": "menuItem",
"kind": "tree",
"alias": "My.TreeMenuItem",
"name": "My Tree Menu Item",
"meta": {
"label": "My Tree Menu Item",
"menus": ["My.Menu"]
}
}
```
**Default Element**
```ts
// get interface
interface UmbTreeMenuItemElement {}
```
#### Adding menu items to an existing menu
The backoffice comes with a couple of menus.