sleek-ui

A UI components library built with/for Slint based on ant design.

Table of content

• Installation
• How to use
  • Use the widgets
  • Use the application's theme
    • Use your own themes
    • Scale factor
• Documentation
• Widgets
  • General
  • Data entry
  • Data display
  • Feedback
  • Miscs
• Resources

Installation

1. Download the library's archive from the latest release.
2. Unzip the archive and place the resulting sleek-ui wherever you want.
3. Add a library path to use it with @sleek-ui in your slint code.

How to use

Use the widgets

Import the widgets from the @sleek-ui/widgets.slint file.
Import the widgets' themes from the @sleek-ui/widget-themes.slint file.

import { UText, UButton } from "@sleek-ui/widgets.slint";

export component AppWindow inherits Window {
	width: 400px;
	height: 500px;
	in-out property <int> counter: 0;
	VerticalLayout {
		alignment: center;

		HorizontalLayout {
			alignment: center;
			// Using the default theme.
			UText {
				text: "Counter: \{counter}";
			}
		}

		HorizontalLayout {
			alignment: center;
			spacing: 4px;
			// Using one of the premade theme.
			UButton {
				variant: primary;
				text: "Decrement";
				clicked => {
					root.counter -= 1;
				}
			}

			UButton {
				text: "Reset";
				clicked => {
					root.counter = 0;
				}
			}

			// Each button's theme has a danger variant.
			UButton {
				variant: primary;
				danger: true;
				text: "increment";
				clicked => {
					root.counter += 1;
				}
			}
		}
	}
}

Use the application's theme

The application's theme is defined in the @sleek-ui/app-theme.slint file.
It implements a scale-factor property to increase/reduce the size of all widgets in the window.
A UAppTheme.color-scheme property is also available to choose which color theme to use. The available values are : light, dark and system. The system value uses the Palette.color-scheme to decide which one to use.

Use your own themes

You can modify all the properties from the application theme to create your own theme.

Check the documentation for more informations.

Scale factor

Sleek-ui comes with a scale-factor integrated that allows you to increase or decrease all sizes.
It takes effect in the UAppTheme global and all widgets.
You can modify it in the backend whenever you want :

let ui = AppWindow::new()?;

let app_theme_global = ui.global::<UAppTheme>();
app_theme_global.set_scale_factor(1.5);

ui.run()?;

Documentation

The documentation is available in the ui-docs folder. You can also click on one of the widgets in the list below to go to its documentation.

Documentation pages :

• Theming
• Widgets documentation

Widgets

General

• Button
• ButtonGroup
• Card
• Divider
• Dropdown
• FloatingButton
• FloatingIconButton
• Icon
• IconButton
• Typography

Data entry

• Checkbox
• DatePicker
• Input
• InputNumber
• Radio
• RadioButton
• Select
• Slider
• Switch
• TimePicker

Data display

• Collapse
• Popover
• Tabs
• Tag
• Tooltip

Feedback

• Modal
• LinearProgress
• CircleProgress
• Spinner
• Alert
• Notification

Miscs

• Context menu
• Breadcrumb

Resources

• Ant Design Theme editor : https://ant.design/theme-editor