TheZone/clay
1
0
Fork 0
mirror of https://github.com/nicbarker/clay.git synced 2025-04-20 05:08:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix a few tab indentations.

Browse Source
This commit is contained in:
Ben Block 2025-02-21 11:59:31 -05:00
parent 3e10eede2d
commit 058c5ecf63
1 changed files with 38 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
bindings/odin/README.md
View File

@ -22,7 +22,7 @@ CLAY({ .id = CLAY_ID("Outer"), .layout = { .padding = CLAY_PADDING_ALL(16) } })
```Odin ```Odin
// Odin form of element macros // Odin form of element macros
if clay.UI({ id = clay.ID("Outer"), layout = { padding = clay.PaddingAll(16) }}) { if clay.UI({ id = clay.ID("Outer"), layout = { padding = clay.PaddingAll(16) }}) {
// Child elements here // Child elements here
} }
``` ```
@ -48,15 +48,15 @@ clay.Initialize(arena)
```Odin ```Odin
// Example measure text function // Example measure text function
measure_text :: proc "c" ( measure_text :: proc "c" (
text: clay.StringSlice, text: clay.StringSlice,
config: ^clay.TextElementConfig, config: ^clay.TextElementConfig,
userData: rawptr, userData: rawptr,
) -> clay.Dimensions { ) -> clay.Dimensions {
// clay.TextElementConfig contains members such as fontId, fontSize, letterSpacing, etc.. // clay.TextElementConfig contains members such as fontId, fontSize, letterSpacing, etc..
// Note: clay.String->chars is not guaranteed to be null terminated // Note: clay.String->chars is not guaranteed to be null terminated
return { return {
width = f32(text.length * i32(config.fontSize)), width = f32(text.length * i32(config.fontSize)),
height = f32(config.fontSize), height = f32(config.fontSize),
} }
} }
@ -87,17 +87,17 @@ COLOR_BLACK :: clay.Color{0, 0, 0, 255}
// Layout config is just a struct that can be declared statically, or inline // Layout config is just a struct that can be declared statically, or inline
sidebar_item_layout := clay.LayoutConfig { sidebar_item_layout := clay.LayoutConfig {
sizing = { sizing = {
width = clay.SizingGrow({}), width = clay.SizingGrow({}),
height = clay.SizingFixed(50) height = clay.SizingFixed(50)
}, },
} }
// Re-useable components are just normal procs. // Re-useable components are just normal procs.
sidebar_item_component :: proc(index: u32) { sidebar_item_component :: proc(index: u32) {
if clay.UI()({ if clay.UI()({
id = clay.ID("SidebarBlob", index), id = clay.ID("SidebarBlob", index),
layout = sidebar_item_layout, layout = sidebar_item_layout,
backgroundColor = COLOR_ORANGE, backgroundColor = COLOR_ORANGE,
}) {} }) {}
} }
@ -111,51 +111,51 @@ create_layout :: proc() -> clay.ClayArray(clay.RenderCommand) {
if clay.UI()({ if clay.UI()({
id = clay.ID("OuterContainer"), id = clay.ID("OuterContainer"),
layout = { layout = {
sizing = { width = clay.SizingGrow({}), height = clay.SizingGrow({}) }, sizing = { width = clay.SizingGrow({}), height = clay.SizingGrow({}) },
padding = { 16, 16, 16, 16 }, padding = { 16, 16, 16, 16 },
childGap = 16, childGap = 16,
}, },
backgroundColor = { 250, 250, 255, 255 }, backgroundColor = { 250, 250, 255, 255 },
}) { }) {
if clay.UI()({ if clay.UI()({
id = clay.ID("SideBar"), id = clay.ID("SideBar"),
layout = { layout = {
layoutDirection = .TopToBottom, layoutDirection = .TopToBottom,
sizing = { width = clay.SizingFixed(300), height = clay.SizingGrow({}) }, sizing = { width = clay.SizingFixed(300), height = clay.SizingGrow({}) },
padding = { 16, 16, 16, 16 }, padding = { 16, 16, 16, 16 },
childGap = 16, childGap = 16,
}, },
backgroundColor = COLOR_LIGHT, backgroundColor = COLOR_LIGHT,
}) { }) {
if clay.UI()({ if clay.UI()({
id = clay.ID("ProfilePictureOuter"), id = clay.ID("ProfilePictureOuter"),
layout = { layout = {
sizing = { width = clay.SizingGrow({}) }, sizing = { width = clay.SizingGrow({}) },
padding = { 16, 16, 16, 16 }, padding = { 16, 16, 16, 16 },
childGap = 16, childGap = 16,
childAlignment = { y = .Center }, childAlignment = { y = .Center },
}, },
backgroundColor = COLOR_RED, backgroundColor = COLOR_RED,
cornerRadius = { 6, 6, 6, 6 }, cornerRadius = { 6, 6, 6, 6 },
}) { }) {
if clay.UI()({ if clay.UI()({
id = clay.ID("ProfilePicture"), id = clay.ID("ProfilePicture"),
layout = { layout = {
sizing = { width = clay.SizingFixed(60), height = clay.SizingFixed(60) }, sizing = { width = clay.SizingFixed(60), height = clay.SizingFixed(60) },
}, },
image = { image = {
imageData = &profile_picture, imageData = &profile_picture,
sourceDimensions = { sourceDimensions = {
width = 60, width = 60,
height = 60, height = 60,
}, },
}, },
}) {} }) {}
clay.Text( clay.Text(
"Clay - UI Library", "Clay - UI Library",
clay.TextConfig({ textColor = COLOR_BLACK, fontSize = 16 }), clay.TextConfig({ textColor = COLOR_BLACK, fontSize = 16 }),
) )
} }
// Standard Odin code like loops, etc. work inside components. // Standard Odin code like loops, etc. work inside components.
@ -168,14 +168,14 @@ create_layout :: proc() -> clay.ClayArray(clay.RenderCommand) {
if clay.UI()({ if clay.UI()({
id = clay.ID("MainContent"), id = clay.ID("MainContent"),
layout = { layout = {
sizing = { width = clay.SizingGrow({}), height = clay.SizingGrow({}) }, sizing = { width = clay.SizingGrow({}), height = clay.SizingGrow({}) },
}, },
backgroundColor = COLOR_LIGHT, backgroundColor = COLOR_LIGHT,
}) {} }) {}
} }
// Returns a list of render commands // Returns a list of render commands
render_commands: clay.ClayArray(clay.RenderCommand) = clay.EndLayout() render_commands: clay.ClayArray(clay.RenderCommand) = clay.EndLayout()
return render_commands return render_commands
} }
``` ```