103 lines
3.3 KiB
Plaintext
103 lines
3.3 KiB
Plaintext
// Lightweight Demo Application
|
|
// Minimal memory footprint version
|
|
|
|
import { Theme, Typography, SpacingSystem } from "theme/theme.slint";
|
|
import { Button } from "components/button.slint";
|
|
import { Input } from "components/input.slint";
|
|
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "components/card.slint";
|
|
import { Badge } from "components/badge.slint";
|
|
|
|
export component DemoLite inherits Window {
|
|
title: "Slint Shadcn UI - Lite Demo";
|
|
background: Theme.colors.background;
|
|
|
|
// Smaller window size
|
|
min-width: 500px;
|
|
min-height: 400px;
|
|
preferred-width: 700px;
|
|
preferred-height: 500px;
|
|
|
|
// Minimal state
|
|
in-out property <string> input-text: "";
|
|
|
|
VerticalLayout {
|
|
padding: SpacingSystem.spacing.s4;
|
|
spacing: SpacingSystem.spacing.s4;
|
|
|
|
// Header
|
|
HorizontalLayout {
|
|
spacing: SpacingSystem.spacing.s3;
|
|
alignment: space-between;
|
|
|
|
Text {
|
|
text: "Shadcn UI Demo";
|
|
font-size: Typography.sizes.xl;
|
|
font-weight: Typography.weights.bold;
|
|
color: Theme.colors.foreground;
|
|
}
|
|
|
|
Button {
|
|
text: Theme.is-dark-mode ? "☀" : "🌙";
|
|
variant: "outline";
|
|
size: "sm";
|
|
clicked => { Theme.toggle-theme(); }
|
|
}
|
|
}
|
|
|
|
// Main card
|
|
Card {
|
|
CardHeader {
|
|
CardTitle { text: "Button Showcase"; }
|
|
CardDescription { text: "Various button styles"; }
|
|
}
|
|
|
|
CardContent {
|
|
VerticalLayout {
|
|
spacing: SpacingSystem.spacing.s3;
|
|
|
|
// Button variants
|
|
HorizontalLayout {
|
|
spacing: SpacingSystem.spacing.s2;
|
|
Button { text: "Default"; }
|
|
Button { text: "Secondary"; variant: "secondary"; }
|
|
Button { text: "Outline"; variant: "outline"; }
|
|
Button { text: "Ghost"; variant: "ghost"; }
|
|
}
|
|
|
|
// Destructive button
|
|
HorizontalLayout {
|
|
spacing: SpacingSystem.spacing.s2;
|
|
Button { text: "Destructive"; variant: "destructive"; }
|
|
Button { text: "Disabled"; disabled: true; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Input card
|
|
Card {
|
|
CardHeader {
|
|
CardTitle { text: "Input & Badge"; }
|
|
}
|
|
|
|
CardContent {
|
|
VerticalLayout {
|
|
spacing: SpacingSystem.spacing.s3;
|
|
|
|
Input {
|
|
value <=> input-text;
|
|
placeholder: "Type something...";
|
|
}
|
|
|
|
HorizontalLayout {
|
|
spacing: SpacingSystem.spacing.s2;
|
|
Badge { text: "Default"; }
|
|
Badge { text: "Secondary"; variant: "secondary"; }
|
|
Badge { text: "Outline"; variant: "outline"; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|