mirror of
https://github.com/slint-ui/slint.git
synced 2025-08-04 18:58:36 +00:00
docs: Remove inline langref documentation and link the mdbook
For node and cpp, I use relative links to point to the slint language reference documentation. For the slint crate documentation I create a link to https://slint-ui.com/releases/VERSION/... instead: This needs to work from docs.rs as well as from our own docs area on slint-ui.com! That is pretty ugly: I can not even define constants for this as the crate docs need to come before anything else.
This commit is contained in:
Tobias Hunger
Tobias Hunger
parent
5891f7e478
commit
d93445bd0b
13 changed files with 171 additions and 3448 deletions
|
|
@ -37,8 +37,6 @@ Welcome to Slint C++'s documentation!
|
|||
|
||||
genindex
|
||||
|
||||
language.rst
|
||||
|
||||
markdown/debugging_techniques.md
|
||||
|
||||
.. image:: https://github.com/slint-ui/slint/workflows/CI/badge.svg
|
||||
|
|
@ -73,7 +71,7 @@ of elements and property bindings. Here's the obligatory "Hello World":
|
|||
}
|
||||
}
|
||||
|
||||
Check out the `language reference <markdown/langref.html>`_ for more details.
|
||||
Check out the `language reference <../slint>`_ for more details.
|
||||
|
||||
Architecture
|
||||
============
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
.. Copyright © SixtyFPS GmbH <info@slint-ui.com>
|
||||
.. SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
|
||||
|
||||
The .slint UI Design Language
|
||||
==========================
|
||||
|
||||
.. toctree::
|
||||
|
||||
Language Reference<markdown/langref.md>
|
||||
markdown/builtin_elements.md
|
||||
markdown/builtin_enums.md
|
||||
markdown/widgets.md
|
||||
markdown/layouting.md
|
||||
152
api/node/cover.md
Normal file
152
api/node/cover.md
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
# Slint-node
|
||||
|
||||
[](https://www.npmjs.com/package/slint-ui)
|
||||
|
||||
[Slint](https://slint-ui.com/) is a UI toolkit that supports different programming languages.
|
||||
Slint-node is the integration with node.
|
||||
|
||||
The complete Node documentation can be viewed online at https://slint-ui.com/docs/node/.
|
||||
|
||||
**Warning: Pre-Alpha**
|
||||
Slint is still in the early stages of development: APIs will change and important features are still being developed.
|
||||
|
||||
## Slint Language Manual
|
||||
|
||||
The [Slint language manual](../slint) covers the Slint UI description language
|
||||
in detail.
|
||||
|
||||
## Installing Slint
|
||||
|
||||
Slint is available via NPM, so you can install by running the following command:
|
||||
|
||||
```sh
|
||||
npm install slint-ui
|
||||
```
|
||||
|
||||
## Using Slint
|
||||
|
||||
To initialize the API, you first need to import the `slint-ui` module in our code:
|
||||
|
||||
```js
|
||||
let slint = require("slint-ui");
|
||||
```
|
||||
|
||||
This step also installs a hook in NodeJS that allows you to import `.slint` files directly:
|
||||
|
||||
```js
|
||||
let ui = require("../ui/main.slint");
|
||||
```
|
||||
|
||||
Combining these two steps leads us to the obligatory "Hello World" example:
|
||||
|
||||
```js
|
||||
require("slint-ui");
|
||||
let ui = require("../ui/main.slint");
|
||||
let main = new ui.Main();
|
||||
main.run();
|
||||
```
|
||||
|
||||
See [/examples/todo/node](/examples/todo/node) for a full example.
|
||||
|
||||
## API Overview
|
||||
|
||||
### Instantiating a component
|
||||
|
||||
The exported component is exposed as a type constructor. The type constructor takes as parameter
|
||||
an object which allow to initialize the value of public properties or callbacks.
|
||||
|
||||
```js
|
||||
require("slint-ui");
|
||||
// In this example, the main.slint file exports a module which
|
||||
// has a counter property and a clicked callback
|
||||
let ui = require("ui/main.slint");
|
||||
let component = new ui.MainWindow({
|
||||
counter: 42,
|
||||
clicked: function() { console.log("hello"); }
|
||||
});
|
||||
```
|
||||
|
||||
### Accessing a property
|
||||
|
||||
Properties are exposed as properties on the component instance
|
||||
|
||||
```js
|
||||
component.counter = 42;
|
||||
console.log(component.counter);
|
||||
```
|
||||
|
||||
### Callbacks
|
||||
|
||||
The callbacks are also exposed as property that have a setHandler function, and that can can be called.
|
||||
|
||||
```js
|
||||
// connect to a callback
|
||||
component.clicked.setHandler(function() { console.log("hello"); })
|
||||
// emit a callback
|
||||
component.clicked();
|
||||
```
|
||||
|
||||
### Type Mappings
|
||||
|
||||
| `.slint` Type | JavaScript Type | Notes |
|
||||
| --- | --- | --- |
|
||||
| `int` | `Number` | |
|
||||
| `float` | `Number` | |
|
||||
| `string` | `String` | |
|
||||
| `color` | `String` | Colors are represented as strings in the form `"#rrggbbaa"`. When setting a color property, any CSS compliant color is accepted as a string. |
|
||||
| `length` | `Number` | |
|
||||
| `physical_length` | `Number` | |
|
||||
| `duration` | `Number` | The number of milliseconds |
|
||||
| `angle` | `Number` | The value in degrees |
|
||||
| structure | `Object` | Structures are mapped to JavaScrip objects with structure fields mapped to properties. |
|
||||
| array | `Array` or Model Object | |
|
||||
|
||||
### Models
|
||||
|
||||
For property of array type, they can either be set using an array.
|
||||
In that case, getting the property also return an array.
|
||||
If the array was set within the .slint file, the array can be obtained
|
||||
|
||||
```js
|
||||
component.model = [1, 2, 3];
|
||||
// component.model.push(4); // does not work, because it operate on a copy
|
||||
// but re-assigning works
|
||||
component.model = component.model.concat(4);
|
||||
```
|
||||
|
||||
Another option is to set a model object. A model object has the following function:
|
||||
|
||||
* `rowCount()`: returns the number of element in the model.
|
||||
* `rowData(index)`: return the row at the given index
|
||||
* `setRowData(index, data)`: called when the model need to be changed. `this.notify.rowDataChanged` must be called if successful.
|
||||
|
||||
When such an object is set to a model property, it gets a new `notify` object with the following function
|
||||
|
||||
* `rowDataChanged(index)`: notify the view that the row was changed.
|
||||
* `rowAdded(index, count)`: notify the view that rows were added.
|
||||
* `rowRemoved(index, count)`: notify the view that a row were removed.
|
||||
* `reset()`: notify the view that everything may have changed.
|
||||
|
||||
As an example, here is the implementation of the `ArrayModel` (which is available as `slint.ArrayModel`)
|
||||
|
||||
```js
|
||||
let array = [1, 2, 3];
|
||||
let model = {
|
||||
rowCount() { return a.length; },
|
||||
rowData(row) { return a[row]; },
|
||||
setRowData(row, data) { a[row] = data; this.notify.rowDataChanged(row); },
|
||||
push() {
|
||||
let size = a.length;
|
||||
Array.prototype.push.apply(a, arguments);
|
||||
this.notify.rowAdded(size, arguments.length);
|
||||
},
|
||||
remove(index, size) {
|
||||
let r = a.splice(index, size);
|
||||
this.notify.rowRemoved(size, arguments.length);
|
||||
},
|
||||
};
|
||||
component.model = model;
|
||||
model.push(4); // this works
|
||||
// does NOT work, getting the model does not return the right object
|
||||
// component.model.push(5);
|
||||
```
|
||||
|
|
@ -17,9 +17,9 @@
|
|||
"scripts": {
|
||||
"install": "neon build --release && tsc",
|
||||
"build": "tsc",
|
||||
"docs": "typedoc lib/index.ts"
|
||||
"docs": "typedoc --hideGenerator --readme cover.md lib/index.ts"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typedoc": "^0.19.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,55 +8,15 @@
|
|||
|
||||
- The [`generated_code`] module contains an [commented example](generated_code::SampleComponent)
|
||||
of what is generated from the `.slint` file
|
||||
- The [`langref`] module is the reference documentation for the `.slint` language.
|
||||
- The [`widgets`] and [`builtin_elements`] modules contains the documentation of elements usable
|
||||
within the `.slint` files
|
||||
- The [`layouting`] module contains the documentation to position the elements.
|
||||
*/
|
||||
|
||||
pub mod recipes {
|
||||
#![doc = include_str!("docs/recipes/recipes.md")]
|
||||
//!
|
||||
//! #
|
||||
//! Next: [The `.slint` language reference](super::langref)
|
||||
|
||||
// So intra-doc links can refer it as `slint::`
|
||||
use crate as slint;
|
||||
}
|
||||
|
||||
pub mod langref {
|
||||
#![doc = include_str!("docs/langref.md")]
|
||||
//!
|
||||
//! #
|
||||
//! Next: [Builtin Elements](super::builtin_elements)
|
||||
}
|
||||
|
||||
pub mod builtin_elements {
|
||||
#![doc = include_str!("docs/builtin_elements.md")]
|
||||
//!
|
||||
//! #
|
||||
//! Next: [Builtin Enums](super::builtin_enums)
|
||||
}
|
||||
|
||||
pub mod builtin_enums {
|
||||
#![doc = include_str!("docs/builtin_enums.md")]
|
||||
//!
|
||||
//! #
|
||||
//! Next: [Widgets](super::widgets)
|
||||
}
|
||||
|
||||
pub mod widgets {
|
||||
#![doc = include_str!("docs/widgets.md")]
|
||||
//!
|
||||
//! #
|
||||
//! Next: [Layouting](super::layouting)
|
||||
}
|
||||
|
||||
pub mod layouting {
|
||||
#![doc = include_str!("docs/layouting.md")]
|
||||
#![doc = ""]
|
||||
}
|
||||
|
||||
/// This module exists only to explain the API of the code generated from `.slint` design markup. Its described structure
|
||||
/// is not really contained in the compiled crate.
|
||||
pub mod generated_code {
|
||||
|
|
|
|||
|
|
@ -8,20 +8,17 @@
|
|||
|
||||
This crate is the main entry point for embedding user interfaces designed with
|
||||
[Slint UI](https://slint-ui.com/) in Rust programs.
|
||||
|
||||
If you are new to Slint, start with the [Walk-through tutorial](https://slint-ui.com/docs/tutorial/rust).
|
||||
If you are already familiar with Slint, the following topics provide related information.
|
||||
*/
|
||||
#![doc = concat!("If you are new to Slint, start with the [Walk-through tutorial](https://slint-ui.com/releases/", env!("CARGO_PKG_VERSION"), "/tutorial/rust)")]
|
||||
/*! If you are already familiar with Slint, the following topics provide related information.
|
||||
|
||||
## Related topics
|
||||
|
||||
* [Examples and Recipes](docs::recipes)
|
||||
* [The `.slint` language reference](docs::langref)
|
||||
* [Builtin Elements](docs::builtin_elements)
|
||||
* [Builtin Enums](docs::builtin_enums)
|
||||
* [Widgets](docs::widgets)
|
||||
* [Positioning and Layout of Elements](docs::layouting)
|
||||
* [Debugging Techniques](docs::debugging_techniques)
|
||||
*/
|
||||
#![doc = concat!("* [The Slint language reference manual](https://slint-ui.com/releases/", env!("CARGO_PKG_VERSION"), "/doc/slint)")]
|
||||
/*! * [Examples and Recipes](docs::recipes)
|
||||
* [Slint on Microcontrollers](docs::mcu)
|
||||
* [Debugging Techniques](docs::debugging_techniques)
|
||||
|
||||
## How to use this crate:
|
||||
|
||||
|
|
@ -58,9 +55,9 @@ fn main() {
|
|||
|
||||
### The .slint code in external files is compiled with `build.rs`
|
||||
|
||||
When your design becomes bigger in terms of markup code, you may want move it to a dedicated
|
||||
`.slint` file. It's also possible to split a `.slint` file into multiple files using [modules](docs::langref#modules).
|
||||
Use a [build script](https://doc.rust-lang.org/cargo/reference/build-scripts.html) to compile
|
||||
When your design becomes bigger in terms of markup code, you may want move it to a dedicated*/
|
||||
#![doc = concat!("`.slint` file. It's also possible to split a `.slint` file into multiple files using [modules](https://slint-ui.com/releases/", env!("CARGO_PKG_VERSION"), "/doc/slint/modules.html).")]
|
||||
/*!Use a [build script](https://doc.rust-lang.org/cargo/reference/build-scripts.html) to compile
|
||||
your main `.slint` file:
|
||||
|
||||
In your Cargo.toml add a `build` assignment and use the `slint-build` crate in `build-dependencies`:
|
||||
|
|
@ -209,7 +206,7 @@ struct MyStruct {
|
|||
|
||||
## Exported Global singletons
|
||||
|
||||
When you export a [global singleton](docs::langref#global-singletons) from the main file,
|
||||
When you export a [global singleton](../../slint/globals.html) from the main file,
|
||||
it is also generated with the exported name. Like the main component, the generated struct have
|
||||
inherent method to access the properties and callback:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,891 +0,0 @@
|
|||
# Builtin Elements
|
||||
|
||||
## Common properties
|
||||
|
||||
These properties are valid on all visible items
|
||||
|
||||
* **`x`** and **`y`** (*length*): the position of the element relative to its parent
|
||||
* **`z`** (*float*): Allows to specify a different order to stack the items with its siblings. (default: 0)
|
||||
* **`width`** and **`height`** (*length*): The size of the element. When set, this overrides the default size.
|
||||
* **`max-width`** and **`max-height`** (*length*): The maximum size of an element when used in a layout.
|
||||
* **`min-width`** and **`min-height`** (*length*): The minimum size of an element when used in a layout.
|
||||
* **`preferred-width`** and **`preferred-height`** (*length*): The preferred size of an element when used in a layout.
|
||||
* **`col`**, **`row`**, **`colspan`**, **`rowspan`** (*int*): See [`GridLayout`](#gridlayout).
|
||||
* **`horizontal-stretch`** and **`vertical-stretch`** (*float*): Specify how much relative space these elements are stretching in a layout.
|
||||
When 0, this means that the elements will not be stretched unless all elements are 0. Builtin widgets have a value of either 0 or 1
|
||||
* **`opacity`** (*float*): A value between 0 and 1 (or a percentage) that is used to draw the element and its
|
||||
children with transparency. 0 is fully transparent (invisible), and 1 is fully opaque. (default: 1)
|
||||
* **`visible`** (*bool*): When set to `false`, the element and all his children will not be drawn
|
||||
and not react to mouse input (default: `true`)
|
||||
* **`cache-rendering-hint`** (*bool*): When set to `true`, this provides a hint
|
||||
to the renderer to cache the contents of the element and all the children into an intermediate
|
||||
cached layer. For complex sub-trees that rarely change this may speed up the rendering, at the
|
||||
expense of increased memory consumption. Not all rendering backends support this, so this is
|
||||
merely a hint. (default: `false`)
|
||||
* **`dialog-button-role`** (*enum DialogButtonRole*): Specify that this is a button in a `Dialog`.
|
||||
|
||||
### Accessibility
|
||||
|
||||
Use the following `accessible-` properties to make your items interact well with software like screen readers, braille terminals and other software to make your application accessible.
|
||||
|
||||
* **`accessible-role`** (*enum [`AccessibleRole`](builtin_enums.md#accessiblerole)*): The accessibility role of the element. This property is
|
||||
mandatory to be able to use any other accessible properties. It should be set to a constant value.
|
||||
The default value is `none` for most elements, but is `text` for the Text element.
|
||||
* **`accessible-label`** (*string*): The label for an interactive element.
|
||||
The default value is empty for most elements, or is the value of the `text` property for Text
|
||||
elements.
|
||||
* **`accessible-description`** (*string*): The description for the current element.
|
||||
* **`accessible-checkable`** (*bool*): Whether the element is can be checked or not.
|
||||
* **`accessible-checked`** (*bool*): Whether the element is checked or not. This maps to the "checked" state of checkboxes, radio buttons, and other widgets.
|
||||
* **`accessible-has-focus`** (*bool*): Set to true when the current element currently has the focus.
|
||||
* **`accessible-value`** (*string*): The current value of the item.
|
||||
* **`accessible-value-maximum`** (*float*): The maximum value of the item. This is used for example by spin boxes.
|
||||
* **`accessible-value-minimum`** (*float*): The minimum value of the item.
|
||||
* **`accessible-value-step`** (*float*) The smallest increment or decrement by which the current value can change. This corresponds to the step by which a handle on a slider can be dragged.
|
||||
|
||||
### Drop Shadows
|
||||
|
||||
To achieve the graphical effect of a visually elevated shape that shows a shadow effect underneath the frame of
|
||||
an element, it is possible to set the following `drop-shadow` properties:
|
||||
|
||||
* **`drop-shadow-offset-x`** and **`drop-shadow-offset-y`** (*length*): The horizontal and vertical distance
|
||||
of the shadow from the element's frame. A negative value places the shadow left / above of the element.
|
||||
* **`drop-shadow-color`** (*color*): The base color of the shadow to use. Typically that color is the starting color
|
||||
of a gradient that fades into transparency.
|
||||
* **`drop-shadow-blur`** (*length*): The radius of the shadow that also describes the level of blur applied to the shadow.
|
||||
Negative values are ignored and zero means no blur (default).
|
||||
|
||||
The `drop-shadow` effect is supported for `Rectangle` elements.
|
||||
|
||||
## `Window`
|
||||
|
||||
Window is the root of what is on the screen
|
||||
|
||||
The Window geometry will be restricted by its layout constraints: setting the `width` will result in a fixed width,
|
||||
and the window manager will respect the `min-width` and `max-width` so the window can't be resized bigger
|
||||
or smaller. The initial width can be controlled with the `preferred-width` property. The same applies for the height.
|
||||
|
||||
### Properties
|
||||
|
||||
* **`title`** (*string*): The window title that is shown in the title bar.
|
||||
* **`icon`** (*image*): The window icon shown in the title bar or the task bar on window managers supporting it.
|
||||
* **`no-frame`** (*bool*): Whether the window should be borderless/frameless or not.
|
||||
* **`background`** (*color*): The background color of the Window. (default value: depends on the style)
|
||||
* **`default-font-family`** (*string*): The font family to use as default in text elements inside this window, that don't
|
||||
have their family set.
|
||||
* **`default-font-size`** (*length*): The font size to use as default in text elements inside this window, that don't
|
||||
have their size set.
|
||||
* **`default-font-weight`** (*int*): The font weight to use as default in text elements inside this window, that don't
|
||||
have their weight set. The values range from 100 (lightest) to 900 (thickest). 400 is the normal weight.
|
||||
|
||||
## `Rectangle`
|
||||
|
||||
By default, the rectangle is just an empty item that shows nothing. By setting a color or a border
|
||||
it is then possible to draw a simple rectangle on the screen
|
||||
|
||||
When not part of a layout, its width or height defaults to 100% of the parent element when not specified.
|
||||
|
||||
### Properties
|
||||
|
||||
* **`background`** (*brush*): The background brush of the Rectangle, typically a color. (default value: transparent)
|
||||
* **`border-width`** (*length*): The width of the border. (default value: 0)
|
||||
* **`border-color`** (*brush*): The color of the border. (default value: transparent)
|
||||
* **`border-radius`** (*length*): The size of the radius. (default value: 0)
|
||||
* **`clip`** (*bool*): By default, when an item is bigger or outside another item, it is still shown.
|
||||
But when this property is set to `true`, then the children element of this Rectangle are going
|
||||
to be clipped. (default: `false`)
|
||||
|
||||
### Example
|
||||
|
||||
```slint
|
||||
export component Example inherits Window {
|
||||
width: 270px;
|
||||
height: 100px;
|
||||
|
||||
Rectangle {
|
||||
x: 10px;
|
||||
y: 10px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
// Rectangle with a border
|
||||
Rectangle {
|
||||
x: 70px;
|
||||
y: 10px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: green;
|
||||
border-width: 2px;
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
// Transparent Rectangle with a border and a radius
|
||||
Rectangle {
|
||||
x: 140px;
|
||||
y: 10px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-width: 4px;
|
||||
border-color: black;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
// A radius of width/2 makes it a circle
|
||||
Rectangle {
|
||||
x: 210px;
|
||||
y: 10px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: yellow;
|
||||
border-width: 2px;
|
||||
border-color: blue;
|
||||
border-radius: self.width/2;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `Image`
|
||||
|
||||
An Image can be used to represent an image loaded from an image file.
|
||||
|
||||
### Properties
|
||||
|
||||
* **`source`** (*image*): The image to load. In order to reference image, one uses the `@image-url("...")` macro
|
||||
which loads the file relative to the directory containing the .slint file.
|
||||
* **`source-clip-x`**, **`source-clip-y`**, **`source-clip-width`**, **`source-clip-height`** (*int*): Properties in source
|
||||
image coordinates that define the region of the source image that is rendered. By default the entire source image is visible:
|
||||
| Property | Default Binding |
|
||||
|----------|---------------|
|
||||
| `source-clip-x` | `0` |
|
||||
| `source-clip-y` | `0` |
|
||||
| `source-clip-width` | `source.width - source-clip-x` |
|
||||
| `source-clip-height` | `source.height - source-clip-y` |
|
||||
* **`image-fit`** (*enum*): Specifies how the source image shall be fit into the image element. Possible values are:
|
||||
* `fill`: Scales and stretches the image to fit the width and height of the element.
|
||||
* `contain`: The source image is scaled to fit into the image element's dimension while preserving the aspect ratio.
|
||||
* `cover`: The source image is scaled to cover into the image element's dimension while preserving the aspect ratio.
|
||||
|
||||
When the `Image` element is part of a layout, the default value for **`image-fit`** is `contain`. Otherwise it is `fill`.
|
||||
|
||||
* **`image-rendering`** (*enum*): Specifies how the source image will be scaled. Possible values are:
|
||||
* `smooth`: The image is scaled with a linear interpolation algorithm.
|
||||
* `pixelated`: The image is scaled with the nearest neighbor algorithm.
|
||||
|
||||
The default value is `smooth`.
|
||||
|
||||
* **`colorize`** (*brush*): When set, the image is used as an alpha mask and is drown in the given color (or with the gradient)
|
||||
* **`width`**, **`height`** (*length*): The width and height of the image as it appears on the screen.The default values are
|
||||
the sizes provided by the **`source`** image. If the `Image` is **not** in a layout and only **one** of the two sizes are
|
||||
specified, then the other defaults to the specified value scaled according to the aspect ratio of the **`source`** image.
|
||||
|
||||
* **`rotation-angle`** (*angle*), **`rotation-origin-x`** (*length*), **`rotation-origin-y`** (*length*):
|
||||
Rotate the image by the given angle around the specified origin point. The default origin point is the center of the element.
|
||||
When these properties are present, the Image cannot have any children elements.
|
||||
|
||||
### Example
|
||||
|
||||
```slint
|
||||
export component Example inherits Window {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
VerticalLayout {
|
||||
Image {
|
||||
source: @image-url("https://slint-ui.com/logo/slint-logo-full-light.svg");
|
||||
// image-fit default is `contain` when in layout, preserving aspect ratio
|
||||
}
|
||||
Image {
|
||||
source: @image-url("https://slint-ui.com/logo/slint-logo-full-light.svg");
|
||||
colorize: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Scaled while preserving the aspect ratio:
|
||||
|
||||
```slint
|
||||
export component Example inherits Window {
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
VerticalLayout {
|
||||
Image {
|
||||
source: @image-url("https://slint-ui.com/logo/slint-logo-full-light.svg");
|
||||
width: 100px;
|
||||
// implicit default, preserving aspect ratio:
|
||||
// height: self.width * natural_height / natural_width;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `Text`
|
||||
|
||||
The `Text` element is responsible for rendering text. Besides the `text` property, that specifies which text to render,
|
||||
it also allows configuring different visual aspects through the `font-family`, `font-size`, `font-weight` and `color` properties.
|
||||
|
||||
The `Text` element can break long text into multiple lines of text. A line feed character (`\n`) in the string of the `text`
|
||||
property will trigger a manual line break. For automatic line breaking you need to set the `wrap` property to a value other than
|
||||
`no-wrap` and it is important to specify a `width` and `height` for the `Text` element, in order to know where to break. It's
|
||||
recommended to place the `Text` element in a layout and let it set the `width` and `height` based on the available screen space
|
||||
and the text itself.
|
||||
|
||||
### Properties
|
||||
|
||||
* **`text`** (*string*): The actual text.
|
||||
* **`font-family`** (*string*): The font name
|
||||
* **`font-size`** (*length*): The font size of the text
|
||||
* **`font-weight`** (*int*): The weight of the font. The values range from 100 (lightest) to 900 (thickest). 400 is the normal weight.
|
||||
* **`color`** (*brush*): The color of the text (default value: depends on the style)
|
||||
* **`horizontal-alignment`** (*enum [`TextHorizontalAlignment`](builtin_enums.md#texthorizontalalignment)*): The horizontal alignment of the text.
|
||||
* **`vertical-alignment`** (*enum [`TextVerticalAlignment`](builtin_enums.md#textverticalalignment)*): The vertical alignment of the text.
|
||||
* **`wrap`** (*enum [`TextWrap`](builtin_enums.md#textwrap)*): The way the text wraps (default: no-wrap).
|
||||
* **`overflow`** (*enum [`TextOverflow`](builtin_enums.md#textoverflow)*): What happens when the text overflows (default: clip).
|
||||
* **`letter-spacing`** (*length*): The letter spacing allows changing the spacing between the glyphs. A positive value increases the spacing
|
||||
and a negative value decreases the distance. The default value is 0.
|
||||
|
||||
### Example
|
||||
|
||||
This example shows the text "Hello World" in red, using the default font:
|
||||
|
||||
```slint
|
||||
export component Example inherits Window {
|
||||
width: 270px;
|
||||
height: 100px;
|
||||
|
||||
Text {
|
||||
x:0;y:0;
|
||||
text: "Hello World";
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This example breaks a longer paragraph of text into multiple lines, by setting a `wrap`
|
||||
policy and assigning a limited `width` and enough `height` for the text to flow down:
|
||||
|
||||
```slint
|
||||
export component Example inherits Window {
|
||||
width: 270px;
|
||||
height: 300px;
|
||||
|
||||
Text {
|
||||
x:0;
|
||||
text: "This paragraph breaks into multiple lines of text";
|
||||
wrap: word-wrap;
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `Path`
|
||||
|
||||
The `Path` element allows rendering a generic shape, composed of different geometric commands. A path
|
||||
shape can be filled and outlined.
|
||||
|
||||
When not part of a layout, its width or height defaults to 100% of the parent element when not specified.
|
||||
|
||||
A path can be defined in two different ways:
|
||||
|
||||
* Using SVG path commands as a string
|
||||
* Using path command elements in `.slint` markup.
|
||||
|
||||
The coordinates used in the geometric commands are within the imaginary coordinate system of the path.
|
||||
When rendering on the screen, the shape is drawn relative to the `x` and `y` properties. If the `width`
|
||||
and `height` properties are non-zero, then the entire shape is fit into these bounds - by scaling
|
||||
accordingly.
|
||||
|
||||
### Common Path Properties
|
||||
|
||||
* **`fill`** (*brush*): The color for filling the shape of the path.
|
||||
* **`fill-rule`** (*enum [`FillRule`](builtin_enums.md#fillrule)*): The fill rule to use for the path. (default value: `nonzero`)
|
||||
* **`stroke`** (*brush*): The color for drawing the outline of the path.
|
||||
* **`stroke-width`** (*length*): The width of the outline.
|
||||
* **`width`** (*length*): If non-zero, the path will be scaled to fit into the specified width.
|
||||
* **`height`** (*length*): If non-zero, the path will be scaled to fit into the specified height.
|
||||
* **`viewbox-x`**/**`viewbox-y`**/**`viewbox-width`**/**`viewbox-height`** (*float*) These four
|
||||
properties allow defining the position and size of the viewport of the path in path coordinates.
|
||||
|
||||
If the `viewbox-width` or `viewbox-height` is less or equal than zero, the viewbox properties are
|
||||
ignored and instead the bounding rectangle of all path elements is used to define the view port.
|
||||
* **`clip`** (*bool*): By default, when a path has a view box defined and the elements render
|
||||
outside of it, they are still rendered. When this property is set to `true`, then rendering will be
|
||||
clipped at the boundaries of the view box.
|
||||
This property must be a literal `true` or `false` (default: `false`)
|
||||
|
||||
#### Path Using SVG commands
|
||||
|
||||
SVG is a popular file format for defining scalable graphics, which are often composed of paths. In SVG
|
||||
paths are composed using [commands](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#path_commands),
|
||||
which in turn are written in a string. In `.slint` the path commands are provided to the `commands`
|
||||
property. The following example renders a shape consists of an arc and a rectangle, composed of `line-to`,
|
||||
`move-to` and `arc` commands:
|
||||
|
||||
```slint
|
||||
export component Example inherits Path {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
commands: "M 0 0 L 0 100 A 1 1 0 0 0 100 100 L 100 0 Z";
|
||||
stroke: red;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
```
|
||||
|
||||
The commands are provided in a property:
|
||||
|
||||
* **`commands`** (*string): A string providing the commands according to the SVG path specification.
|
||||
|
||||
#### Path Using SVG Path Elements
|
||||
|
||||
The shape of the path can also be described using elements that resemble the SVG path commands but use the
|
||||
`.slint` markup syntax. The earlier example using SVG commands can also be written like that:
|
||||
|
||||
```slint
|
||||
export component Example inherits Path {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
stroke: blue;
|
||||
stroke-width: 1px;
|
||||
|
||||
MoveTo {
|
||||
x: 0;
|
||||
y: 0;
|
||||
}
|
||||
LineTo {
|
||||
x: 0;
|
||||
y: 100;
|
||||
}
|
||||
ArcTo {
|
||||
radius-x: 1;
|
||||
radius-y: 1;
|
||||
x: 100;
|
||||
y: 100;
|
||||
}
|
||||
LineTo {
|
||||
x: 100;
|
||||
y: 0;
|
||||
}
|
||||
Close {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Note how the coordinates of the path elements do not use units - they operate within the imaginary
|
||||
coordinate system of the scalable path.
|
||||
|
||||
##### `MoveTo` Sub-element for `Path`
|
||||
|
||||
The `MoveTo` sub-element closes the current sub-path, if present, and moves the current point
|
||||
to the location specified by the `x` and `y` properties. Subsequent elements such as `LineTo`
|
||||
will use this new position as their starting point, therefore this starts a new sub-path.
|
||||
|
||||
###### Properties
|
||||
|
||||
* **`x`** (*float*): The x position of the new current point.
|
||||
* **`y`** (*float*): The y position of the new current point.
|
||||
|
||||
##### `LineTo` Sub-element for `Path`
|
||||
|
||||
The `LineTo` sub-element describes a line from the path's current position to the
|
||||
location specified by the `x` and `y` properties.
|
||||
|
||||
###### Properties
|
||||
|
||||
* **`x`** (*float*): The target x position of the line.
|
||||
* **`y`** (*float*): The target y position of the line.
|
||||
|
||||
##### `ArcTo` Sub-element for `Path`
|
||||
|
||||
The `ArcTo` sub-element describes the portion of an ellipse. The arc is drawn from the path's
|
||||
current position to the location specified by the `x` and `y` properties. The remaining properties
|
||||
are modelled after the SVG specification and allow tuning visual features such as the direction
|
||||
or angle.
|
||||
|
||||
###### Properties
|
||||
|
||||
* **`x`** (*float*): The target x position of the line.
|
||||
* **`y`** (*float*): The target y position of the line.
|
||||
* **`radius-x`** (*float*): The x-radius of the ellipse.
|
||||
* **`radius-y`** (*float*): The y-radius of the ellipse.
|
||||
* **`x-rotation`** (*float*): The x-axis of the ellipse will be rotated by the value of this
|
||||
properties, specified in as angle in degrees from 0 to 360.
|
||||
* **`large-arc`** (*bool*): Out of the two arcs of a closed ellipse, this flag selects that the
|
||||
larger arc is to be rendered. If the property is `false`, the shorter arc is rendered instead.
|
||||
* **`sweep`** (*bool*): If the property is `true`, the arc will be drawn as a clockwise turning arc;
|
||||
anti-clockwise otherwise.
|
||||
|
||||
##### `CubicTo` Sub-element for `Path`
|
||||
|
||||
The `CubicTo` sub-element describes a smooth Bézier from the path's current position to the
|
||||
location specified by the `x` and `y` properties, using two control points specified by their
|
||||
respective properties.
|
||||
|
||||
###### Properties
|
||||
|
||||
* **`x`** (*float*): The target x position of the curve.
|
||||
* **`y`** (*float*): The target y position of the curve.
|
||||
* **`control-1-x`** (*float*): The x coordinate of the curve's first control point.
|
||||
* **`control-1-y`** (*float*): The y coordinate of the curve's first control point.
|
||||
* **`control-2-x`** (*float*): The x coordinate of the curve's second control point.
|
||||
* **`control-2-y`** (*float*): The y coordinate of the curve's second control point.
|
||||
|
||||
##### `QuadraticTo` Sub-element for `Path`
|
||||
|
||||
The `QuadraticTo` sub-element describes a smooth Bézier from the path's current position to the
|
||||
location specified by the `x` and `y` properties, using the control points specified by the
|
||||
`control-x` and `control-y` properties.
|
||||
|
||||
###### Properties
|
||||
|
||||
* **`x`** (*float*): The target x position of the curve.
|
||||
* **`y`** (*float*): The target y position of the curve.
|
||||
* **`control-x`** (*float*): The x coordinate of the curve's control point.
|
||||
* **`control-y`** (*float*): The y coordinate of the curve's control point.
|
||||
|
||||
##### `Close` Sub-element for `Path`
|
||||
|
||||
The `Close` element closes the current sub-path and draws a straight line from the current
|
||||
position to the beginning of the path.
|
||||
|
||||
## `TouchArea`
|
||||
|
||||
The TouchArea control what happens when the zone covered by it is touched or interacted with
|
||||
using the mouse.
|
||||
|
||||
When not part of a layout, its width or height default to 100% of the parent element if not specified.
|
||||
|
||||
### Properties
|
||||
|
||||
* **`pressed`** (*bool*): Set to `true` by the TouchArea when the mouse is pressed over it.
|
||||
* **`has-hover`** (*bool*): Set to `true` by the TouchArea when the mouse is over it.
|
||||
* **`mouse-x`**, **`mouse-y`** (*length*): Set by the TouchArea to the position of the mouse within it.
|
||||
* **`pressed-x`**, **`pressed-y`** (*length*): Set to `true` by the TouchArea to the position of the mouse at the moment it was last pressed.
|
||||
* **`mouse-cursor`** (*enum [`MouseCursor`](builtin_enums.md#mousecursor)*): The mouse cursor type when the mouse is hovering the TouchArea.
|
||||
|
||||
### Callbacks
|
||||
|
||||
* **`clicked`**: Emitted when clicked (the mouse is pressed, then released on this element)
|
||||
* **`moved`**: The mouse has been moved. This will only be called if the mouse is also pressed.
|
||||
* **`pointer-event(PointerEvent)`**: Received when a button was pressed or released.
|
||||
|
||||
### Example
|
||||
|
||||
```slint
|
||||
export component Example inherits Window {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
area := TouchArea {
|
||||
width: parent.width;
|
||||
height: parent.height;
|
||||
clicked => {
|
||||
rect2.background = #ff0;
|
||||
}
|
||||
}
|
||||
Rectangle {
|
||||
x:0;
|
||||
width: parent.width / 2;
|
||||
height: parent.height;
|
||||
background: area.pressed ? blue: red;
|
||||
}
|
||||
rect2 := Rectangle {
|
||||
x: parent.width / 2;
|
||||
width: parent.width / 2;
|
||||
height: parent.height;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `FocusScope`
|
||||
|
||||
The FocusScope exposes callback to intercept the pressed key when it has focus.
|
||||
|
||||
The KeyEvent has a text property which is a character of the key entered.
|
||||
When a non-printable key is pressed, the character will be either a control character,
|
||||
or it will be mapped to a private unicode character. The mapping of these non-printable, special characters is available in the [`Key`](#key) namespace
|
||||
|
||||
### Properties
|
||||
|
||||
* **`has-focus`** (*bool*): Set to `true` when item is focused and receives keyboard events.
|
||||
|
||||
### Methods
|
||||
|
||||
* **`focus()`** Call this function to focus the text input and make it receive future keyboard events.
|
||||
|
||||
### Callbacks
|
||||
|
||||
* **`key-pressed(KeyEvent) -> EventResult`**: Emitted when a key is pressed, the argument is a `KeyEvent` struct
|
||||
* **`key-released(KeyEvent) -> EventResult`**: Emitted when a key is released, the argument is a `KeyEvent` struct
|
||||
|
||||
### Example
|
||||
|
||||
```slint
|
||||
export component Example inherits Window {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
forward-focus: my-key-handler;
|
||||
my-key-handler := FocusScope {
|
||||
key-pressed(event) => {
|
||||
debug(event.text);
|
||||
if (event.modifiers.control) {
|
||||
debug("control was pressed during this event");
|
||||
}
|
||||
if (event.text == Key.Escape) {
|
||||
debug("Esc key was pressed")
|
||||
}
|
||||
accept
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `VerticalLayout` / `HorizontalLayout`
|
||||
|
||||
These layouts place their children next to each other vertically or horizontally.
|
||||
The size of elements can either be fixed with the `width` or `height` property, or if they are not set
|
||||
they will be computed by the layout respecting the minimum and maximum sizes and the stretch factor.
|
||||
|
||||
## Properties
|
||||
|
||||
* **`spacing`** (*length*): The distance between the elements in the layout.
|
||||
* **`padding`** (*length*): the padding within the layout.
|
||||
* **`padding-left`**, **`padding-right`**, **`padding-top`** and **`padding-bottom`** (*length*):
|
||||
override the padding in specific sides.
|
||||
* **`alignment`** (*FIXME enum*): Can be one of `stretch`, `center`, `start`, `end`,
|
||||
`space-between`, `space-around`. Defaults to `stretch`. Matches the CSS flex.
|
||||
|
||||
## Example
|
||||
|
||||
```slint
|
||||
export component Foo inherits Window {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
HorizontalLayout {
|
||||
spacing: 5px;
|
||||
Rectangle { background: red; width: 10px; }
|
||||
Rectangle { background: blue; min-width: 10px; }
|
||||
Rectangle { background: yellow; horizontal-stretch: 1; }
|
||||
Rectangle { background: green; horizontal-stretch: 2; }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `GridLayout`
|
||||
|
||||
`GridLayout` places the elements in a grid. `GridLayout` adds properties to each item: `col`, `row`, `colspan`, `rowspan`.
|
||||
You can control the position of elements with `col` and `row`.
|
||||
If `col` or `row` is not specified, they are automatically computed such that the item is next to the previous item, in the same row.
|
||||
Alternatively, the item can be put in a `Row` element.
|
||||
|
||||
### Properties
|
||||
|
||||
* **`spacing`** (*length*): The distance between the elements in the layout.
|
||||
* **`padding`** (*length*): the padding within the layout.
|
||||
* **`padding-left`**, **`padding-right`**, **`padding-top`** and **`padding-bottom`** (*length*):
|
||||
override the padding in specific sides.
|
||||
|
||||
### Examples
|
||||
|
||||
This example uses the `Row` element
|
||||
|
||||
```slint
|
||||
export component Foo inherits Window {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
GridLayout {
|
||||
spacing: 5px;
|
||||
Row {
|
||||
Rectangle { background: red; }
|
||||
Rectangle { background: blue; }
|
||||
}
|
||||
Row {
|
||||
Rectangle { background: yellow; }
|
||||
Rectangle { background: green; }
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This example uses the `col` and `row` properties
|
||||
|
||||
```slint
|
||||
export component Foo inherits Window {
|
||||
width: 200px;
|
||||
height: 150px;
|
||||
GridLayout {
|
||||
Rectangle { background: red; }
|
||||
Rectangle { background: blue; }
|
||||
Rectangle { background: yellow; row: 1; }
|
||||
Rectangle { background: green; }
|
||||
Rectangle { background: black; col: 2; row: 0; }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `Flickable`
|
||||
|
||||
The `Flickable` is a lower-level item that is the base for scrollable
|
||||
elements, such as the ScrollView widget. When the `viewport-width` or the
|
||||
`viewport-height` is greater than the parent width or parent height
|
||||
respectively the element becomes scrollable although the `Flickable`
|
||||
does not create a scrollbar. When unset, the `viewport-width` and `viewport-height` are
|
||||
calculated automatically based on the content. Excepted when using a `for` loop to populate
|
||||
the elements, that is tracked in issue #407.
|
||||
The maximum and preferred size of the Flickable are based on those of the viewport.
|
||||
|
||||
When not part of a layout, its width or height defaults to 100% of the parent element when not specified.
|
||||
|
||||
### Properties
|
||||
|
||||
* **`viewport-height`**, **`viewport-width`** (*length*): The total size of the scrollable element
|
||||
* **`viewport-x`**, **`viewport-y`** (*length*): The position of the scrollable element relative to the Flickable. This is usually a negative value.
|
||||
* **`interactive`** (*bool*): When true, the viewport can be scrolled by clicking on it and dragging it with the cursor. (default: true)
|
||||
|
||||
### Example
|
||||
|
||||
```slint
|
||||
export component Example inherits Window {
|
||||
width: 270px;
|
||||
height: 100px;
|
||||
|
||||
Flickable {
|
||||
viewport-height: 300px;
|
||||
Text {
|
||||
x:0;
|
||||
y: 150px;
|
||||
text: "This is some text that you have to scroll to see";
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `TextInput`
|
||||
|
||||
The `TextInput` is a lower-level item that shows text and allows entering text.
|
||||
|
||||
When not part of a layout, its width or height defaults to 100% of the parent element when not specified.
|
||||
|
||||
### Properties
|
||||
|
||||
* **`text`** (*string*): The actual text.
|
||||
* **`font-family`** (*string*): The font name
|
||||
* **`font-size`** (*length*): The font size of the text
|
||||
* **`font-weight`** (*int*): The weight of the font. The values range from 100 (lightest) to 900 (thickest). 400 is the normal weight.
|
||||
* **`color`** (*brush*): The color of the text (default value: depends on the style)
|
||||
* **`horizontal-alignment`** (*enum [`TextHorizontalAlignment`](builtin_enums.md#texthorizontalalignment)*): The horizontal alignment of the text.
|
||||
* **`vertical-alignment`** (*enum [`TextVerticalAlignment`](builtin_enums.md#textverticalalignment)*): The vertical alignment of the text.
|
||||
* **`has-focus`** (*bool*): Set to `true` when item is focused and receives keyboard events.
|
||||
* **`letter-spacing`** (*length*): The letter spacing allows changing the spacing between the glyphs. A positive value increases the spacing
|
||||
and a negative value decreases the distance. The default value is 0.
|
||||
* **`single-line`** (*bool*): When set to `true`, no newlines are allowed (default value: `true`)
|
||||
* **`read-only`** (*bool*): When set to `true`, text editing via keyboard and mouse is disabled but
|
||||
selecting text is still enabled as well as editing text programatically (default value: `false`)
|
||||
* **`wrap`** (*enum [`TextWrap`](builtin_enums.md#textwrap)*): The way the text input wraps. Only makes sense when `single-line` is false. (default: no-wrap)
|
||||
* **`input-type`** (*enum [`InputType`](builtin_enums.md#InputType)*): The way to allow special input viewing properties such as password fields (default value: `text`).
|
||||
|
||||
### Methods
|
||||
|
||||
* **`focus()`** Call this function to focus the text input and make it receive future keyboard events.
|
||||
|
||||
### Callbacks
|
||||
|
||||
* **`accepted()`**: Emitted when enter key is pressed
|
||||
* **`edited()`**: Emitted when the text has changed because the user modified it
|
||||
* **`cursor-position-changed(Point)`**: The cursor was moved to the new (x, y) position
|
||||
|
||||
### Example
|
||||
|
||||
```slint
|
||||
export component Example inherits Window {
|
||||
width: 270px;
|
||||
height: 100px;
|
||||
|
||||
TextInput {
|
||||
text: "Replace me with a name";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `PopupWindow`
|
||||
|
||||
This allow to show a popup window like a tooltip or a popup menu.
|
||||
|
||||
Note: It is not allowed to access properties of elements within the popup from outside of the popup.
|
||||
|
||||
### Methods
|
||||
|
||||
* **`show()`** Call this function to show the popup.
|
||||
|
||||
### Example
|
||||
|
||||
```slint
|
||||
export component Example inherits Window {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
popup := PopupWindow {
|
||||
Rectangle { height:100%; width: 100%; background: yellow; }
|
||||
x: 20px; y: 20px; height: 50px; width: 50px;
|
||||
}
|
||||
|
||||
TouchArea {
|
||||
height:100%; width: 100%;
|
||||
clicked => { popup.show(); }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `Dialog`
|
||||
|
||||
Dialog is like a window, but it has buttons that are automatically laid out.
|
||||
|
||||
A Dialog should have one main element for the content, that is not a button.
|
||||
And the window can have any number of `StandardButton` widgets or other button
|
||||
with the `dialog-button-role` property.
|
||||
The button will be layed out in an order that depends on the platform.
|
||||
|
||||
The `kind` property of the `StandardButton`s and the `dialog-button-role` properties needs to be set to a specific value,
|
||||
it cannot be a complex expression.
|
||||
There cannot be several StandardButton of the same kind.
|
||||
|
||||
A callback `<kind>_clicked` is automatically added for each StandardButton which does not have an explicit
|
||||
callback handler, so it can be handled from the native code. (e.g. if there is a button of kind `cancel`,
|
||||
a `cancel_clicked` callback will be added).
|
||||
|
||||
When viewed with the `slint-viewer` program, the `ok`, `cancel`, and `close` button will cause the dialog to close.
|
||||
|
||||
### Properties
|
||||
|
||||
* **`title`** (*string*): The window title that is shown in the title bar.
|
||||
* **`icon`** (*image*): The window icon shown in the title bar or the task bar on window managers supporting it.
|
||||
|
||||
### Example
|
||||
|
||||
```slint
|
||||
import { StandardButton, Button } from "std-widgets.slint";
|
||||
export component Example inherits Dialog {
|
||||
Text {
|
||||
text: "This is a dialog box";
|
||||
}
|
||||
StandardButton { kind: ok; }
|
||||
StandardButton { kind: cancel; }
|
||||
Button {
|
||||
text: "More Info";
|
||||
dialog-button-role: action;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
# Builtin Structures
|
||||
|
||||
## `Point`
|
||||
|
||||
This structure represents a point with x and y coordinate
|
||||
|
||||
### Fields
|
||||
|
||||
* **`x`** (*length*)
|
||||
* **`y`** (*length*)
|
||||
|
||||
## `KeyEvent`
|
||||
|
||||
This structure is generated and passed to the key press and release
|
||||
callbacks of the `FocusScope` element.
|
||||
|
||||
### Fields
|
||||
|
||||
* **`text`** (*string*): The string representation of the key
|
||||
* **`modifiers`** (*KeyboardModifiers*): The keyboard modifiers pressed during the event
|
||||
|
||||
## `KeyboardModifiers`
|
||||
|
||||
This structure is generated as part of `KeyEvent`, to indicate which modifier keys
|
||||
are pressed during the generation of a key event.
|
||||
|
||||
### Fields
|
||||
|
||||
* **`control`** (*bool*): `true` if the control key is pressed. On macOS this corresponds to the command key.
|
||||
* **`alt`** (*bool*): `true` if alt key is pressed.
|
||||
* **`shift`** (*bool*): `true` if the shift key is pressed.
|
||||
* **`meta`** (*bool*): `true` if the windows key is pressed on Windows, or the control key on macOS.
|
||||
|
||||
## `PointerEvent`
|
||||
|
||||
This structure is generated and passed to the `pointer-event` callback of the `TouchArea` element.
|
||||
|
||||
### Fields
|
||||
|
||||
* **`kind`** (*enum PointerEventKind*): The kind of the event: one of the following
|
||||
- `down`: The button was pressed.
|
||||
- `up`: The button was released.
|
||||
- `cancel`: Another element or window took hold of the grab. This applies to all pressed button and the `button` is not relevent.
|
||||
* **`button`** (*enum PointerEventButton*): The button that was pressed or released. `left`, `right`, `middle`, or `none`.
|
||||
|
||||
# Namespaces
|
||||
|
||||
The following namespaces provide access to common constants such as special keys or named colors.
|
||||
|
||||
## `Key`
|
||||
|
||||
Use the constants in the `Key` namespace to handle pressing of keys that don't have a printable character. Check the value of [`KeyEvent`](#keyevent)'s `text` property
|
||||
against the constants below.
|
||||
|
||||
* **`Backspace`**
|
||||
* **`Tab`**
|
||||
* **`Return`**
|
||||
* **`Escape`**
|
||||
* **`Backtab`**
|
||||
* **`Delete`**
|
||||
* **`Shift`**
|
||||
* **`Control`**
|
||||
* **`Alt`**
|
||||
* **`AltGr`**
|
||||
* **`CapsLock`**
|
||||
* **`ShiftR`**
|
||||
* **`ControlR`**
|
||||
* **`Meta`**
|
||||
* **`MetaR`**
|
||||
* **`UpArrow`**
|
||||
* **`DownArrow`**
|
||||
* **`LeftArrow`**
|
||||
* **`RightArrow`**
|
||||
* **`F1`**
|
||||
* **`F2`**
|
||||
* **`F3`**
|
||||
* **`F4`**
|
||||
* **`F5`**
|
||||
* **`F6`**
|
||||
* **`F7`**
|
||||
* **`F8`**
|
||||
* **`F9`**
|
||||
* **`F10`**
|
||||
* **`F11`**
|
||||
* **`F12`**
|
||||
* **`F13`**
|
||||
* **`F14`**
|
||||
* **`F15`**
|
||||
* **`F16`**
|
||||
* **`F17`**
|
||||
* **`F18`**
|
||||
* **`F19`**
|
||||
* **`F20`**
|
||||
* **`F21`**
|
||||
* **`F22`**
|
||||
* **`F23`**
|
||||
* **`F24`**
|
||||
* **`Insert`**
|
||||
* **`Home`**
|
||||
* **`End`**
|
||||
* **`PageUp`**
|
||||
* **`PageDown`**
|
||||
* **`ScrollLock`**
|
||||
* **`Pause`**
|
||||
* **`SysReq`**
|
||||
* **`Stop`**
|
||||
* **`Menu`**
|
||||
|
||||
## `Colors`
|
||||
|
||||
Use the colors namespace to select colors by their name. For example you can use `Colors.aquamarine` or `Colors.bisque`.
|
||||
The entire list of names is very long. You can find a complete list in the [CSS Specification](https://www.w3.org/TR/css-color-3/#svg-color).
|
||||
|
|
@ -1,205 +0,0 @@
|
|||
<!-- Generated with `cargo xtask enumdocs` from internal/commons/enums.rs -->
|
||||
# Builtin Enums
|
||||
|
||||
Enum value can be referenced by using the name of the enum and the name of the value
|
||||
separated by a dot. (eg: `TextHorizontalAlignment.left`)
|
||||
|
||||
The name of the enum can be omitted in bindings of the type of that enum, or if the
|
||||
return value of a callback is of that enum.
|
||||
|
||||
The default value of each enum type is always the first value.
|
||||
## `TextHorizontalAlignment`
|
||||
|
||||
This enum describes the different types of alignment of text along the horizontal axis.
|
||||
|
||||
* **`left`**: The text will be aligned with the left edge of the containing box.
|
||||
* **`center`**: The text will be horizontally centered within the containing box.
|
||||
* **`right`**: The text will be aligned to the right of the containing box.
|
||||
|
||||
## `TextVerticalAlignment`
|
||||
|
||||
This enum describes the different types of alignment of text along the vertical axis.
|
||||
|
||||
* **`top`**: The text will be aligned to the top of the containing box.
|
||||
* **`center`**: The text will be vertically centered within the containing box.
|
||||
* **`bottom`**: The text will be aligned to the bottom of the containing box.
|
||||
|
||||
## `TextWrap`
|
||||
|
||||
This enum describes the how the text wrap if it is too wide to fit in the Text width.
|
||||
|
||||
* **`no-wrap`**: The text will not wrap, but instead will overflow.
|
||||
* **`word-wrap`**: The text will be wrapped at word boundaries.
|
||||
|
||||
## `TextOverflow`
|
||||
|
||||
This enum describes the how the text appear if it is too wide to fit in the Text width.
|
||||
|
||||
* **`clip`**: The text will simply be clipped.
|
||||
* **`elide`**: The text will be elided with `…`.
|
||||
|
||||
## `EventResult`
|
||||
|
||||
This enum describes whether an event was rejected or accepted by an event handler.
|
||||
|
||||
* **`reject`**: The event is rejected by this event handler and may then be handled by the parent item
|
||||
* **`accept`**: The event is accepted and won't be processed further
|
||||
|
||||
## `FillRule`
|
||||
|
||||
This enum describes the different ways of deciding what the inside of a shape described by a path shall be.
|
||||
|
||||
* **`nonzero`**: The ["nonzero" fill rule as defined in SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule#nonzero).
|
||||
* **`evenodd`**: The ["evenodd" fill rule as defined in SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule#evenodd)
|
||||
|
||||
## `StandardButtonKind`
|
||||
|
||||
|
||||
* **`ok`**:
|
||||
* **`cancel`**:
|
||||
* **`apply`**:
|
||||
* **`close`**:
|
||||
* **`reset`**:
|
||||
* **`help`**:
|
||||
* **`yes`**:
|
||||
* **`no`**:
|
||||
* **`abort`**:
|
||||
* **`retry`**:
|
||||
* **`ignore`**:
|
||||
|
||||
## `DialogButtonRole`
|
||||
|
||||
This enum represents the value of the `dialog-button-role` property which can be added to
|
||||
any element within a `Dialog` to put that item in the button row, and its exact position
|
||||
depends on the role and the platform.
|
||||
|
||||
* **`none`**: This is not a button means to go in the row of button of the dialog
|
||||
* **`accept`**: This is the role of the main button to click to accept the dialog. e.g. "Ok" or "Yes"
|
||||
* **`reject`**: This is the role of the main button to click to reject the dialog. e.g. "Cancel" or "No"
|
||||
* **`apply`**: This is the role of the "Apply" button
|
||||
* **`reset`**: This is the role of the "Reset" button
|
||||
* **`help`**: This is the role of the "Help" button
|
||||
* **`action`**: This is the role of any other button that performs another action.
|
||||
|
||||
## `PointerEventKind`
|
||||
|
||||
|
||||
* **`cancel`**:
|
||||
* **`down`**:
|
||||
* **`up`**:
|
||||
|
||||
## `PointerEventButton`
|
||||
|
||||
This enum describes the different types of buttons for a pointer event,
|
||||
typically on a mouse or a pencil.
|
||||
|
||||
* **`other`**: A button that is none of left, right or middle. For example
|
||||
this is used for a fourth button on a mouse with many buttons.
|
||||
* **`left`**: The left button.
|
||||
* **`right`**: The right button.
|
||||
* **`middle`**: The center button.
|
||||
|
||||
## `MouseCursor`
|
||||
|
||||
This enum represents different types of mouse cursors. It is a subset of the mouse cursors available in CSS.
|
||||
For details and pictograms see the [MDN Documentation for cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#values).
|
||||
Depending on the backend and used OS unidirectional resize cursors may be replaced with bidirectional ones.
|
||||
|
||||
* **`default`**: The systems default cursor.
|
||||
* **`none`**: No cursor is displayed.
|
||||
* **`help`**: A cursor indicating help information.
|
||||
* **`pointer`**: A pointing hand indicating a link.
|
||||
* **`progress`**: The program is busy but can still be interacted with.
|
||||
* **`wait`**: The program is busy.
|
||||
* **`crosshair`**: A crosshair.
|
||||
* **`text`**: A cursor indicating selectable text.
|
||||
* **`alias`**: An alias or shortcut is being created.
|
||||
* **`copy`**: A copy is being created.
|
||||
* **`move`**: Something is to be moved.
|
||||
* **`no-drop`**: Something cannot be dropped here.
|
||||
* **`not-allowed`**: An action is not allowed
|
||||
* **`grab`**: Something is grabbable.
|
||||
* **`grabbing`**: Something is being grabbed.
|
||||
* **`col-resize`**: Indicating that a column is resizable horizontally.
|
||||
* **`row-resize`**: Indicating that a row is resizable vertically.
|
||||
* **`n-resize`**: Unidirectional resize north.
|
||||
* **`e-resize`**: Unidirectional resize east.
|
||||
* **`s-resize`**: Unidirectional resize south.
|
||||
* **`w-resize`**: Unidirectional resize west.
|
||||
* **`ne-resize`**: Unidirectional resize north-east.
|
||||
* **`nw-resize`**: Unidirectional resize north-west.
|
||||
* **`se-resize`**: Unidirectional resize south-east.
|
||||
* **`sw-resize`**: Unidirectional resize south-west.
|
||||
* **`ew-resize`**: Bidirectional resize east-west.
|
||||
* **`ns-resize`**: Bidirectional resize north-south.
|
||||
* **`nesw-resize`**: Bidirectional resize north-east-south-west.
|
||||
* **`nwse-resize`**: Bidirectional resize north-west-south-east.
|
||||
|
||||
## `ImageFit`
|
||||
|
||||
|
||||
* **`fill`**:
|
||||
* **`contain`**:
|
||||
* **`cover`**:
|
||||
|
||||
## `ImageRendering`
|
||||
|
||||
|
||||
* **`smooth`**:
|
||||
* **`pixelated`**:
|
||||
|
||||
## `InputType`
|
||||
|
||||
This enum is used to define the type of the input field. Currently this only differentiates between
|
||||
text and password inputs but in the future it could be expanded to also define what type of virtual keyboard
|
||||
should be shown, for example.
|
||||
|
||||
* **`text`**: The default value. This will render all characters normally
|
||||
* **`password`**: This will render all characters with a character that defaults to "*"
|
||||
|
||||
## `LayoutAlignment`
|
||||
|
||||
Enum representing the alignment property of a BoxLayout or HorizontalLayout
|
||||
|
||||
* **`stretch`**:
|
||||
* **`center`**:
|
||||
* **`start`**:
|
||||
* **`end`**:
|
||||
* **`space-between`**:
|
||||
* **`space-around`**:
|
||||
|
||||
## `PathEvent`
|
||||
|
||||
PathEvent is a low-level data structure describing the composition of a path. Typically it is
|
||||
generated at compile time from a higher-level description, such as SVG commands.
|
||||
|
||||
* **`begin`**: The beginning of the path.
|
||||
* **`line`**: A straight line on the path.
|
||||
* **`quadratic`**: A quadratic bezier curve on the path.
|
||||
* **`cubic`**: A cubic bezier curve on the path.
|
||||
* **`end-open`**: The end of the path that remains open.
|
||||
* **`end-closed`**: The end of a path that is closed.
|
||||
|
||||
## `AccessibleRole`
|
||||
|
||||
This enum represents the different values for the `accessible-role` property, used to describe the
|
||||
role of an element in the context of assistive technology such as screen readers.
|
||||
|
||||
* **`none`**: The element is not accessible.
|
||||
* **`button`**: The element is a Button or behaves like one.
|
||||
* **`checkbox`**: The element is a CheckBox or behaves like one.
|
||||
* **`combobox`**: The element is a ComboBox or behaves like one.
|
||||
* **`slider`**: The element is a Slider or behaves like one.
|
||||
* **`spinbox`**: The element is a SpinBox or behaves like one.
|
||||
* **`tab`**: The element is a Tab or behaves like one.
|
||||
* **`text`**: The role for a Text element. It is automatically applied.
|
||||
|
||||
## `SortOrder`
|
||||
|
||||
This enum represents the different values of the `sort-order` property.
|
||||
It is used to sort a `StandardTableView` by a column.
|
||||
|
||||
* **`unsorted`**: The column is unsorted.
|
||||
* **`ascending`**: The column is sorted in ascending order.
|
||||
* **`descending`**: The column is sorted in descending order.
|
||||
|
||||
|
|
@ -12,15 +12,15 @@ In order to inspect the animations in your application, you can can set the `SLI
|
|||
|
||||
The use of logical pixel lengths throughout `.slint` files allows Slint to dynamically compute the correct size of physical pixels, depending on the device-pixel ratio of the screen that is reported by the windowing system. If you want to get an impression of how the individual elements look like when rendered on a screen with a different device-pixel ratio, then you can set the `SLINT_SCALE_FACTOR` environment variable before running the program. The variable accepts a floating pointer number that is used to convert logical pixel lengths to physical pixel lengths by multiplication. For example `SLINT_SCALE_FACTOR=2` will render the user interface in a way where every logical pixel will have twice the width and height.
|
||||
|
||||
*Note*: At the moment this overriding environment variable is only supported when using the OpenGL rendering backend.
|
||||
_Note_: At the moment this overriding environment variable is only supported when using the OpenGL rendering backend.
|
||||
|
||||
## Performance Debugging
|
||||
|
||||
Slint tries its best to use hardware-acceleration to ensure that rendering the user interface uses a minimal amount of CPU resources and animations appear smooth. However depending on the complexity of the user interface, the quality of the graphics drivers or the power of the graphics acceleration in your system, you may hit limits and experience a slow down. You can set the `SLINT_DEBUG_PERFORMANCE` environment variable running the program to inspect at what rate your application is rendering frames to the screen. The variable accepts a few comma-separated options that affect how the frame rate inspection is performed and reported:
|
||||
|
||||
* `refresh_lazy`: The frame rate is measured only when an actual frame is rendered, for example due to a running animation, user interface or some state change that results in a visual difference in the user interface. When nothing changes, the reported frame rate will be low. This can be useful to verify that no unnecessary repainting happens when there are no visual changes. For example a user interface that shows a text input field with a cursor that blinks once a second, the reported frames per second should be two.
|
||||
* `refresh_full_speed`: The user interface is continuously refreshed, even if nothing is changed. This will result in a higher load on the system, but can be useful to identify any bottlenecks that prevent you from achieving smooth animations.
|
||||
* `console`: The measured frame per second rate is printed to stderr on the console.
|
||||
* `overlay`: The measured frame per second rate is as an overlay text label on top of the user interface in each window.
|
||||
- `refresh_lazy`: The frame rate is measured only when an actual frame is rendered, for example due to a running animation, user interface or some state change that results in a visual difference in the user interface. When nothing changes, the reported frame rate will be low. This can be useful to verify that no unnecessary repainting happens when there are no visual changes. For example a user interface that shows a text input field with a cursor that blinks once a second, the reported frames per second should be two.
|
||||
- `refresh_full_speed`: The user interface is continuously refreshed, even if nothing is changed. This will result in a higher load on the system, but can be useful to identify any bottlenecks that prevent you from achieving smooth animations.
|
||||
- `console`: The measured frame per second rate is printed to stderr on the console.
|
||||
- `overlay`: The measured frame per second rate is as an overlay text label on top of the user interface in each window.
|
||||
|
||||
These options are combined. At least the method of frame rate measuring and one reporting method must be specified. For example `SLINT_DEBUG_PERFORMANCE=refresh_full_speed,overlay` will repeatedly re-render the entire user interface in each window and print the achieved frame rate in the top-left corner. `SLINT_DEBUG_PERFORMANCE=refresh_lazy,console,overlay` will measure the frame rate only when something in the user interface changes and the measured value will be printed to stderr as well as rendered as an overlay text label.
|
||||
|
|
|
|||
1329
docs/langref.md
1329
docs/langref.md
File diff suppressed because it is too large
Load diff
|
|
@ -1,372 +0,0 @@
|
|||
# Positioning and Layout of Elements
|
||||
|
||||
All visual elements are shown in a window. Their position is stored in the `x` and `y`
|
||||
properties as coordinates relative to their parent element. The absolute position of an element
|
||||
in a window is calculated by adding the parent's position to the element's position. If the
|
||||
parent has a grandparent element, then that one is added as well. This calculation continues until
|
||||
the top-level element is reached.
|
||||
|
||||
The size of visual elements is stored in the `width` and `height` properties.
|
||||
|
||||
You can create an entire graphical user interface by placing the elements in two different
|
||||
ways:
|
||||
|
||||
* Explicitly - by setting the `x`, `y`, `width`, and `height` properties.
|
||||
* Automatically - by using layout elements.
|
||||
|
||||
Explicit placement is great for static scenes with few elements. Layouts are suitable for
|
||||
complex user interfaces, because the geometric relationship between the elements is
|
||||
expressed in dedicated layout elements. This requires less effort to maintain and helps
|
||||
to create scalable user interfaces.
|
||||
|
||||
## Explicit Placement
|
||||
|
||||
The following example places two rectangles into a window, a blue one and
|
||||
a green one that is a child of the blue:
|
||||
|
||||
```slint
|
||||
// Explicit positioning
|
||||
export component Example inherits Window {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
Rectangle {
|
||||
x: 100px;
|
||||
y: 70px;
|
||||
width: parent.width - self.x;
|
||||
height: parent.height - self.y;
|
||||
background: blue;
|
||||
Rectangle {
|
||||
x: 10px;
|
||||
y: 5px;
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The position of both rectangles is fixed, as well as the size of the inner green one.
|
||||
The outer blue rectangle however has a size that's automatically calculated using binding
|
||||
expressions for the `width` and `height` properties. The calculation results in the
|
||||
bottom left corner aligning with the corner of the window - it is updated whenever
|
||||
the `width` and `height` of the window changes.
|
||||
|
||||
When specifying explicit values for any of the geometric properties, Slint requires
|
||||
you to attach a unit to the number. You can choose between two different units:
|
||||
|
||||
* Logical pixels, using the `px` unit suffix. This is the recommended unit.
|
||||
* Physical pixels, using the `phx` unit suffix
|
||||
|
||||
Logical pixels scale automatically with the device pixel ratio that your system is
|
||||
configured with. For example, on a modern High-DPI display the device pixel ratio can be 2,
|
||||
so every logical pixel occupies 2 physical pixels. On an older screen the user
|
||||
interface scales without any adaptations.
|
||||
|
||||
Additionally, the `width` and `height` properties can also be specified as a `%` percentage
|
||||
unit, which applies relative to the parent element. For example a `width: 50%` means half
|
||||
of the parent's `width`.
|
||||
|
||||
The default values for `x` and `y` properties are set such that elements are centered within their
|
||||
parent.
|
||||
(Unless using the legacy syntax, in which case the default is `0, 0`)
|
||||
|
||||
The default values for `width` and `height` depend on the type of element. Some elements are sized
|
||||
automatically based on their content, such as `Image`, `Text`, and most widgets. The following elements
|
||||
do not have content and therefore default to fill their parent element:
|
||||
|
||||
* `Rectangle`
|
||||
* `TouchArea`
|
||||
* `FocusScope`
|
||||
* `Flickable`
|
||||
|
||||
## Automatic Placement using Layouts
|
||||
|
||||
Slint comes with different layout elements that automatically calculate the position and size of their children:
|
||||
|
||||
* `VerticalLayout` / `HorizontalLayout`: The children are placed along the vertical or horizontal axis.
|
||||
* `GridLayout`: The children are placed in a grid of columns and rows.
|
||||
|
||||
Layouts can also be nested, making it possible to create complex user interfaces.
|
||||
|
||||
You can tune the automatic placement using different constraints, to accommodate the design of your user
|
||||
interface. For example each element has a minimum and a maximum size. Set these explicitly using the
|
||||
following properties:
|
||||
|
||||
* `min-width`
|
||||
* `min-height`
|
||||
* `max-width`
|
||||
* `max-height`
|
||||
|
||||
A layout element also affects the minimum and maximum size of its parent.
|
||||
|
||||
An element is considered to have a fixed size in a layout when the `width` and `height` is specified directly.
|
||||
|
||||
When there is extra space in a layout, elements can stretch along the layout axis. You can control this stretch
|
||||
factor between the element and its siblings with these properties:
|
||||
|
||||
* `horizontal-stretch`
|
||||
* `vertical-stretch`
|
||||
|
||||
A value of `0` means that the element will not be stretched at all; unless all siblings also have a stretch
|
||||
factor of `0`. Then all the elements will be equally stretched.
|
||||
|
||||
The default value of these constraint properties may depends on the content of the element.
|
||||
If the element does not set a `x` or a `y` property, these constraints are also automatically applied to the parent element.
|
||||
When using the legacy syntax, only the layout elements apply their constraints to the parent.
|
||||
|
||||
## Common Properties on Layout Elements
|
||||
|
||||
All layout elements have the following properties in common:
|
||||
|
||||
* `spacing`: This controls the spacing between the children.
|
||||
* `padding`: This specifies the padding within the layout, the space between the elements and the border of the
|
||||
layout.
|
||||
|
||||
For more fine grained control, the `padding` property can be split into properties for each side of the layout:
|
||||
|
||||
* `padding-left`
|
||||
* `padding-right`
|
||||
* `padding-top`
|
||||
* `padding-bottom`
|
||||
|
||||
## `VerticalLayout` and `HorizontalLayout`
|
||||
|
||||
The `VerticalLayout` and `HorizontalLayout` elements place elements in a column or row.
|
||||
By default, they will be stretched or shrunk so that they take the whole space, and their
|
||||
alignment can be adjusted.
|
||||
|
||||
The following example places the blue and yellow rectangle in a row and evenly stretched
|
||||
across the 200 logical pixels of `width`:
|
||||
|
||||
```slint
|
||||
// Stretch by default
|
||||
export component Example inherits Window {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
HorizontalLayout {
|
||||
Rectangle { background: blue; min-width: 20px; }
|
||||
Rectangle { background: yellow; min-width: 30px; }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The example below, on the other hand, specifies that the rectangles shell be aligned
|
||||
to the start of the layout (the visual left). That results in no stretching but instead
|
||||
the rectangles retain their specified minimum width:
|
||||
|
||||
```slint
|
||||
// Unless an alignment is specified
|
||||
export component Example inherits Window {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
HorizontalLayout {
|
||||
alignment: start;
|
||||
Rectangle { background: blue; min-width: 20px; }
|
||||
Rectangle { background: yellow; min-width: 30px; }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The example below nests two layouts for a more complex scene:
|
||||
|
||||
```slint
|
||||
export component Example inherits Window {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
HorizontalLayout {
|
||||
// Side panel
|
||||
Rectangle { background: green; width: 10px; }
|
||||
|
||||
VerticalLayout {
|
||||
padding: 0px;
|
||||
//toolbar
|
||||
Rectangle { background: blue; height: 7px; }
|
||||
|
||||
Rectangle {
|
||||
border-color: red; border-width: 2px;
|
||||
HorizontalLayout {
|
||||
Rectangle { border-color: blue; border-width: 2px; }
|
||||
Rectangle { border-color: green; border-width: 2px; }
|
||||
}
|
||||
}
|
||||
Rectangle {
|
||||
border-color: orange; border-width: 2px;
|
||||
HorizontalLayout {
|
||||
Rectangle { border-color: black; border-width: 2px; }
|
||||
Rectangle { border-color: pink; border-width: 2px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Alignment
|
||||
|
||||
Each elements is sized according to their `width` or `height` is specified, otherwise it is
|
||||
set to the minimum size which is set with the min-width or min-height property, or
|
||||
the minimum size of an inner layout, whatever is bigger.
|
||||
Then, the elements are placed according to the alignment.
|
||||
The size of elements is bigger than the minimum size only if the alignment is stretch
|
||||
|
||||
This example show the different alignment possibilities
|
||||
|
||||
```slint
|
||||
export component Example inherits Window {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
VerticalLayout {
|
||||
HorizontalLayout {
|
||||
alignment: stretch;
|
||||
Text { text: "stretch (default)"; }
|
||||
Rectangle { background: blue; min-width: 20px; }
|
||||
Rectangle { background: yellow; min-width: 30px; }
|
||||
}
|
||||
HorizontalLayout {
|
||||
alignment: start;
|
||||
Text { text: "start"; }
|
||||
Rectangle { background: blue; min-width: 20px; }
|
||||
Rectangle { background: yellow; min-width: 30px; }
|
||||
}
|
||||
HorizontalLayout {
|
||||
alignment: end;
|
||||
Text { text: "end"; }
|
||||
Rectangle { background: blue; min-width: 20px; }
|
||||
Rectangle { background: yellow; min-width: 30px; }
|
||||
}
|
||||
HorizontalLayout {
|
||||
alignment: start;
|
||||
Text { text: "start"; }
|
||||
Rectangle { background: blue; min-width: 20px; }
|
||||
Rectangle { background: yellow; min-width: 30px; }
|
||||
}
|
||||
HorizontalLayout {
|
||||
alignment: center;
|
||||
Text { text: "center"; }
|
||||
Rectangle { background: blue; min-width: 20px; }
|
||||
Rectangle { background: yellow; min-width: 30px; }
|
||||
}
|
||||
HorizontalLayout {
|
||||
alignment: space-between;
|
||||
Text { text: "space-between"; }
|
||||
Rectangle { background: blue; min-width: 20px; }
|
||||
Rectangle { background: yellow; min-width: 30px; }
|
||||
}
|
||||
HorizontalLayout {
|
||||
alignment: space-around;
|
||||
Text { text: "space-around"; }
|
||||
Rectangle { background: blue; min-width: 20px; }
|
||||
Rectangle { background: yellow; min-width: 30px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Stretch algorithm
|
||||
|
||||
When the `alignment` is set to stretch (the default), the elements are sized to their minimum size,
|
||||
then the extra space is shared amongst element proportional to their stretch factor set with the
|
||||
`horizontal-stretch` and `vertical-stretch` properties. The stretched size will not exceed the maximum size.
|
||||
The stretch factor is a floating point number. The elements that have a default content size usually defaults to 0
|
||||
while elements that default to the size of their parents defaults to 1.
|
||||
An element of a stretch factor of 0 will keep its minimum size, unless all the other elements also have a stretch
|
||||
factor of 0 or reached their maximum size.
|
||||
|
||||
Examples:
|
||||
|
||||
```slint
|
||||
export component Example inherits Window {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
VerticalLayout {
|
||||
// Same stretch factor (1 by default): the size is divided equally
|
||||
HorizontalLayout {
|
||||
Rectangle { background: blue; }
|
||||
Rectangle { background: yellow;}
|
||||
Rectangle { background: green;}
|
||||
}
|
||||
// Elements with a bigger min-width are given a bigger size before they expand
|
||||
HorizontalLayout {
|
||||
Rectangle { background: cyan; min-width: 100px;}
|
||||
Rectangle { background: magenta; min-width: 50px;}
|
||||
Rectangle { background: gold;}
|
||||
}
|
||||
// Stretch factor twice as big: grows twice as much
|
||||
HorizontalLayout {
|
||||
Rectangle { background: navy; horizontal-stretch: 2;}
|
||||
Rectangle { background: gray; }
|
||||
}
|
||||
// All elements not having a maximum width have a stretch factor of 0 so they grow
|
||||
HorizontalLayout {
|
||||
Rectangle { background: red; max-width: 20px; }
|
||||
Rectangle { background: orange; horizontal-stretch: 0; }
|
||||
Rectangle { background: pink; horizontal-stretch: 0; }
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### `for`
|
||||
|
||||
The VerticalLayout and Horizontal layout may also contain `for` or `if` expressions, and it does what one expect
|
||||
|
||||
```slint
|
||||
export component Example inherits Window {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
HorizontalLayout {
|
||||
Rectangle { background: green; }
|
||||
for t in [ "Hello", "World", "!" ] : Text {
|
||||
text: t;
|
||||
}
|
||||
Rectangle { background: blue; }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## GridLayout
|
||||
|
||||
The GridLayout lays the element in a grid.
|
||||
Each element gains the properties `row`, `col`, `rowspan`, and `colspan`.
|
||||
One can either use a `Row` sub-element, or set the `row` property explicitly.
|
||||
These properties must be statically known at compile time, so it is not possible to use arithmetic or depends on properties.
|
||||
As of now, the use of `for` or `if` is not allowed in a grid layout.
|
||||
|
||||
This example use the `Row` element
|
||||
|
||||
```slint
|
||||
export component Foo inherits Window {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
GridLayout {
|
||||
spacing: 5px;
|
||||
Row {
|
||||
Rectangle { background: red; }
|
||||
Rectangle { background: blue; }
|
||||
}
|
||||
Row {
|
||||
Rectangle { background: yellow; }
|
||||
Rectangle { background: green; }
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This example use the `col` and `row` property
|
||||
|
||||
```slint
|
||||
export component Foo inherits Window {
|
||||
width: 200px;
|
||||
height: 150px;
|
||||
GridLayout {
|
||||
spacing: 0px;
|
||||
Rectangle { background: red; }
|
||||
Rectangle { background: blue; }
|
||||
Rectangle { background: yellow; row: 1; }
|
||||
Rectangle { background: green; }
|
||||
Rectangle { background: black; col: 2; row: 0; }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
569
docs/widgets.md
569
docs/widgets.md
|
|
@ -1,569 +0,0 @@
|
|||
# Widgets
|
||||
|
||||
Slint provides a series of built-in widgets that can be imported from `"std-widgets.slint"`.
|
||||
|
||||
The widget appearance depends on the selected style. The following styles are available:
|
||||
|
||||
* `fluent`: The **Fluent** style implements the [Fluent Design System](https://www.microsoft.com/design/fluent/).
|
||||
* `material`: The **Material** style implements the [Material Design](https://m3.material.io).
|
||||
* `native`: The **Native** style resembles the appearance of the controls that are native to the platform they
|
||||
are used on. This specifically includes support for the look and feel of controls on macOS and Windows. This
|
||||
style is only available if you have Qt installed on your system.
|
||||
|
||||
See [Selecting a Widget Style](#selecting-a-widget-style) for details how to select the style. If no style is selected, `native` is the default. If `native` is not available, `fluent` is the default.
|
||||
|
||||
## `Button`
|
||||
|
||||
### Properties
|
||||
|
||||
* **`checkable`** (*bool*): Shows whether the button can be checked or not. This enables the `checked` property to possibly become `true`.
|
||||
* **`checked`** (*bool*): Shows whether the button is checked or not. Needs `checkable` to be `true` to work.
|
||||
* **`enabled`**: (*bool*): Defaults to true. When false, the button cannot be pressed
|
||||
* **`icon`** (*image*): The image to show in the button. Note that not all styles support drawing icons.
|
||||
* **`pressed`**: (*bool*): Set to true when the button is pressed.
|
||||
* **`text`** (*string*): The text written in the button.
|
||||
|
||||
### Callbacks
|
||||
|
||||
* **`clicked`**
|
||||
|
||||
### Example
|
||||
|
||||
```slint
|
||||
import { Button, VerticalBox } from "std-widgets.slint";
|
||||
export component Example inherits Window {
|
||||
VerticalBox {
|
||||
Button {
|
||||
text: "Click Me";
|
||||
clicked => { self.text = "Clicked"; }
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `StandardButton`
|
||||
|
||||
The StandardButton looks like a button, but instead of customizing with `text` and `icon`,
|
||||
it can used one of the pre-defined `kind` and the text and icon will depend on the style.
|
||||
|
||||
### Properties
|
||||
|
||||
* **`kind`** (*enum*): The kind of button, one of
|
||||
`ok` `cancel`, `apply`, `close`, `reset`, `help`, `yes`, `no,` `abort`, `retry` or `ignore`
|
||||
* **`enabled`**: (*bool*): Defaults to true. When false, the button cannot be pressed
|
||||
|
||||
### Callbacks
|
||||
|
||||
* **`clicked`**
|
||||
|
||||
### Example
|
||||
|
||||
```slint
|
||||
import { StandardButton, VerticalBox } from "std-widgets.slint";
|
||||
export component Example inherits Window {
|
||||
VerticalBox {
|
||||
StandardButton { kind: ok; }
|
||||
StandardButton { kind: apply; }
|
||||
StandardButton { kind: cancel; }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `CheckBox`
|
||||
|
||||
### Properties
|
||||
|
||||
* **`text`** (*string*): The text written next to the checkbox.
|
||||
* **`checked`**: (*bool*): Whether the checkbox is checked or not.
|
||||
|
||||
### Callbacks
|
||||
|
||||
* **`toggled`**: The checkbox value changed
|
||||
|
||||
### Example
|
||||
|
||||
```slint
|
||||
import { CheckBox } from "std-widgets.slint";
|
||||
export component Example inherits Window {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
CheckBox {
|
||||
width: parent.width;
|
||||
height: parent.height;
|
||||
text: "Hello World";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `SpinBox`
|
||||
|
||||
### Properties
|
||||
|
||||
* **`value`** (*int*): The value.
|
||||
* **`minimum`** (*int*): The minimum value (default: 0).
|
||||
* **`maximum`** (*int*): The maximum value (default: 100).
|
||||
|
||||
### Example
|
||||
|
||||
```slint
|
||||
import { SpinBox } from "std-widgets.slint";
|
||||
export component Example inherits Window {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
SpinBox {
|
||||
width: parent.width;
|
||||
height: parent.height;
|
||||
value: 42;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `Slider`
|
||||
|
||||
### Properties
|
||||
|
||||
* **`value`** (*float*): The value.
|
||||
* **`minimum`** (*float*): The minimum value (default: 0)
|
||||
* **`maximum`** (*float*): The maximum value (default: 100)
|
||||
|
||||
### Callbacks
|
||||
|
||||
* **`changed(float)`**: The value was changed
|
||||
|
||||
### Example
|
||||
|
||||
```slint
|
||||
import { Slider } from "std-widgets.slint";
|
||||
export component Example inherits Window {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
Slider {
|
||||
width: parent.width;
|
||||
height: parent.height;
|
||||
value: 42;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `GroupBox`
|
||||
|
||||
### Properties
|
||||
|
||||
* **`title`** (*string*): A text written as the title of the group box.
|
||||
|
||||
### Example
|
||||
|
||||
```slint
|
||||
import { GroupBox } from "std-widgets.slint";
|
||||
export component Example inherits Window {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
GroupBox {
|
||||
title: "A Nice Title";
|
||||
Text {
|
||||
text: "Hello World";
|
||||
color: blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `LineEdit`
|
||||
|
||||
A widget used to enter a single line of text
|
||||
|
||||
### Properties
|
||||
|
||||
* **`text`** (*string*): The text being edited
|
||||
* **`font-size`** (*length*): the size of the font of the input text
|
||||
* **`has-focus`**: (*bool*): Set to true when the line edit currently has the focus
|
||||
* **`placeholder-text`**: (*string*): A placeholder text being shown when there is no text in the edit field
|
||||
* **`enabled`**: (*bool*): Defaults to true. When false, nothing can be entered
|
||||
* **`read-only`** (*bool*): When set to `true`, text editing via keyboard and mouse is disabled but
|
||||
selecting text is still enabled as well as editing text programatically (default value: `false`)
|
||||
* **`input-type`** (*enum [`InputType`](builtin_enums.md#InputType)*): The way to allow special input viewing properties such as password fields (default value: `text`).
|
||||
* **`horizontal-alignment`** (*enum [`TextHorizontalAlignment`](builtin_enums.md#texthorizontalalignment)*): The horizontal alignment of the text.
|
||||
|
||||
### Callbacks
|
||||
|
||||
* **`accepted`**: Enter was pressed
|
||||
* **`edited`**: Emitted when the text has changed because the user modified it
|
||||
|
||||
### Example
|
||||
|
||||
```slint
|
||||
import { LineEdit } from "std-widgets.slint";
|
||||
export component Example inherits Window {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
LineEdit {
|
||||
font-size: 14px;
|
||||
width: parent.width;
|
||||
height: parent.height;
|
||||
placeholder-text: "Enter text here";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `TextEdit`
|
||||
|
||||
Similar to LineEdit, but can be used to enter several lines of text
|
||||
|
||||
*Note:* The current implementation only implement very few basic shortcut. More
|
||||
shortcut will be implemented in a future version: <https://github.com/slint-ui/slint/issues/474>
|
||||
|
||||
### Properties
|
||||
|
||||
* **`text`** (*string*): The text being edited
|
||||
* **`font-size`** (*length*): the size of the font of the input text
|
||||
* **`has-focus`**: (*bool*): Set to true when the widget currently has the focus
|
||||
* **`enabled`**: (*bool*): Defaults to true. When false, nothing can be entered
|
||||
* **`read-only`** (*bool*): When set to `true`, text editing via keyboard and mouse is disabled but
|
||||
selecting text is still enabled as well as editing text programatically (default value: `false`)
|
||||
* **`wrap`** (*enum [`TextWrap`](builtin_enums.md#textwrap)*): The way the text wraps (default: word-wrap).
|
||||
* **`horizontal-alignment`** (*enum [`TextHorizontalAlignment`](builtin_enums.md#texthorizontalalignment)*): The horizontal alignment of the text.
|
||||
|
||||
### Callbacks
|
||||
|
||||
* **`edited`**: Emitted when the text has changed because the user modified it
|
||||
|
||||
### Example
|
||||
|
||||
```slint
|
||||
import { TextEdit } from "std-widgets.slint";
|
||||
export component Example inherits Window {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
TextEdit {
|
||||
font-size: 14px;
|
||||
width: parent.width;
|
||||
height: parent.height;
|
||||
text: "Lorem ipsum dolor sit amet,\n consectetur adipisici elit";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## `ScrollView`
|
||||
|
||||
A Scrollview contains a viewport that is bigger than the view and can be
|
||||
scrolled. It has scrollbar to interact with. The viewport-width and
|
||||
viewport-height are calculated automatically to create a scollable view
|
||||
except for when using a for loop to populate the elements. In that case
|
||||
the viewport-width and viewport-height are not calculated automatically
|
||||
and must be set manually for scrolling to work. The ability to
|
||||
automatically calculate the viewport-width and viewport-height when
|
||||
using for loops may be added in the future and is tracked in issue #407.
|
||||
|
||||
### Properties
|
||||
|
||||
* **`viewport-width`** and **`viewport-height`** (*length*): The `width` and `length` properties of the viewport
|
||||
* **`viewport-x`** and **`viewport-y`** (*length*): The `x` and `y` properties of the viewport. Usually these are negative
|
||||
* **`visible-width`** and **`visible-height`** (*length*): The size of the visible area of the ScrollView (not including the scrollbar)
|
||||
* **`enabled`** and **`has-focus`** (*bool*): property that are only used to render the frame as disabled or focused, but do not
|
||||
change the behavior of the widget.
|
||||
|
||||
### Example
|
||||
|
||||
```slint
|
||||
import { ScrollView } from "std-widgets.slint";
|
||||
export component Example inherits Window {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
ScrollView {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
viewport-width: 300px;
|
||||
viewport-height: 300px;
|
||||
Rectangle { width: 30px; height: 30px; x: 275px; y: 50px; background: blue; }
|
||||
Rectangle { width: 30px; height: 30px; x: 175px; y: 130px; background: red; }
|
||||
Rectangle { width: 30px; height: 30px; x: 25px; y: 210px; background: yellow; }
|
||||
Rectangle { width: 30px; height: 30px; x: 98px; y: 55px; background: orange; }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `ListView`
|
||||
|
||||
A ListView is like a Scrollview but it should have a `for` element, and the content are
|
||||
automatically layed out in a list.
|
||||
Elements are only instantiated if they are visible
|
||||
|
||||
### Properties
|
||||
|
||||
Same as ScrollView
|
||||
|
||||
### Example
|
||||
|
||||
```slint
|
||||
import { ListView } from "std-widgets.slint";
|
||||
export component Example inherits Window {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
ListView {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
for data in [
|
||||
{ text: "Blue", color: #0000ff, bg: #eeeeee},
|
||||
{ text: "Red", color: #ff0000, bg: #eeeeee},
|
||||
{ text: "Green", color: #00ff00, bg: #eeeeee},
|
||||
{ text: "Yellow", color: #ffff00, bg: #222222 },
|
||||
{ text: "Black", color: #000000, bg: #eeeeee },
|
||||
{ text: "White", color: #ffffff, bg: #222222 },
|
||||
{ text: "Magenta", color: #ff00ff, bg: #eeeeee },
|
||||
{ text: "Cyan", color: #00ffff, bg: #222222 },
|
||||
] : Rectangle {
|
||||
height: 30px;
|
||||
background: data.bg;
|
||||
width: parent.width;
|
||||
Text {
|
||||
x: 0;
|
||||
text: data.text;
|
||||
color: data.color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `StandardListView`
|
||||
|
||||
Like ListView, but with a default delegate, and a `model` property which is a model of type
|
||||
`StandardListViewItem`
|
||||
|
||||
The `StandardListViewItem` is equivalent to `{ text: string }` but will be improved in the future with `icon`, `checked` and so on (TODO)
|
||||
|
||||
### Properties
|
||||
|
||||
Same as ListView, and in addition:
|
||||
|
||||
* **`model`** (*`[StandardListViewItem]`*): The model
|
||||
* **`current-item`** (*int*): The index of the currently active item. -1 mean none is selected, which is the default
|
||||
|
||||
### Example
|
||||
|
||||
```slint
|
||||
import { StandardListView } from "std-widgets.slint";
|
||||
export component Example inherits Window {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
StandardListView {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
model: [ { text: "Blue"}, { text: "Red" }, { text: "Green" },
|
||||
{ text: "Yellow" }, { text: "Black"}, { text: "White"},
|
||||
{ text: "Magenta" }, { text: "Cyan" },
|
||||
];
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `StandardTableView`
|
||||
|
||||
The `StandardTableView` represents a table of data with columns and rows. Cells are organised in a model where each row is a model of `StandardListViewItem`.
|
||||
|
||||
### Properties
|
||||
|
||||
Same as ListView, and in addition:
|
||||
|
||||
* **`current-sort-column`** (*int*): Indicates the sorted column. -1 mean no column is sorted.
|
||||
* **`columns`** (*`[TableColumn]`*): Defines the model of the table columns.
|
||||
* **`rows`** (*`[StandardListViewItem]`*): Defines the model of table rows.
|
||||
|
||||
### Callbacks
|
||||
|
||||
* **`sort-ascending(int)`**: Emitted if the model should be sorted by the given column in ascending order.
|
||||
* **`sort-descending(int)`**: Emitted if the model should be sorted by the given column in descending order.
|
||||
|
||||
### Example
|
||||
|
||||
```slint
|
||||
import { StandardTableView } from "std-widgets.slint";
|
||||
export component Example inherits Window {
|
||||
width: 230px;
|
||||
height: 200px;
|
||||
StandardTableView {
|
||||
width: 230px;
|
||||
height: 200px;
|
||||
columns: [
|
||||
{ title: "Header 1" },
|
||||
{ title: "Header 2" },
|
||||
];
|
||||
rows: [
|
||||
[
|
||||
{ text: "Item 1" }, { text: "Item 2" },
|
||||
],
|
||||
[
|
||||
{ text: "Item 1" }, { text: "Item 2" },
|
||||
],
|
||||
[
|
||||
{ text: "Item 1" }, { text: "Item 2" },
|
||||
]
|
||||
];
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `ComboBox`
|
||||
|
||||
A button that, when clicked, opens a popup to select a value.
|
||||
|
||||
### Properties
|
||||
|
||||
* **`model`** (*\[string\]*): The list of possible values
|
||||
* **`current-index`**: (*int*): The index of the selected value (-1 if no value is selected)
|
||||
* **`current-value`**: (*string*): The currently selected text
|
||||
* **`enabled`**: (*bool*): When false, the combobox cannot be opened (default: true)
|
||||
|
||||
### Callbacks
|
||||
|
||||
* **`selected(string)`**: A value was selected from the combo box. The argument is the currently selected value.
|
||||
|
||||
### Example
|
||||
|
||||
```slint
|
||||
import { ComboBox } from "std-widgets.slint";
|
||||
export component Example inherits Window {
|
||||
width: 200px;
|
||||
height: 130px;
|
||||
ComboBox {
|
||||
y: 0px;
|
||||
width: self.preferred-width;
|
||||
height: self.preferred-height;
|
||||
model: ["first", "second", "third"];
|
||||
current-value: "first";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `TabWidget`
|
||||
|
||||
TabWidget is a container for a set of tabs. It can only have `Tab` elements as children and only one tab will be visible at
|
||||
a time.
|
||||
|
||||
### Properties
|
||||
|
||||
* **`current-index`** (*int*): The index of the currently visible tab
|
||||
|
||||
### Properties of the `Tab` element
|
||||
|
||||
* **`title`** (*string*): The text written in the tab bar.
|
||||
|
||||
### Example
|
||||
|
||||
```slint
|
||||
import { TabWidget } from "std-widgets.slint";
|
||||
export component Example inherits Window {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
TabWidget {
|
||||
Tab {
|
||||
title: "First";
|
||||
Rectangle { background: orange; }
|
||||
}
|
||||
Tab {
|
||||
title: "Second";
|
||||
Rectangle { background: pink; }
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
## `HorizontalBox`, `VerticalBox`, `GridBox`
|
||||
|
||||
That's the same as `HorizontalLayout`, `VerticalLayout` or `GridLayout` but the spacing and padding values
|
||||
depending on the style instead of defaulting to 0.
|
||||
|
||||
## `AboutSlint`
|
||||
|
||||
This element displays the a "Made with Slint" badge.
|
||||
|
||||
```slint
|
||||
import { AboutSlint } from "std-widgets.slint";
|
||||
export component Example inherits Window {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
AboutSlint {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Selecting a Widget Style
|
||||
|
||||
The widget style is selected at compile time of your project. The details depend on which programming
|
||||
language you're using Slint with.
|
||||
|
||||
<details data-snippet-language="rust">
|
||||
<summary>Selecting a Widget Style when using Slint with Rust:</summary>
|
||||
|
||||
Before you start your compilation, you can select the style by setting the `SLINT_STYLE` variable
|
||||
to one of the style names, such as `fluent` for example.
|
||||
|
||||
### Selecting the Widget Style When Using the `slint_build` Crate
|
||||
|
||||
Select the style with the [`slint_build::compile_with_config()`](https://docs.rs/slint-build/newest/slint_build/fn.compile_with_config.html) function in the compiler configuration argument.
|
||||
|
||||
|
||||
### Selecting the Widget Style When Using the `slint_interpreter` Crate
|
||||
|
||||
Select the style with the [`slint_interpreter::ComponentCompiler::set_style()`](https://docs.rs/slint-interpreter/newest/slint_interpreter/struct.ComponentCompiler.html#method.set_style) function.
|
||||
|
||||
</details>
|
||||
|
||||
<details data-snippet-language="cpp">
|
||||
<summary>Selecting a Widget Style when using Slint with C++:</summary>
|
||||
|
||||
Select the style by defining a `SLINT_STYLE` CMake cache variable to hold the style name as a string. This can be done for example on the command line:
|
||||
|
||||
```sh
|
||||
cmake -DSLINT_STYLE="material" /path/to/source
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
### Selecting the Widget Style When Previewing Designs With `slint-viewer`
|
||||
|
||||
Select the style either by setting the `SLINT_STYLE` environment variable, or passing the style name with the `--style` argument:
|
||||
|
||||
```sh
|
||||
slint-viewer --style material /path/to/design.slint
|
||||
```
|
||||
|
||||
### Selecting the Widget Style When Previewing Designs With The Slint Visual Studio Code Extension
|
||||
|
||||
Select the style by first opening the Visual Studio Code settings editor:
|
||||
|
||||
* On Windows/Linux - File > Preferences > Settings
|
||||
* On macOS - Code > Preferences > Settings
|
||||
|
||||
Then enter the style name under Extensions > Slint > Preview:Style
|
||||
|
||||
### Selecting the Widget Style When Previewing Designs With The Generic LSP Process
|
||||
|
||||
Select the style by setting the `SLINT_STYLE` environment variable before launching the process.
|
||||
Alternatively, if your IDE integration allows passing command line parameters, you can specify the style via `--style`.
|
||||
|
||||
## structs
|
||||
|
||||
### `TableColumn`
|
||||
|
||||
`TableColumn` is used to define the column and the column header of a TableView.
|
||||
|
||||
### Properties
|
||||
|
||||
* **`title`** (*string*): Describes the column header title.
|
||||
* **`min-width`** (*length*): Defines the minimum with of the column.
|
||||
* **`width`** (*length*): The current width of the column.
|
||||
* **`horizontal-stretch`** (*float*): Defines the horizontal stretch of the column.
|
||||
* **`sort-order`** (*`SortOrder`*): Describes the sort order of the column.
|
||||
|
||||
### `StandardListViewItem`
|
||||
|
||||
The `StandardListViewItem` is used to display items in the `StandardListView` and the `StandardTableView`.
|
||||
|
||||
### Properties
|
||||
|
||||
* **`text`** (*string*): Describes the text of the item.
|
||||
|
||||
|
|
@ -52,11 +52,6 @@ The default value of each enum type is always the first value.
|
|||
i_slint_common::for_each_enums!(gen_enums);
|
||||
}
|
||||
|
||||
// Copy out of langref!
|
||||
// TODO: Remove this again.
|
||||
drop(file);
|
||||
std::fs::copy(&path, root.join("docs/builtin_enums.md"))?;
|
||||
|
||||
Ok(())
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue