language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-10-28 10:49:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

material: added FliterChip

Browse source
This commit is contained in:
FloVanGH 2025-04-07 11:31:46 +02:00
parent 1a8eb5c2f3
commit bb72cceb6b
4 changed files with 72 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

9
component-sets/material/examples/gallery/ui/views/navigation_view.slint
View file

@ -333,8 +333,9 @@ export component NavigationView {
icon: OutlinedIcons.calendar_month;
}
FilterChip {
fc := FilterChip {
checked: true;
text: "Filter";
}
InputChip {
@ -354,7 +355,9 @@ export component NavigationView {
}
FilterChip {
checked: fc.checked;
text: "Filter";
enabled: false;
}
InputChip {

62
component-sets/material/ui/components/chip.slint
View file

@ -5,6 +5,8 @@ import { BaseButton } from "./base_button.slint";
import { Typography } from "../styling/typography.slint";
import { MaterialPalette } from "../styling/material_palette.slint";
import { MaterialStyleMetrics } from "../styling/material_style_metrics.slint";
import { Icons } from "../icons/icons.slint";
import { Animations } from "../styling/animations.slint";
export component ActionChip {
in property <image> icon <=> base.icon;
@ -16,6 +18,7 @@ export component ActionChip {
callback clicked <=> base.clicked;
forward-focus: base;
accessible-role: button;
accessible-enabled: root.enabled;
accessible-label: root.text == "" ? root.tooltip : root.text;
@ -47,8 +50,65 @@ export component ActionChip {
]
}
export component FilterChip {
export component FilterChip {
in property <string> text <=> base.text;
in property <bool> enabled <=> base.enabled;
in property <string> tooltip <=> base.tooltip;
in_out property <bool> checked;
forward-focus: base;
accessible-role: button;
accessible-enabled: root.enabled;
accessible-label: root.text == "" ? root.tooltip : root.text;
accessible-checkable: true;
accessible-checked: root.checked;
accessible-action-default => { base.clicked(); }
border := Rectangle {
border_radius: base.border_radius;
border_width: 1px;
border_color: MaterialPalette.outline;
base := BaseButton {
min_layout_height: MaterialStyleMetrics.size_32;
border_radius: MaterialStyleMetrics.border_radius_8;
color: MaterialPalette.on_surface;
icon_color: MaterialPalette.primary;
spacing: MaterialStyleMetrics.spacing_8;
padding_left: self.has_icon ? MaterialStyleMetrics.padding_8 : MaterialStyleMetrics.padding_16;
padding_right:MaterialStyleMetrics.padding_16;
vertical_padding: MaterialStyleMetrics.padding_6;
avatar_size: MaterialStyleMetrics.size_18;
clicked => {
root.toggle();
}
}
states [
checked when root.checked : {
base.icon: Icons.check;
base.icon_color: MaterialPalette.on_secondary_container;
base.color: MaterialPalette.on_secondary_container;
border.border_width: 0;
border.background: MaterialPalette.secondary_container;
}
]
animate width { duration: Animations.standard_accelerate_duration; easing: Animations.standard_easing; }
}
function toggle() {
root.checked = !root.checked;
}
states [
disabled when !root.enabled : {
base.display_background: false;
base.icon_color: MaterialPalette.on_surface;
}
]
}
export component InputChip {

4
component-sets/material/ui/components/segmented_button.slint
View file

@ -5,6 +5,7 @@ import { MaterialStyleMetrics } from "../styling/material_style_metrics.slint";
import { MaterialPalette } from "../styling/material_palette.slint";
import { BaseButton } from "base_button.slint";
import { Icons } from "../icons/icons.slint";
import { Animations } from "../styling/animations.slint";
export struct SegmentedItem {
icon: image,
@ -39,6 +40,9 @@ component SegmentedItemTemplate {
spacing: MaterialStyleMetrics.spacing_8;
icon: root.icon;
text: root.text;
animate width { duration: Animations.standard_accelerate_duration; easing: Animations.standard_easing; }
}
if !root.last : Rectangle {

2
component-sets/material/ui/components/state_layer.slint
View file

@ -96,7 +96,7 @@ export component StateLayerArea inherits TouchArea {
callback key_pressed(KeyEvent) -> EventResult;
forward-focus: focus-scope;
forward-focus: focus_scope;
focus_scope := FocusScope {
x: 0;