mirror of
https://github.com/slint-ui/slint.git
synced 2025-09-29 13:24:48 +00:00
docs: Use it's, etc. more consistently (#2287)
This commit is contained in:
parent
0bd99a17fa
commit
42d1fbdbcf
28 changed files with 126 additions and 126 deletions
|
@ -1,13 +1,12 @@
|
|||
# Conclusion
|
||||
|
||||
In this tutorial, we have demonstrated how to combine some built-in Slint elements with Rust code to build a little
|
||||
game. There are many more features that we have not talked about, such as layouts, widgets, or styling.
|
||||
game. There are many more features that we haven't talked about, such as layouts, widgets, or styling.
|
||||
|
||||
We recommend the following links to continue:
|
||||
|
||||
* [Examples](https://github.com/slint-ui/slint/tree/master/examples): In the Slint repository we have collected a few demos and examples. These are a great starting point to learn how to use many Slint features.
|
||||
* [Todo Example](https://github.com/slint-ui/slint/tree/master/examples/todo): This is one of the examples that implements a classic use-case.
|
||||
* [Memory Puzzzle](https://github.com/slint-ui/slint/tree/master/examples/memory): This is a slightly more polished version of the code in this example. And you can <a href="https://slint-ui.com/demos/memory/" target="_blank">play the wasm version</a> in your browser.
|
||||
* [Memory Puzzle](https://github.com/slint-ui/slint/tree/master/examples/memory): This is a slightly more polished version of the code in this example. And you can <a href="https://slint-ui.com/demos/memory/" target="_blank">play the wasm version</a> in your browser.
|
||||
* [Slint API Docs](https://slint-ui.com/docs/rust/slint/): The reference documentation for the main Rust crate.
|
||||
* [Slint Interpreter API Docs](https://slint-ui.com/docs/rust/slint_interpreter/): The reference documentation for Rust crate that allows you to dynamically load `.slint` files.
|
||||
|
||||
|
|
|
@ -10,7 +10,7 @@ cargo add rand@0.8
|
|||
What we'll do is take the list of tiles declared in the .slint language, duplicate it, and shuffle it.
|
||||
We'll do so by accessing the `memory_tiles` property through the Rust code. For each top-level property,
|
||||
a getter and a setter function is generated - in our case `get_memory_tiles` and `set_memory_tiles`.
|
||||
Since `memory_tiles` is an array in the `.slint` language, it is represented as a [`Rc<dyn slint::Model>`](https://slint-ui.com/docs/rust/slint/trait.model).
|
||||
Since `memory_tiles` is an array in the `.slint` language, it's represented as a [`Rc<dyn slint::Model>`](https://slint-ui.com/docs/rust/slint/trait.model).
|
||||
We can't modify the model generated by the .slint, but we can extract the tiles from it, and put it
|
||||
in a [`VecModel`](https://slint-ui.com/docs/rust/slint/struct.vecmodel) which implements the `Model` trait.
|
||||
`VecModel` allows us to make modifications and we can use it to replace the static generated model.
|
||||
|
|
|
@ -26,7 +26,7 @@ We add the following handler in <span class="hljs-title">MainWindow</span>:
|
|||
On the Rust side, we can now add an handler to the `check_if_pair_solved` callback, that will check if
|
||||
two tiles are opened. If they match, the `solved` property is set to true in the model. If they don't
|
||||
match, start a timer that will close them after one second. While the timer is running, we disable every tile so
|
||||
one cannot click anything during this time.
|
||||
one can't click anything during this time.
|
||||
|
||||
Insert this code before the `main_window.run()` call:
|
||||
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
With the skeleton in place, let's look at the first element of the game, the memory tile. It will be the
|
||||
visual building block that consists of an underlying filled rectangle background, the icon image. Later we'll add a
|
||||
covering rectangle that acts as a curtain. The background rectangle is declared to be 64 logical pixels wide and tall,
|
||||
and it is filled with a soothing tone of blue. Note how lengths in the `.slint` language have a unit, here
|
||||
and it's filled with a soothing tone of blue. Note how lengths in the `.slint` language have a unit, here
|
||||
the `px` suffix. That makes the code easier to read and the compiler can detect when your are accidentally
|
||||
mixing values with different units attached to them.
|
||||
|
||||
|
@ -16,7 +16,7 @@ We copy the following code inside of the `slint!` macro:
|
|||
Inside the <span class="hljs-built_in">Rectangle</span> we place an <span class="hljs-built_in">Image</span> element that
|
||||
loads an icon with the <span class="hljs-built_in">@image-url()</span> macro.
|
||||
When using the `slint!` macro, the path is relative to the folder in which the Cargo.toml is located.
|
||||
When using .slint files, it is relative to the folder of the .slint file containing it.
|
||||
When using .slint files, it's relative to the folder of the .slint file containing it.
|
||||
This icon and others we're going to use later need to be installed first. You can download a
|
||||
[Zip archive](https://slint-ui.com/blog/memory-game-tutorial/icons.zip) that we have prepared and extract it with the
|
||||
following two commands:
|
||||
|
|
|
@ -55,21 +55,21 @@ file. The Slint runtime expects the `<canvas>` element to have the id `id = "can
|
|||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<!-- canvas required by the Slint runtime -->
|
||||
<canvas id="canvas"></canvas>
|
||||
<script type="module">
|
||||
// import the generated file.
|
||||
import init from './pkg/memory.js';
|
||||
init();
|
||||
</script>
|
||||
</body>
|
||||
<body>
|
||||
<!-- canvas required by the Slint runtime -->
|
||||
<canvas id="canvas"></canvas>
|
||||
<script type="module">
|
||||
// import the generated file.
|
||||
import init from "./pkg/memory.js";
|
||||
init();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Unfortunately, loading ES modules is not allowed for files on the file system when accessed from a
|
||||
Unfortunately, loading ES modules isn't allowed for files on the file system when accessed from a
|
||||
`file://` URL, so we can't simply open the index.html. Instead we need to serve it through a web server.
|
||||
For example, using Python, it is as simple as running
|
||||
For example, using Python, it's as simple as running
|
||||
|
||||
```sh
|
||||
python3 -m http.server
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue