mirror of
https://github.com/centau/vide.git
synced 2026-08-20 14:41:37 +00:00
153 lines
3.8 KiB
Markdown
153 lines
3.8 KiB
Markdown
# Element Creation API
|
|
|
|
<br/>
|
|
|
|
## mount()
|
|
|
|
Runs a function and applies its result to a target instance.
|
|
|
|
- **Type**
|
|
|
|
```lua
|
|
function mount<T>(component: () -> T, target: Instance?): () -> ()
|
|
```
|
|
|
|
- **Details**
|
|
|
|
The result of the function is applies to the target in the same way
|
|
properties are using `create()`.
|
|
|
|
The function is ran in a new reactive scope, just like
|
|
[root()](reactivity-core.md#root).
|
|
|
|
Returns a function that when called will destroy the reactive scope.
|
|
|
|
- **Example**
|
|
|
|
```lua
|
|
local function App()
|
|
return create "ScreenGui" {
|
|
create "TextLabel" { Text = "Vide" }
|
|
}
|
|
end
|
|
|
|
mount(App, game.StarterGui)
|
|
```
|
|
|
|
## create()
|
|
|
|
Creates a new UI element, applying any given properties.
|
|
|
|
- **Type**
|
|
|
|
```lua
|
|
function create(class: string): (Properties) -> Instance
|
|
function create(instance: Instance): (Properties) -> Instance
|
|
|
|
type Properties = Map<string|number, any>
|
|
```
|
|
|
|
- **Details**
|
|
|
|
The function can take either a `string` or an `Instance` as its first argument.
|
|
|
|
- If given a `string`, a new instance with the same class name will be created.
|
|
- If given an `Instance`, a new instance that is a clone of the given instance
|
|
will be created.
|
|
|
|
This returns another function that is used to apply any properties to the new
|
|
instance.
|
|
|
|
- **Property setting rules**
|
|
|
|
- If a table index is a string:
|
|
- If its value is a function then it will either bind that property to
|
|
the function or connect it if the property type is a `RBXScriptSignal`.
|
|
- If the value is not a function then the property will be set to that
|
|
value.
|
|
- If a table index is a number:
|
|
- If its value is an action then that action will be queued to run after
|
|
properties are set.
|
|
- If its value is a table then that table will be recursively
|
|
processed just like the outer table.
|
|
- If its value is a function then it will bind the instances children to
|
|
that function.
|
|
- If its value is an instance then it will be parented to the instance.
|
|
|
|
- **Example**
|
|
|
|
Basic element creation.
|
|
|
|
```lua
|
|
local frame = create "Frame" {
|
|
Name = "NewFrame",
|
|
Position = UDim2.fromScale(1, 0)
|
|
}
|
|
```
|
|
|
|
A component using property nesting.
|
|
|
|
```lua
|
|
type Layout = {
|
|
Layout = {
|
|
Position: UDim2?,
|
|
Size: UDim2?,
|
|
AnchorPoint: Vector2?
|
|
}
|
|
}
|
|
|
|
type Children = {
|
|
Children = Array<Instance>
|
|
}
|
|
|
|
function Background(props: Layout & Children & {
|
|
Color: Color3
|
|
})
|
|
return create "Frame" {
|
|
BackgroundColor3 = props.Color,
|
|
props.Layout,
|
|
props.Children
|
|
}
|
|
end
|
|
```
|
|
|
|
## action()
|
|
|
|
Creates a callback that can be passed to `create()` to invoke custom actions on
|
|
instances.
|
|
|
|
- **Type**
|
|
|
|
```lua
|
|
function action((Instance) -> (), priority: number = 1): Action
|
|
```
|
|
|
|
- **Details**
|
|
|
|
When passed to `create()`, the given callback is called with the instance
|
|
being created as the only argument. Actions take precedence over property
|
|
and child assignments.
|
|
|
|
A priority can be optionally specified to ensure certain actions run after
|
|
other actions. Higher priority numbers are ran after lower priority numbers.
|
|
|
|
- **Example**
|
|
|
|
An action to listen to changed properties:
|
|
|
|
```lua
|
|
local function changed(property: string, callback: (new) -> ())
|
|
return action(function(instance)
|
|
instance:GetPropertyChangedSignal("property"):Connect(function()
|
|
callback(instance[property])
|
|
end)
|
|
end)
|
|
end
|
|
|
|
local output = source ""
|
|
|
|
create "TextBox" {
|
|
-- will update the `output` source anytime the text property is changed
|
|
changed("Text", output)
|
|
}
|
|
```
|