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

Refactor components section in 3-components.md

Browse source 
Updated the components section to improve formatting and clarity.
This commit is contained in:
sindri 2026-03-02 13:43:55 +01:00 • committed by GitHub
parent c247a2eeb2
commit 0e9fc76e5b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 13 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

33
docs/tut/crash-course/3-components.md
View file

@ -1,4 +1,4 @@
<img width="239" height="496" alt="image" src="https://github.com/user-attachments/assets/2d5de615-60bc-4e1b-997f-ec1cac69c8df" /># Components # Components
Vide encourages separating different parts of your UI into functions called Vide encourages separating different parts of your UI into functions called
*components*. *components*.
@ -14,27 +14,24 @@ together.
local create = vide.create local create = vide.create
local function Button(props: { local function Button(props: {
Position: UDim2, Position: UDim2,
Text: string, Text: string,
Activated: () -> () Activated: () -> ()
}) })
return create "TextButton" { return create "TextButton" {
BackgroundColor3 = Color3.fromRGB(50, 50, 50), BackgroundColor3 = Color3.fromRGB(50, 50, 50),
TextColor3 = Color3.fromRGB(255, 255, 255), TextColor3 = Color3.fromRGB(255, 255, 255),
Size = UDim2.fromOffset(200, 150), Size = UDim2.fromOffset(200, 150),
Position = props.Position, Position = props.Position,
Text = props.Text, Text = props.Text,
Activated = props.Activated, Activated = props.Activated,
create "UICorner" {} create "UICorner" {}
} }
end end
return Button return Button
```
```luau [Menu.luau]
local create = vide.create local create = vide.create
local source = vide.source local source = vide.source
local effect = vide.effect local effect = vide.effect
@ -115,8 +112,6 @@ local function Menu()
end end
return Menu return Menu
```
```luau [slider.luau]
-- Example of a component that wraps the built-in slider component. -- Example of a component that wraps the built-in slider component.
-- This keeps a consistent "component(props) -> Instance" style. -- This keeps a consistent "component(props) -> Instance" style.
@ -165,5 +160,3 @@ end
return Slider return Slider
::: :::
A single parameter `props` is used to pass properties to the component.