ART - A library for creating UI
- Declarative syntax (inspired by React)
- Animation,Motion (Spring, Tween - inspired by React Native Animated + Animation | Framer for Developers)
- Styles (like React Native)
- Layouts (Flexbox fully functional + Roblox Layouts (Table, List, Grid))
- Anchoring system (Similar to Basic Layout | Unity UI | 1.0.0)
- 3D Transform (Frustum, translate, Rotate, X, Y, Z)
… coming soon
local Frame, ScreenGui = Art.Frame, Art.ScreenGui
local MyScene = Art.Component(function(self, props)
return ScreenGui {
name = "Art Test",
displayOrder = 10,
enabled = true,
resetOnSpawn = false,
ignoreGuiInset = true,
children = Frame {
size = {400, 200},
borderSizePixel = 0,
position = { 50, 50 },
layout = {
type = 'flex',
direction = 'row',
justify = 'flex-start',
align = 'stretch'
},
children = props.children
},
}
end)
local styles = {
Child = {
borderSizePixel = 0,
size = { 40, 40 },
}
}
Art.render(
MyScene {
children = {
Frame {
name = 'RED',
style = styles.Child,
backgroundColor3 = {255, 0, 0},
layout = {
flexGrow = 1,
alignSelf = 'flex-start'
},
},
Frame {
name = 'GREEN',
style = styles.Child,
size = { 50, 100 },
backgroundColor3 = {0, 255, 0},
layout = {
flexGrow = 1,
alignSelf = 'flex-end'
},
},
Frame {
name = 'BLUE',
style = styles.Child,
backgroundColor3 = {0, 0, 255},
layout = {
flexGrow = 3,
alignSelf = 'stretch'
},
},
Frame {
name = 'FUCHSIA',
style = styles.Child,
backgroundColor3 = {255, 0, 255},
layout = {
flexGrow = 1,
alignSelf = 'center'
},
}
}
},
Players.LocalPlayer.PlayerGui
)