mirror of
https://github.com/slint-ui/slint.git
synced 2025-08-04 18:58:36 +00:00
1.9 Docs improve reference structure
This commit is contained in:
Nigel Breslaw
GitHub
parent
1663337ad5
commit
f6da11e153
39 changed files with 222 additions and 138 deletions
|
|
@ -172,46 +172,116 @@ export default defineConfig({
|
|||
},
|
||||
{
|
||||
label: "Reference",
|
||||
link: "reference/primitive-types",
|
||||
link: "reference/overview",
|
||||
icon: "information",
|
||||
items: [
|
||||
{
|
||||
label: "Primitive Types",
|
||||
slug: "reference/primitive-types",
|
||||
label: "Overview",
|
||||
slug: "reference/overview",
|
||||
},
|
||||
{
|
||||
label: "Colors & Brushes",
|
||||
slug: "reference/colors-and-brushes",
|
||||
},
|
||||
{
|
||||
label: "Common Properties & Callbacks",
|
||||
slug: "reference/common",
|
||||
},
|
||||
{
|
||||
label: "Basic Elements",
|
||||
label: "Types and Properties",
|
||||
collapsed: true,
|
||||
autogenerate: {
|
||||
directory: "reference/elements",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
label: "Primitive Types",
|
||||
slug: "reference/primitive-types",
|
||||
},
|
||||
{
|
||||
label: "Common Properties & Callbacks",
|
||||
slug: "reference/common",
|
||||
},
|
||||
{
|
||||
label: "Colors & Brushes",
|
||||
slug: "reference/colors-and-brushes",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Gestures & Keyboard",
|
||||
label: "Visual Elements",
|
||||
collapsed: true,
|
||||
autogenerate: {
|
||||
directory: "reference/gestures",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
label: "Basic Elements",
|
||||
autogenerate: {
|
||||
directory: "reference/elements",
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Gestures",
|
||||
autogenerate: {
|
||||
directory: "reference/gestures",
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Keyboard Input",
|
||||
items: [
|
||||
{
|
||||
label: "Overview",
|
||||
slug: "reference/keyboard-input/overview",
|
||||
},
|
||||
{
|
||||
label: "HorizontalLayout",
|
||||
slug: "reference/keyboard-input/focusscope",
|
||||
},
|
||||
{
|
||||
label: "VerticalLayout",
|
||||
slug: "reference/keyboard-input/textinput",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Layouts",
|
||||
items: [
|
||||
{
|
||||
label: "Overview",
|
||||
slug: "reference/layouts/overview",
|
||||
},
|
||||
{
|
||||
label: "GridLayout",
|
||||
slug: "reference/layouts/gridlayout",
|
||||
},
|
||||
{
|
||||
label: "HorizontalLayout",
|
||||
slug: "reference/layouts/horizontallayout",
|
||||
},
|
||||
{
|
||||
label: "VerticalLayout",
|
||||
slug: "reference/layouts/verticallayout",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Window",
|
||||
autogenerate: {
|
||||
directory: "reference/window",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Layouts",
|
||||
label: "Globals",
|
||||
collapsed: true,
|
||||
autogenerate: {
|
||||
directory: "reference/layouts",
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Window",
|
||||
collapsed: true,
|
||||
autogenerate: { directory: "reference/window" },
|
||||
items: [
|
||||
{
|
||||
label: "Global Structs and Enums",
|
||||
slug: "reference/global-structs-enums",
|
||||
},
|
||||
{
|
||||
label: "Global Functions",
|
||||
collapsed: true,
|
||||
items: [
|
||||
{
|
||||
label: "Math",
|
||||
slug: "reference/global-functions/math",
|
||||
},
|
||||
{
|
||||
label: "animation-tick() / debug()",
|
||||
slug: "reference/global-functions/builtinfunctions",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Std-Widgets",
|
||||
|
|
@ -220,55 +290,32 @@ export default defineConfig({
|
|||
"reference/std-widgets/overview",
|
||||
"reference/std-widgets/style",
|
||||
{
|
||||
label: "UI Widgets",
|
||||
items: [
|
||||
"reference/std-widgets/aboutslint",
|
||||
"reference/std-widgets/button",
|
||||
"reference/std-widgets/checkbox",
|
||||
"reference/std-widgets/combobox",
|
||||
"reference/std-widgets/datepicker",
|
||||
"reference/std-widgets/lineedit",
|
||||
"reference/std-widgets/listview",
|
||||
"reference/std-widgets/progressindicator",
|
||||
"reference/std-widgets/scrollview",
|
||||
"reference/std-widgets/slider",
|
||||
"reference/std-widgets/spinbox",
|
||||
"reference/std-widgets/spinner",
|
||||
"reference/std-widgets/standardbutton",
|
||||
"reference/std-widgets/standardlistview",
|
||||
"reference/std-widgets/standardtableview",
|
||||
"reference/std-widgets/switch",
|
||||
"reference/std-widgets/tabwidget",
|
||||
"reference/std-widgets/textedit",
|
||||
"reference/std-widgets/timepicker",
|
||||
],
|
||||
label: "Basic Widgets",
|
||||
autogenerate: {
|
||||
directory:
|
||||
"reference/std-widgets/basic-widgets",
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Layout Widgets",
|
||||
items: [
|
||||
"reference/std-widgets/gridbox",
|
||||
"reference/std-widgets/groupbox",
|
||||
"reference/std-widgets/horizontalbox",
|
||||
"reference/std-widgets/verticalbox",
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Global Structs and Enums",
|
||||
slug: "reference/global-structs-enums",
|
||||
},
|
||||
{
|
||||
label: "Global Functions",
|
||||
collapsed: true,
|
||||
items: [
|
||||
{
|
||||
label: "Math",
|
||||
slug: "reference/global-functions/math",
|
||||
label: "Views",
|
||||
autogenerate: {
|
||||
directory:
|
||||
"reference/std-widgets/views",
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "animation-tick() / debug()",
|
||||
slug: "reference/global-functions/builtinfunctions",
|
||||
label: "Layouts",
|
||||
autogenerate: {
|
||||
directory:
|
||||
"reference/std-widgets/layouts",
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Misc",
|
||||
autogenerate: {
|
||||
directory:
|
||||
"reference/std-widgets/misc",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -351,7 +398,6 @@ export default defineConfig({
|
|||
]),
|
||||
starlightLinksValidator({
|
||||
errorOnLocalLinks: false,
|
||||
exclude: ["**/index.mdx"],
|
||||
}),
|
||||
],
|
||||
social: {
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ function languageLabel() {
|
|||
inset-inline-end: calc(var(--ec-brdWd) + var(--ec-uiPadInl) );
|
||||
direction: ltr;
|
||||
font-size: 0.8rem;
|
||||
color: #767676;
|
||||
color:rgb(169, 169, 169);
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
|
||||
title: Winit Backend
|
||||
description: Winit Backend
|
||||
next: false
|
||||
---
|
||||
|
||||
The Winit backend uses the [winit](https://docs.rs/winit/latest/winit/) library to interact with the
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
---
|
||||
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
|
||||
// cSpell: ignore msgfmt msgctx msginit poedit Lokalize Transifex
|
||||
title: Translations
|
||||
description: Translations
|
||||
---
|
||||
|
||||
<!-- cSpell: ignore msgfmt msgctx msginit poedit Lokalize Transifex -->
|
||||
import { Tabs, TabItem, FileTree } from '@astrojs/starlight/components';
|
||||
|
||||
Slint's translation infrastructure makes your application available in different languages.
|
||||
|
||||
|
|
@ -139,9 +140,14 @@ Slint can use the [Gettext](https://www.gnu.org/software/gettext/) library to lo
|
|||
|
||||
Gettext expects translation files - called message catalogs - in following directory hierarchy:
|
||||
|
||||
```
|
||||
dir_name/locale/LC_MESSAGES/domain_name.mo
|
||||
```
|
||||
<FileTree>
|
||||
|
||||
- dir_name/
|
||||
- locale/ e.g. `fr`, `en`, `de`, etc
|
||||
- LC_MESSAGES/
|
||||
- domain_name.mo
|
||||
</FileTree>
|
||||
|
||||
|
||||
- `dir_name`: the base directory that you can choose freely.
|
||||
- `locale`: The name of the user's locale for a given target language, such as `fr` for French, or `de` for German.
|
||||
|
|
@ -150,38 +156,13 @@ dir_name/locale/LC_MESSAGES/domain_name.mo
|
|||
|
||||
- `domain_name`: Selected based on the programming language you're using Slint with.
|
||||
|
||||
:::info
|
||||
|
||||
:::tip[Tip]
|
||||
Read the [Gettext documentation](https://www.gnu.org/software/gettext/manual/gettext.html#Locating-Catalogs) for more information.
|
||||
|
||||
:::
|
||||
|
||||
### Select and Load Translations with Rust
|
||||
|
||||
First, enable the `gettext` feature of the `slint` crate in the `features` section to gain access to the translations API
|
||||
and activate run-time translation support.
|
||||
|
||||
Next, use the `slint::init_translations!` macro to specify the base location of your `.mo` files. This is
|
||||
the `dir_name` in the scheme of the previous section. Slint expects the `.mo` files to be in the
|
||||
corresponding sub-directories and their file name - `domain_name` - must match the package name
|
||||
in your `Cargo.toml`. This is often the same as the crate name.
|
||||
|
||||
For example:
|
||||
|
||||
```rust
|
||||
slint::init_translations!(concat!(env!("CARGO_MANIFEST_DIR"), "/lang/"));
|
||||
```
|
||||
|
||||
For example, if your `Cargo.toml` contains the following lines and the user's locale is `fr`:
|
||||
|
||||
```toml
|
||||
[package]
|
||||
name = "gallery"
|
||||
```
|
||||
|
||||
With these settings, Slint looks for `gallery.mo` in the `lang/fr/LC_MESSAGES/gallery.mo`.
|
||||
|
||||
### Select and Load Translations with C++
|
||||
### Select and Load Translations
|
||||
<Tabs syncKey="dev-language">
|
||||
<TabItem label="C++" icon="cpp">
|
||||
|
||||
First, enable the `SLINT_FEATURE_GETTEXT` cmake option when compiling Slint to gain access to
|
||||
the translations API and activate run-time translation support.
|
||||
|
|
@ -220,6 +201,33 @@ int main()
|
|||
|
||||
For example, if you're using the above and the user's locale is `fr`,
|
||||
Slint looks for `my_application.mo` in the `lang/fr/LC_MESSAGES/` directory.
|
||||
</TabItem>
|
||||
<TabItem label="Rust" icon="rust">
|
||||
|
||||
First, enable the `gettext` feature of the `slint` crate in the `features` section to gain access to the translations API
|
||||
and activate run-time translation support.
|
||||
|
||||
Next, use the `slint::init_translations!` macro to specify the base location of your `.mo` files. This is
|
||||
the `dir_name` in the scheme of the previous section. Slint expects the `.mo` files to be in the
|
||||
corresponding sub-directories and their file name - `domain_name` - must match the package name
|
||||
in your `Cargo.toml`. This is often the same as the crate name.
|
||||
|
||||
For example:
|
||||
|
||||
```rust
|
||||
slint::init_translations!(concat!(env!("CARGO_MANIFEST_DIR"), "/lang/"));
|
||||
```
|
||||
|
||||
For example, if your `Cargo.toml` contains the following lines and the user's locale is `fr`:
|
||||
|
||||
```toml
|
||||
[package]
|
||||
name = "gallery"
|
||||
```
|
||||
|
||||
With these settings, Slint looks for `gallery.mo` in the `lang/fr/LC_MESSAGES/gallery.mo`.
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
## Bundled Translations
|
||||
|
||||
|
|
@ -233,17 +241,9 @@ Translation files should be organized in the following hierarchy:
|
|||
path/<lang>/LC_MESSAGES/<domain>.po
|
||||
```
|
||||
|
||||
### Bundling with Rust
|
||||
|
||||
```rust
|
||||
let config = slint_build::CompilerConfiguration::new()
|
||||
.with_bundled_translations("path/to/translations");
|
||||
```
|
||||
|
||||
The `<domain>` is the crate name.
|
||||
|
||||
### Bundling with C++
|
||||
|
||||
### Bundling
|
||||
<Tabs syncKey="dev-language">
|
||||
<TabItem label="C++" icon="cpp">
|
||||
Set the `SLINT_BUNDLE_TRANSLATIONS` property in CMake:
|
||||
|
||||
```cmake
|
||||
|
|
@ -252,6 +252,20 @@ set_property(TARGET my_application PROPERTY SLINT_BUNDLE_TRANSLATIONS "${CMAKE_C
|
|||
|
||||
the `<domain>` is the cmake target name.
|
||||
|
||||
</TabItem>
|
||||
<TabItem label="Rust" icon="rust">
|
||||
|
||||
```rust
|
||||
let config = slint_build::CompilerConfiguration::new()
|
||||
.with_bundled_translations("path/to/translations");
|
||||
```
|
||||
|
||||
The `<domain>` is the crate name.
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
|
||||
|
||||
### Selecting a Translation
|
||||
|
||||
If you enable the `std` feature with Slint, language for translations is detected based on the locale.
|
||||
|
|
@ -6,7 +6,7 @@ description: Text element api.
|
|||
|
||||
import SlintProperty from '/src/components/SlintProperty.astro';
|
||||
import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
|
||||
|
||||
import Link from '/src/components/Link.astro';
|
||||
|
||||
|
||||
```slint playground
|
||||
|
|
@ -74,7 +74,7 @@ Text {
|
|||
|
||||
:::note[Note]
|
||||
Make sure the font is loaded before using it in a `Text` element.
|
||||
See ??????.
|
||||
See <Link type="FontHandling" /> for more.
|
||||
:::
|
||||
</SlintProperty>
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ Some of the math functions can be used in a postfix style which can make the cod
|
|||
x: -10.abs(); // sets x to 10
|
||||
```
|
||||
|
||||
#### **T type**
|
||||
**T type**
|
||||
Many of the math functions can be used with any <Link type="NumericTypes" label="numeric type"/> such as `angle`, `duration`, `float`, `int`, `length`, and `percent`. These are represented on this page as `T`.
|
||||
|
||||
## General Math Functions
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
|
||||
title: Key Namespace
|
||||
description: Key Namespace
|
||||
title: Key Handling Overview
|
||||
description: Key Handling Overview
|
||||
---
|
||||
|
||||
import Link from '/src/components/Link.astro';
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
|
||||
title: Common Properties
|
||||
description: Layout Common Properties
|
||||
---
|
||||
11
docs/astro/src/content/docs/reference/overview.mdx
Normal file
11
docs/astro/src/content/docs/reference/overview.mdx
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
|
||||
title: Reference Overview
|
||||
description: Reference Overview
|
||||
prev: false
|
||||
---
|
||||
|
||||
This section contains the API reference for all aspects of the Slint language. All the
|
||||
elements, properties, functions, callbacks and namespaces. It also contains the API
|
||||
reference for the `std-widgets` library. A set of cross platform components that can
|
||||
be used to build desktop applications.
|
||||
|
|
@ -7,7 +7,9 @@ description: All Slint types
|
|||
import SlintProperty from '/src/components/SlintProperty.astro';
|
||||
import Link from '/src/components/Link.astro';
|
||||
|
||||
All properties in Slint have a type. Slint knows these basic types:
|
||||
Slint is a statically typed language and offers a rich range of primitive types.
|
||||
|
||||
## Primitive Types
|
||||
|
||||
### bool
|
||||
<SlintProperty propName="bool" typeName="bool" defaultValue='false'>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
|
||||
title: Conclusion
|
||||
description: Conclusion
|
||||
next: false
|
||||
---
|
||||
|
||||
This tutorial showed you how to combine built-in Slint elements with C++, Rust, or NodeJS code to build a
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
|
||||
title: Intro
|
||||
description: Intro
|
||||
prev: false
|
||||
---
|
||||
|
||||
This tutorial introduces you to the Slint framework in a playful way by implementing a memory game. It combines the Slint language for the graphics with the game rules implemented in C++, Rust, or NodeJS.
|
||||
|
|
|
|||
|
|
@ -9,9 +9,10 @@ test("smoke test", async ({ page }) => {
|
|||
.getByLabel("Main")
|
||||
.getByRole("link", { name: "Reference" })
|
||||
.click();
|
||||
await page.locator("summary").filter({ hasText: "Basic Elements" }).click();
|
||||
await page.getByRole("link", { name: "Image", exact: true }).click();
|
||||
await page.getByText("Visual Elements").click();
|
||||
await page.getByRole("link", { name: "Image" }).click();
|
||||
await page.getByRole("link", { name: "colorize" }).click();
|
||||
await expect(page.locator("#colorize")).toContainText("colorize");
|
||||
await page.getByRole("link", { name: "brush", exact: true }).click();
|
||||
await expect(page.locator("#brush")).toContainText("brush");
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue