language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-08-04 02:39:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Visal docs tweak (#7264)

Browse source
This commit is contained in:
Nigel Breslaw 2025-01-03 15:41:21 +01:00 • committed by GitHub
parent b97c7c7770
commit 4f08bf6fd2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 7 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

10
docs/astro/src/content/docs/index.mdx
View file

@ -23,7 +23,7 @@ import LineHighlight from '/src/assets/getting-started/line-highlight.webp';
<div style="display: flex; justify-content: center;">
<Image src={BannerImage} width="700px" alt="Slint examples running on a range of devices"/>
<Image src={BannerImage} style={{width: "700px"}} width="1200px" alt="Slint examples running on a range of devices"/>
</div>
The documentation is split into several sections:
@ -67,25 +67,25 @@ href={`${import.meta.env.BASE_URL}/language-integrations/`}
The documentation includes a lot of code snippets. The language hint lets you know what
language the snippet is written in.
<div style="display: flex; justify-content: left;">
<Image src={LanguageHint} width="500" alt="Screenshot showing language hint" />
<Image src={LanguageHint} style={{width: "500px"}} alt="Screenshot showing language hint" />
</div>
Some snippets of Slint code are interactive. You can click the `run` button to run the snippet
in a web based live-editing tool called [SlintPad](https://slintpad.com).
<div style="display: flex; justify-content: left;">
<Image src={RunInSlintPad} width="500" alt="Screenshot showing run button" />
<Image src={RunInSlintPad} style={{width: "500px"}} alt="Screenshot showing run button" />
</div>
To easily copy the text of a snippet use the copy button.
<div style="display: flex; justify-content: left;">
<Image src={CopySnippet} width="500" alt="Screenshot showing copy button" />
<Image src={CopySnippet} style={{width: "500px"}} alt="Screenshot showing copy button" />
</div>
Examples that want to help focus on a specific part of the code will have highlights. They are only
a documentation feature and you won't see this kind of highlight when writing your own code.
<div style="display: flex; justify-content: left;">
<Image src={LineHighlight} width="500" alt="Screenshot showing text highlights" />
<Image src={LineHighlight} style={{width: "500px"}} alt="Screenshot showing text highlights" />
</div>
### Get in touch

7
docs/astro/src/content/docs/tutorial/creating_the_tiles.mdx
View file

@ -58,7 +58,7 @@ import mainTilesFromRust from '/src/content/code/main_tiles_from_rust.rs?raw'
</TabItem>
</Tabs>
{/*
The code takes the list of tiles, duplicates it, and shuffles it, accessing the `memory_tiles` property through the Rust code.
@ -70,13 +70,10 @@ You can't change the model generated by Slint, but you can extract the tiles fro
in a [`VecModel`](https://slint.dev/docs/rust/slint/struct.VecModel) which implements the `Model` trait.
`VecModel` lets you make changes and you can use it to replace the static generated model.
::::
:::::
Running this code opens a window that now shows a 4 by 4 grid of rectangles, which show or hide
the icons when a player clicks on them.
There's one last aspect missing now, the rules for the game.
<video autoplay loop muted playsinline src="https://slint.dev/blog/memory-game-tutorial/creating-the-tiles-from-rust.mp4"></video> */}
<video autoplay loop muted playsinline src="https://slint.dev/blog/memory-game-tutorial/creating-the-tiles-from-rust.mp4"></video>