-
This commit is contained in:
me
471
ui/demo.slint
471
ui/demo.slint
@@ -10,6 +10,16 @@ import { Item } from "components/item.slint";
|
||||
import { Sidebar, NavItem } from "components/sidebar.slint";
|
||||
import { Dialog } from "components/dialog.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 {
|
||||
title: "Slint Shadcn UI - Task Manager Demo";
|
||||
@@ -28,6 +38,18 @@ export component Demo inherits Window {
|
||||
in-out property <bool> dialog-open: false;
|
||||
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
|
||||
property <[NavItem]> nav-items: [
|
||||
{ icon: "📝", label: "Tasks", active: current-view == "tasks" },
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user