-
This commit is contained in:
me
489
ui/demo.slint
489
ui/demo.slint
@@ -10,6 +10,16 @@ import { Item } from "components/item.slint";
|
|||||||
import { Sidebar, NavItem } from "components/sidebar.slint";
|
import { Sidebar, NavItem } from "components/sidebar.slint";
|
||||||
import { Dialog } from "components/dialog.slint";
|
import { Dialog } from "components/dialog.slint";
|
||||||
import { ToastContainer, ToastMessage } from "components/toast.slint";
|
import { ToastContainer, ToastMessage } from "components/toast.slint";
|
||||||
|
import { Accordion, AccordionItemData } from "components/accordion.slint";
|
||||||
|
import { Switch } from "components/switch.slint";
|
||||||
|
import { Progress } from "components/progress.slint";
|
||||||
|
import { Select, SelectOption } from "components/select.slint";
|
||||||
|
import { Tabs, TabItem, TabContent } from "components/tabs.slint";
|
||||||
|
import { Label, LabelSize, LabelColor } from "components/label.slint";
|
||||||
|
import { Separator, Orientation } from "components/separator.slint";
|
||||||
|
import { StatusIndicator, StatusState } from "components/status-indicator.slint";
|
||||||
|
import { Tooltip } from "components/tooltip.slint";
|
||||||
|
import { Empty } from "components/empty.slint";
|
||||||
|
|
||||||
export component Demo inherits Window {
|
export component Demo inherits Window {
|
||||||
title: "Slint Shadcn UI - Task Manager Demo";
|
title: "Slint Shadcn UI - Task Manager Demo";
|
||||||
@@ -27,6 +37,18 @@ export component Demo inherits Window {
|
|||||||
in-out property <bool> sidebar-collapsed: false;
|
in-out property <bool> sidebar-collapsed: false;
|
||||||
in-out property <bool> dialog-open: false;
|
in-out property <bool> dialog-open: false;
|
||||||
in-out property <[ToastMessage]> toasts: [];
|
in-out property <[ToastMessage]> toasts: [];
|
||||||
|
|
||||||
|
// Component showcase state
|
||||||
|
in-out property <bool> switch-checked: false;
|
||||||
|
in-out property <float> progress-value: 65;
|
||||||
|
in-out property <int> selected-option: -1;
|
||||||
|
in-out property <int> current-tab: 0;
|
||||||
|
in-out property <bool> tooltip-visible: false;
|
||||||
|
in-out property <[AccordionItemData]> accordion-items: [
|
||||||
|
{ title: "What is Slint?", expanded: false },
|
||||||
|
{ title: "How do I get started?", expanded: false },
|
||||||
|
{ title: "Can I use it in production?", expanded: false },
|
||||||
|
];
|
||||||
|
|
||||||
// Sidebar navigation items
|
// Sidebar navigation items
|
||||||
property <[NavItem]> nav-items: [
|
property <[NavItem]> nav-items: [
|
||||||
@@ -395,41 +417,41 @@ export component Demo inherits Window {
|
|||||||
CardTitle { text: "Dialog & Toast"; }
|
CardTitle { text: "Dialog & Toast"; }
|
||||||
CardDescription { text: "Modal dialogs and notification toasts"; }
|
CardDescription { text: "Modal dialogs and notification toasts"; }
|
||||||
}
|
}
|
||||||
|
|
||||||
CardContent {
|
CardContent {
|
||||||
HorizontalLayout {
|
HorizontalLayout {
|
||||||
spacing: SpacingSystem.spacing.s2;
|
spacing: SpacingSystem.spacing.s2;
|
||||||
|
|
||||||
Button {
|
Button {
|
||||||
text: "Open Dialog";
|
text: "Open Dialog";
|
||||||
|
|
||||||
clicked => {
|
clicked => {
|
||||||
dialog-open = true;
|
dialog-open = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Button {
|
Button {
|
||||||
text: "Show Success Toast";
|
text: "Show Success Toast";
|
||||||
variant: "outline";
|
variant: "outline";
|
||||||
|
|
||||||
clicked => {
|
clicked => {
|
||||||
root.show-toast("Operation successful!", "success");
|
root.show-toast("Operation successful!", "success");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Button {
|
Button {
|
||||||
text: "Show Error Toast";
|
text: "Show Error Toast";
|
||||||
variant: "outline";
|
variant: "outline";
|
||||||
|
|
||||||
clicked => {
|
clicked => {
|
||||||
root.show-toast("Something went wrong!", "error");
|
root.show-toast("Something went wrong!", "error");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Button {
|
Button {
|
||||||
text: "Show Warning Toast";
|
text: "Show Warning Toast";
|
||||||
variant: "outline";
|
variant: "outline";
|
||||||
|
|
||||||
clicked => {
|
clicked => {
|
||||||
root.show-toast("Please be careful!", "warning");
|
root.show-toast("Please be careful!", "warning");
|
||||||
}
|
}
|
||||||
@@ -437,6 +459,455 @@ export component Demo inherits Window {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Switch showcase
|
||||||
|
Card {
|
||||||
|
CardHeader {
|
||||||
|
CardTitle { text: "Switch Component"; }
|
||||||
|
CardDescription { text: "Toggle switches for boolean settings"; }
|
||||||
|
}
|
||||||
|
|
||||||
|
CardContent {
|
||||||
|
VerticalLayout {
|
||||||
|
spacing: SpacingSystem.spacing.s4;
|
||||||
|
|
||||||
|
HorizontalLayout {
|
||||||
|
spacing: SpacingSystem.spacing.s3;
|
||||||
|
alignment: start;
|
||||||
|
|
||||||
|
Switch {
|
||||||
|
checked: switch-checked;
|
||||||
|
toggled(new-state) => {
|
||||||
|
switch-checked = new-state;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Text {
|
||||||
|
text: switch-checked ? "Enabled" : "Disabled";
|
||||||
|
color: Theme.colors.foreground;
|
||||||
|
font-size: Typography.sizes.sm;
|
||||||
|
vertical-alignment: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
HorizontalLayout {
|
||||||
|
spacing: SpacingSystem.spacing.s3;
|
||||||
|
alignment: start;
|
||||||
|
|
||||||
|
Switch {
|
||||||
|
checked: true;
|
||||||
|
enabled: false;
|
||||||
|
}
|
||||||
|
|
||||||
|
Text {
|
||||||
|
text: "Disabled (checked)";
|
||||||
|
color: Theme.colors.muted-foreground;
|
||||||
|
font-size: Typography.sizes.sm;
|
||||||
|
vertical-alignment: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Progress showcase
|
||||||
|
Card {
|
||||||
|
CardHeader {
|
||||||
|
CardTitle { text: "Progress Component"; }
|
||||||
|
CardDescription { text: "Progress bars for loading states"; }
|
||||||
|
}
|
||||||
|
|
||||||
|
CardContent {
|
||||||
|
VerticalLayout {
|
||||||
|
spacing: SpacingSystem.spacing.s4;
|
||||||
|
|
||||||
|
Progress {
|
||||||
|
value: progress-value;
|
||||||
|
}
|
||||||
|
|
||||||
|
Progress {
|
||||||
|
value: progress-value;
|
||||||
|
show-label: true;
|
||||||
|
}
|
||||||
|
|
||||||
|
HorizontalLayout {
|
||||||
|
spacing: SpacingSystem.spacing.s2;
|
||||||
|
|
||||||
|
Button {
|
||||||
|
text: "Increase";
|
||||||
|
size: "sm";
|
||||||
|
clicked => {
|
||||||
|
progress-value = Math.min(100, progress-value + 10);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Button {
|
||||||
|
text: "Decrease";
|
||||||
|
size: "sm";
|
||||||
|
variant: "outline";
|
||||||
|
clicked => {
|
||||||
|
progress-value = Math.max(0, progress-value - 10);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Button {
|
||||||
|
text: "Reset";
|
||||||
|
size: "sm";
|
||||||
|
variant: "ghost";
|
||||||
|
clicked => {
|
||||||
|
progress-value = 65;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Select showcase
|
||||||
|
Card {
|
||||||
|
CardHeader {
|
||||||
|
CardTitle { text: "Select Component"; }
|
||||||
|
CardDescription { text: "Dropdown select menus"; }
|
||||||
|
}
|
||||||
|
|
||||||
|
CardContent {
|
||||||
|
VerticalLayout {
|
||||||
|
spacing: SpacingSystem.spacing.s4;
|
||||||
|
|
||||||
|
Select {
|
||||||
|
options: [
|
||||||
|
{ label: "Apple", value: "apple" },
|
||||||
|
{ label: "Banana", value: "banana" },
|
||||||
|
{ label: "Cherry", value: "cherry" },
|
||||||
|
{ label: "Date", value: "date" },
|
||||||
|
];
|
||||||
|
selected-index: selected-option;
|
||||||
|
placeholder: "Select a fruit...";
|
||||||
|
|
||||||
|
selected(index, value) => {
|
||||||
|
selected-option = index;
|
||||||
|
root.show-toast("Selected: " + value, "default");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Select {
|
||||||
|
options: [
|
||||||
|
{ label: "Option 1", value: "1" },
|
||||||
|
{ label: "Option 2", value: "2" },
|
||||||
|
];
|
||||||
|
enabled: false;
|
||||||
|
placeholder: "Disabled select";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tabs showcase
|
||||||
|
Card {
|
||||||
|
CardHeader {
|
||||||
|
CardTitle { text: "Tabs Component"; }
|
||||||
|
CardDescription { text: "Tabbed navigation interface"; }
|
||||||
|
}
|
||||||
|
|
||||||
|
CardContent {
|
||||||
|
Tabs {
|
||||||
|
tabs: [
|
||||||
|
{ title: "Account" },
|
||||||
|
{ title: "Password" },
|
||||||
|
{ title: "Settings" },
|
||||||
|
];
|
||||||
|
current-index: current-tab;
|
||||||
|
|
||||||
|
tab-changed(index) => {
|
||||||
|
current-tab = index;
|
||||||
|
}
|
||||||
|
|
||||||
|
TabContent {
|
||||||
|
index: 0;
|
||||||
|
current-index: current-tab;
|
||||||
|
|
||||||
|
VerticalLayout {
|
||||||
|
spacing: SpacingSystem.spacing.s3;
|
||||||
|
padding: SpacingSystem.spacing.s4;
|
||||||
|
|
||||||
|
Text {
|
||||||
|
text: "Account Settings";
|
||||||
|
font-size: Typography.sizes.base;
|
||||||
|
font-weight: Typography.weights.semibold;
|
||||||
|
color: Theme.colors.foreground;
|
||||||
|
}
|
||||||
|
|
||||||
|
Text {
|
||||||
|
text: "Manage your account settings and preferences.";
|
||||||
|
font-size: Typography.sizes.sm;
|
||||||
|
color: Theme.colors.muted-foreground;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
TabContent {
|
||||||
|
index: 1;
|
||||||
|
current-index: current-tab;
|
||||||
|
|
||||||
|
VerticalLayout {
|
||||||
|
spacing: SpacingSystem.spacing.s3;
|
||||||
|
padding: SpacingSystem.spacing.s4;
|
||||||
|
|
||||||
|
Text {
|
||||||
|
text: "Password Settings";
|
||||||
|
font-size: Typography.sizes.base;
|
||||||
|
font-weight: Typography.weights.semibold;
|
||||||
|
color: Theme.colors.foreground;
|
||||||
|
}
|
||||||
|
|
||||||
|
Text {
|
||||||
|
text: "Change your password and security settings.";
|
||||||
|
font-size: Typography.sizes.sm;
|
||||||
|
color: Theme.colors.muted-foreground;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
TabContent {
|
||||||
|
index: 2;
|
||||||
|
current-index: current-tab;
|
||||||
|
|
||||||
|
VerticalLayout {
|
||||||
|
spacing: SpacingSystem.spacing.s3;
|
||||||
|
padding: SpacingSystem.spacing.s4;
|
||||||
|
|
||||||
|
Text {
|
||||||
|
text: "General Settings";
|
||||||
|
font-size: Typography.sizes.base;
|
||||||
|
font-weight: Typography.weights.semibold;
|
||||||
|
color: Theme.colors.foreground;
|
||||||
|
}
|
||||||
|
|
||||||
|
Text {
|
||||||
|
text: "Configure general application settings.";
|
||||||
|
font-size: Typography.sizes.sm;
|
||||||
|
color: Theme.colors.muted-foreground;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Label showcase
|
||||||
|
Card {
|
||||||
|
CardHeader {
|
||||||
|
CardTitle { text: "Label Component"; }
|
||||||
|
CardDescription { text: "Text labels with various sizes and colors"; }
|
||||||
|
}
|
||||||
|
|
||||||
|
CardContent {
|
||||||
|
VerticalLayout {
|
||||||
|
spacing: SpacingSystem.spacing.s4;
|
||||||
|
|
||||||
|
// Sizes
|
||||||
|
HorizontalLayout {
|
||||||
|
spacing: SpacingSystem.spacing.s3;
|
||||||
|
alignment: center;
|
||||||
|
|
||||||
|
Label { text: "Extra Small"; size: LabelSize.xs; }
|
||||||
|
Label { text: "Small"; size: LabelSize.sm; }
|
||||||
|
Label { text: "Base"; size: LabelSize.base; }
|
||||||
|
Label { text: "Large"; size: LabelSize.lg; }
|
||||||
|
Label { text: "Extra Large"; size: LabelSize.xl; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Colors
|
||||||
|
HorizontalLayout {
|
||||||
|
spacing: SpacingSystem.spacing.s3;
|
||||||
|
|
||||||
|
Label { text: "Foreground"; color-variant: LabelColor.foreground; }
|
||||||
|
Label { text: "Muted"; color-variant: LabelColor.muted; }
|
||||||
|
Label { text: "Primary"; color-variant: LabelColor.primary; }
|
||||||
|
Label { text: "Destructive"; color-variant: LabelColor.destructive; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Separator showcase
|
||||||
|
Card {
|
||||||
|
CardHeader {
|
||||||
|
CardTitle { text: "Separator Component"; }
|
||||||
|
CardDescription { text: "Visual dividers for content sections"; }
|
||||||
|
}
|
||||||
|
|
||||||
|
CardContent {
|
||||||
|
VerticalLayout {
|
||||||
|
spacing: SpacingSystem.spacing.s4;
|
||||||
|
|
||||||
|
Text {
|
||||||
|
text: "Horizontal Separator";
|
||||||
|
font-size: Typography.sizes.sm;
|
||||||
|
color: Theme.colors.muted-foreground;
|
||||||
|
}
|
||||||
|
|
||||||
|
Separator { orientation: Orientation.horizontal; }
|
||||||
|
|
||||||
|
HorizontalLayout {
|
||||||
|
spacing: SpacingSystem.spacing.s4;
|
||||||
|
height: 60px;
|
||||||
|
|
||||||
|
Text {
|
||||||
|
text: "Vertical";
|
||||||
|
font-size: Typography.sizes.sm;
|
||||||
|
color: Theme.colors.muted-foreground;
|
||||||
|
vertical-alignment: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
Separator { orientation: Orientation.vertical; }
|
||||||
|
|
||||||
|
Text {
|
||||||
|
text: "Separator";
|
||||||
|
font-size: Typography.sizes.sm;
|
||||||
|
color: Theme.colors.muted-foreground;
|
||||||
|
vertical-alignment: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Status Indicator showcase
|
||||||
|
Card {
|
||||||
|
CardHeader {
|
||||||
|
CardTitle { text: "Status Indicator Component"; }
|
||||||
|
CardDescription { text: "Animated status indicators"; }
|
||||||
|
}
|
||||||
|
|
||||||
|
CardContent {
|
||||||
|
HorizontalLayout {
|
||||||
|
spacing: SpacingSystem.spacing.s6;
|
||||||
|
|
||||||
|
HorizontalLayout {
|
||||||
|
spacing: SpacingSystem.spacing.s2;
|
||||||
|
alignment: center;
|
||||||
|
|
||||||
|
StatusIndicator { state: StatusState.stopped; }
|
||||||
|
Text {
|
||||||
|
text: "Stopped";
|
||||||
|
font-size: Typography.sizes.sm;
|
||||||
|
color: Theme.colors.foreground;
|
||||||
|
vertical-alignment: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
HorizontalLayout {
|
||||||
|
spacing: SpacingSystem.spacing.s2;
|
||||||
|
alignment: center;
|
||||||
|
|
||||||
|
StatusIndicator { state: StatusState.starting; }
|
||||||
|
Text {
|
||||||
|
text: "Starting";
|
||||||
|
font-size: Typography.sizes.sm;
|
||||||
|
color: Theme.colors.foreground;
|
||||||
|
vertical-alignment: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
HorizontalLayout {
|
||||||
|
spacing: SpacingSystem.spacing.s2;
|
||||||
|
alignment: center;
|
||||||
|
|
||||||
|
StatusIndicator { state: StatusState.running; }
|
||||||
|
Text {
|
||||||
|
text: "Running";
|
||||||
|
font-size: Typography.sizes.sm;
|
||||||
|
color: Theme.colors.foreground;
|
||||||
|
vertical-alignment: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tooltip showcase
|
||||||
|
Card {
|
||||||
|
CardHeader {
|
||||||
|
CardTitle { text: "Tooltip Component"; }
|
||||||
|
CardDescription { text: "Hover tooltips for additional information"; }
|
||||||
|
}
|
||||||
|
|
||||||
|
CardContent {
|
||||||
|
HorizontalLayout {
|
||||||
|
spacing: SpacingSystem.spacing.s2;
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
width: 120px;
|
||||||
|
height: 36px;
|
||||||
|
|
||||||
|
Button {
|
||||||
|
text: "Hover Me";
|
||||||
|
variant: "outline";
|
||||||
|
}
|
||||||
|
|
||||||
|
Tooltip {
|
||||||
|
text: "This is a tooltip!";
|
||||||
|
show: tooltip-visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
TouchArea {
|
||||||
|
moved => {
|
||||||
|
tooltip-visible = self.has-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Accordion showcase
|
||||||
|
Card {
|
||||||
|
CardHeader {
|
||||||
|
CardTitle { text: "Accordion Component"; }
|
||||||
|
CardDescription { text: "Collapsible content sections"; }
|
||||||
|
}
|
||||||
|
|
||||||
|
CardContent {
|
||||||
|
Accordion {
|
||||||
|
items: accordion-items;
|
||||||
|
|
||||||
|
item-toggled(index, expanded) => {
|
||||||
|
accordion-items[index].expanded = expanded;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Empty showcase
|
||||||
|
Card {
|
||||||
|
CardHeader {
|
||||||
|
CardTitle { text: "Empty Component"; }
|
||||||
|
CardDescription { text: "Empty state placeholders"; }
|
||||||
|
}
|
||||||
|
|
||||||
|
CardContent {
|
||||||
|
VerticalLayout {
|
||||||
|
spacing: SpacingSystem.spacing.s6;
|
||||||
|
|
||||||
|
Empty {
|
||||||
|
icon: "📭";
|
||||||
|
title: "No Messages";
|
||||||
|
description: "You don't have any messages yet.";
|
||||||
|
min-height: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
Separator { orientation: Orientation.horizontal; }
|
||||||
|
|
||||||
|
Empty {
|
||||||
|
icon: "🔍";
|
||||||
|
title: "No Results Found";
|
||||||
|
description: "Try adjusting your search criteria.";
|
||||||
|
min-height: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Settings view
|
// Settings view
|
||||||
|
|||||||
Reference in New Issue
Block a user