hakowork/vide
3
0
Fork 0
mirror of https://github.com/centau/vide.git synced 2026-08-20 14:41:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update docs

Browse source
This commit is contained in:
aaron 2023-09-20 21:56:25 +01:00
parent 85b1127551
commit 5735d8e3f0
2 changed files with 38 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

2
CHANGELOG.md
View file

@ -8,6 +8,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
--- ---
## [0.1.0] - 0000-00-00 ## [0.1.0] - 2023-09-20
- Initial release - Initial release

53
docs/tut/crash-course/9-control-flow.md
View file

@ -97,29 +97,40 @@ local function JoinMenu()
end end
``` ```
Above is an example of using a switch to create a join menu. Each time This example is equivalent to the previous one.
`joined` toggles, the current button will be destroyed, and a new button
created, which the text to represent the current action, to join or leave.
The callbacks given to control flow functions are ran in a new reactive-scope, The switch can map any value to any component.
so any cleanups registered will be ran when the input is changed and a new
output is created.
Another control flow function, `indexes()`, is used to create elements from an ```lua
input table. type ActiveMenu = "none" | "inventory" | "shop" | "settings"
local menu = source "none"
switch(menu) {
inventory = InventoryMenu,
shop = ShopMenu.
settings = SettingsMenu
}
```
## indexes()
Often, you will have a table of values that will be displayed in a similar Often, you will have a table of values that will be displayed in a similar
manner. Rather than manually looping over each value to generate a corresponding manner. Rather than manually looping over each value to generate a corresponding
UI element, `indexes()` can autmatically run a transform function for each UI element, `indexes()` allows you to create an instance for each table index,
index and value, generating a UI element. to display the value at that index.
```lua ```lua
local todoList = { local todoList = {
"Finish the crash course", "finish the crash course",
"Star vide's GitHub" "star vide's GitHub"
} }
local elements = indexes(todoList, function(todo, i) local function TodoList(props: { list: () -> Array<string> })
return create "Frame" {
create "UIListLayout" {},
indexes(todoList, function(todo, i)
return create "TextLabel" { return create "TextLabel" {
Text = function() Text = function()
return i .. ": " .. todo() return i .. ": " .. todo()
@ -128,21 +139,19 @@ local elements = indexes(todoList, function(todo, i)
LayoutOrder = i LayoutOrder = i
} }
end) end)
mount(function()
return create "ScreenGui" {
create "UIListLayout" {}, elements
} }
end, game.StarterGui) end
TodoList { list = todoList }
``` ```
For each unique index in the passed table, the transform function will be called For each unique index in the passed table, the transform function will be called
with 1. a source containing the value of the index, 2. the index itself. with 1. a source containing the value of the index, 2. the index itself.
When the value at an index is changed, the function is not reran. Instead, the When the value at an index is changed, the function is not reran. Instead, the
given source is updated instead. given source for that index is updated.
`indexes()` is said to map each *index* in a table to a UI element, each index
has a single corresponding element.
An element is only destroyed if the value of an index is set to `nil`. An element is only destroyed if the value of an index is set to `nil`.
Together, these control flow functions cover the majority of cases where you
need to dynamically create and destroy parts of your UI.