mirror of
https://github.com/slint-ui/slint.git
synced 2025-10-17 13:58:05 +00:00
material: PopupMenu: Changes (https://github.com/slint-ui/material-components/issues/158)
Imported from 81415330ff
This commit is contained in:
parent
f9f872c5e5
commit
f368b401dc
8 changed files with 37 additions and 19 deletions
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
|
||||
title: MenuItem
|
||||
description: MenuItem content
|
||||
---
|
||||
|
||||
`MenuItem`
|
||||
|
||||
This structure represents a MenuItem with an icon, text, trailing text, and enabled state.
|
||||
|
||||
- **`icon`** (_image_): The icon to display in the item.
|
||||
- **`text`** (_string_): The text to display in the item.
|
||||
- **`trailing_text`** (_string_): The trailing text to display in the item.
|
||||
- **`enabled`** (_bool_): Whether the item is enabled.
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
|
||||
title: Menu
|
||||
description: Menu API.
|
||||
title: PopupMenu
|
||||
description: PopupMenu API.
|
||||
---
|
||||
|
||||
import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
|
||||
|
@ -9,12 +9,12 @@ import SlintProperty from '/src/components/SlintProperty.astro';
|
|||
|
||||
<CodeSnippetMD imagePath="/src/assets/generated/menu2.png" scale="3" imageWidth="300" imageHeight="200" imageAlt="">
|
||||
```slint
|
||||
import { Menu } from "./material.slint";
|
||||
import { PopupMenu } from "./material.slint";
|
||||
export component Example inherits Window {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
background: transparent;
|
||||
Menu {
|
||||
PopupMenu {
|
||||
width: 280px;
|
||||
height: parent.height;
|
||||
items: [
|
||||
|
@ -27,7 +27,7 @@ export component Example inherits Window {
|
|||
```
|
||||
</CodeSnippetMD>
|
||||
|
||||
A `Menu` display a list of choices on a temporary surface.
|
||||
A `PopupMenu` to display a list of choices on a temporary surface.
|
||||
|
||||
## Properties
|
||||
|
||||
|
@ -38,5 +38,5 @@ An array of menu items, each containing an icon, a text, and a trailing text.
|
|||
|
||||
## Callbacks
|
||||
|
||||
### item_clicked(index: int)
|
||||
### activated(index: int)
|
||||
Invoked when a menu item is clicked
|
|
@ -7,6 +7,7 @@ import IconButtonItem from "../../collections/structs/IconButtonItem.md"
|
|||
import ListItem from "../../collections/structs/ListItem.md"
|
||||
import SegmentedItem from "../../collections/structs/SegmentedItem.md"
|
||||
import Time from "../../collections/structs/Time.md"
|
||||
import MenuItem from "../../collections/structs/MenuItem.md"
|
||||
import NavigationItem from "../../collections/structs/NavigationItem.md"
|
||||
import NavigationGroup from "../../collections/structs/NavigationGroup.md"
|
||||
|
||||
|
@ -23,6 +24,9 @@ import ScrollBarPolicy from "../../collections/enums/ScrollBarPolicy.md"
|
|||
### ListItem
|
||||
<ListItem />
|
||||
|
||||
### MenuItem
|
||||
<MenuItem />
|
||||
|
||||
### NavigationItem
|
||||
<NavigationItem />
|
||||
|
||||
|
|
|
@ -15,7 +15,7 @@ import {
|
|||
NavigationItem,
|
||||
NavigationBar,
|
||||
SmallAppBar,
|
||||
Menu,
|
||||
PopupMenu,
|
||||
MenuItem,
|
||||
MaterialStyleMetrics
|
||||
} from "../../../../material.slint";
|
||||
|
@ -71,12 +71,12 @@ export component MainView {
|
|||
}
|
||||
}
|
||||
|
||||
color_menu := Menu {
|
||||
color_menu := PopupMenu {
|
||||
x: root.width - MaterialStyleMetrics.size_200 - MaterialStyleMetrics.padding_16;
|
||||
y: app_bar.height / 2;
|
||||
items: MainViewAdapter.palettes;
|
||||
|
||||
item_clicked(index) => {
|
||||
activated(index) => {
|
||||
MainViewAdapter.load_palette(index);
|
||||
color_menu.close();
|
||||
}
|
||||
|
|
|
@ -31,7 +31,7 @@ import {
|
|||
Slider,
|
||||
TextField,
|
||||
RadioButtonTile,
|
||||
Menu,
|
||||
PopupMenu,
|
||||
DropDownMenu,
|
||||
MenuItem,
|
||||
DatePickerPopup
|
||||
|
@ -439,7 +439,7 @@ export component NavigationView {
|
|||
}
|
||||
|
||||
|
||||
menu := Menu {
|
||||
menu := PopupMenu {
|
||||
x: menu_button.x + menu_button.width / 2;
|
||||
y: menu_button.y + menu_button.height / 2;
|
||||
items: [
|
||||
|
|
|
@ -30,7 +30,7 @@ export { Avatar, ListTile } from "./ui/components/list.slint";
|
|||
export { ListView } from "./ui/components/list_view.slint";
|
||||
export { MaterialText } from "./ui/components/material_text.slint";
|
||||
export { MaterialWindow, MaterialWindowAdapter } from "./ui/components/material_window.slint";
|
||||
export { Menu } from "./ui/components/menu.slint";
|
||||
export { PopupMenu } from "./ui/components/menu.slint";
|
||||
export { NavigationBar } from "./ui/components/navigation_bar.slint";
|
||||
export { NavigationDrawer, ModalNavigationDrawer } from "./ui/components/navigation_drawer.slint";
|
||||
export { NavigationRail } from "./ui/components/navigation_rail.slint";
|
||||
|
|
|
@ -93,7 +93,7 @@ export component DropDownMenu {
|
|||
current_index: root.current_index;
|
||||
items: root.items;
|
||||
|
||||
item_clicked(index) => {
|
||||
activated(index) => {
|
||||
root.update_selection(index);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -82,7 +82,7 @@ export component MenuInner {
|
|||
in property <[MenuItem]> items;
|
||||
in_out property <int> current_index: -1;
|
||||
|
||||
callback item_clicked(index: int);
|
||||
callback activated(index: int);
|
||||
|
||||
// used to fix clipping of shadows
|
||||
out property <int> elevation: 2;
|
||||
|
@ -107,17 +107,17 @@ export component MenuInner {
|
|||
selected: index == root.current_index;
|
||||
|
||||
clicked => {
|
||||
root.item_clicked(index);
|
||||
root.activated(index);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export component Menu inherits PopupWindow {
|
||||
export component PopupMenu inherits PopupWindow {
|
||||
in property <[MenuItem]> items;
|
||||
|
||||
callback item_clicked(index: int);
|
||||
callback activated(index: int);
|
||||
|
||||
width: MaterialStyleMetrics.size_200;
|
||||
close_policy: close_on_click_outside;
|
||||
|
@ -128,8 +128,8 @@ export component Menu inherits PopupWindow {
|
|||
inner := MenuInner {
|
||||
items: root.items;
|
||||
|
||||
item_clicked(index) => {
|
||||
root.item_clicked(index);
|
||||
activated(index) => {
|
||||
root.activated(index);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue