mirror of
https://github.com/slint-ui/slint.git
synced 2025-10-23 00:32:46 +00:00
a3dad45f0b
- Rename `accessible-selectable` and `accessible-selected` to `accessible-item-{selectable,selected}`.
Because the property is for items in list rather than eg Text
- Rename `accessible-position-in-set` to `accessible-item-index`.
- Rename `accessible-size-of-set` to `accessible-item-count` and move
the property to the container element rather than the item itself
95 lines
2.6 KiB
Text
95 lines
2.6 KiB
Text
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
|
// SPDX-License-Identifier: MIT
|
|
|
|
import { StateLayer } from "../components/state_layer.slint";
|
|
import { ScrollView } from "scroll_view.slint";
|
|
import { Theme } from "../theme.slint";
|
|
import { Images } from "../images.slint";
|
|
import { StateLayer } from "../components/state_layer.slint";
|
|
|
|
component ListViewItem {
|
|
in property <string> text <=> i-text.text;
|
|
in property <bool> selected;
|
|
|
|
callback clicked <=> i-state-layer.clicked;
|
|
|
|
min-height: 40px;
|
|
|
|
states [
|
|
selected when selected : {
|
|
i-container.border-color: Theme.palette.lemon-green;
|
|
i-icon.visible: true;
|
|
}
|
|
]
|
|
|
|
i-container := Rectangle {
|
|
background: Theme.palette.dark-deep-blue;
|
|
border-radius: 4px;
|
|
border-width: 1px;
|
|
border-color: Theme.palette.slint-blue-400;
|
|
}
|
|
|
|
HorizontalLayout {
|
|
padding-left: Theme.spaces.medium;
|
|
padding-top: Theme.spaces.medium;
|
|
padding-bottom: Theme.spaces.medium;
|
|
padding-right: Theme.spaces.medium;
|
|
spacing: Theme.spaces.medium;
|
|
accessible-role: list-item;
|
|
accessible-item-selectable: true;
|
|
accessible-item-selected: root.selected;
|
|
|
|
i-text := Text {
|
|
horizontal-stretch: 1;
|
|
color: Theme.palette.white;
|
|
font-size: Theme.typo.description.size;
|
|
font-weight: Theme.typo.description.weight;
|
|
vertical-alignment: center;
|
|
}
|
|
|
|
i-icon := Image {
|
|
horizontal-stretch: 0;
|
|
visible: false;
|
|
source: Images.check;
|
|
colorize: Theme.palette.lemon-green;
|
|
}
|
|
}
|
|
|
|
i-state-layer := StateLayer {
|
|
width: i-container.width;
|
|
height: i-container.height;
|
|
border-radius: i-container.border-radius;
|
|
}
|
|
}
|
|
|
|
export component ListView {
|
|
in property <[StandardListViewItem]> model;
|
|
in-out property <int> selected-index;
|
|
|
|
callback selection-changed(/* index */ int);
|
|
|
|
function select(index: int) {
|
|
selected-index = index;
|
|
selection-changed(index);
|
|
}
|
|
|
|
i-scroll-view := ScrollView {
|
|
i-blub := VerticalLayout {
|
|
alignment: start;
|
|
spacing: Theme.spaces.medium;
|
|
|
|
for item[index] in model : ListViewItem {
|
|
clicked => {
|
|
select(index);
|
|
}
|
|
|
|
private property <length> offset: i-scroll-view.viewport-y + index * (self.height + parent.spacing);
|
|
|
|
text: item.text;
|
|
selected: index == selected-index;
|
|
|
|
animate opacity { duration: Theme.durations.fast; }
|
|
}
|
|
}
|
|
}
|
|
}
|