language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-08-04 18:58:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Update Menu docs

Browse source 
Apply suggestions from code review

Co-authored-by: Simon Hausmann <simon.hausmann@slint.dev>
This commit is contained in:
Olivier Goffart 2025-01-30 22:38:34 +01:00
parent 54832b7463
commit b68f7bdf9a
2 changed files with 42 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

30
docs/astro/src/content/docs/reference/window/contextmenu.mdx
View file

@ -1,19 +1,18 @@
---
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
title: Window
description: Window element api.
title: ContextMenu
description: ContextMenu element api.
---
import SlintProperty from '/src/components/SlintProperty.astro';
import Link from '/src/components/Link.astro';
`ContextMenu` is an invisible element that is used to show a context menu.
Use the non-visual `ContextMenu` element to declare a context menu.
The context menu is shown if the user right-clicks on the area covered by the `ContextMenu` element,
or if the user presses the "Menu" key on their keyboard while a `FocusScope` within the `ContextMenu` is focused.
It is also possible to show the context menu by calling the `show` function on the `ContextMenu` element.
or if the user presses the "Menu" key on their keyboard while a `FocusScope` within the `ContextMenu` has focus.
Call the `show()` function on the `ContextMenu` element to programmatically show the context menu.
In addition to normal sub elements, the `ContextMenu` element can contain `MenuItem` elements.
The MenuItem elements are defining the actual menu.
Define the structure of the menu by placing `MenuItem` elements into the `ContextMenu`.
## Function
@ -38,7 +37,10 @@ The label of the entry within the menu.
#### activated()
Invoked when the menu entry is activated.
This is only called if the menu entry doesn't have submenus
:::note{Note}
This is only called if the menu entry doesn't have submenus.
:::
## Example
@ -46,17 +48,17 @@ This is only called if the menu entry doesn't have submenus
export component Example {
ContextMenu {
MenuItem {
title: "Copy";
title: @tr("Cut");
activated => { debug("Cut"); }
}
MenuItem {
title: @tr("Copy");
activated => { debug("Copy"); }
}
MenuItem {
title: "Paste";
title: @tr("Paste");
activated => { debug("Paste"); }
}
MenuItem {
title: "Cut";
activated => { debug("Cut"); }
}
}
}
```

36
docs/astro/src/content/docs/reference/window/window.mdx
View file

@ -61,14 +61,18 @@ The window title that is shown in the title bar.
## `MenuBar` element
A `Window` can contain one `MenuBar` element. This special element is used to create a menu bar for that window.
Place a single `MenuBar` element into a `Window` to declare a menu bar for the window.
:::note{Note}
There can only be one `MenuBar` element in a `Window` and it must not be in a `for` or a `if`.
:::
The `MenuBar` doesn't have properties, but it should contain <Link type="MenuItem" /> as children that represent top level entries in the menu bar.
Each `MenuItem` can contain further `MenuItem` as children that represent sub-menu
Nest `MenuItem` elements to declare sub-menus.
Depending on the platform, the menu bar might be native or rendered by Slint.
This means that for example, on MacOs, the menu bar be in top bar on the desktop where application usually have their top bar.
The `width` and `height` property of the `Window` are the one of the client area, without counting the menu bar.
This means that for example, on macOS, the menu bar will be at the top of the screen.
The `width` and `height` property of the `Window` define the client area, excluding the menu bar.
The `x` and `y` properties of `Window` children are also relative to the client area.
### Example
@ -77,21 +81,33 @@ The `x` and `y` properties of `Window` children are also relative to the client
export component Example inherits Window {
MenuBar {
MenuItem {
title: "File";
title: @tr("File");
MenuItem {
title: "New";
title: @tr("New");
}
MenuItem {
title: "Open";
title: @tr("Open");
}
}
MenuItem {
title: "Edit";
title: @tr("Edit");
MenuItem {
title: "Copy";
title: @tr("Copy");
}
MenuItem {
title: "Paste";
title: @tr("Paste");
}
MenuItem {
title: @tr("Find");
MenuItem {
title: @tr("Find in document...");
}
MenuItem {
title: @tr("Find Next");
}
MenuItem {
title: @tr("Find Previous");
}
}
}
}