Orkuncakilkaya
7d8f34de17
- flex-shrink: a line whose children want more room than it has takes it back from those that shrink, in proportion to shrink times size and never below a min size, a fixed size or the content. A scroll box shrinks (and scrolls), and a box in a column shrinks as far as the scroll boxes inside it let it, so a list in a column takes the room its siblings leave with no height. `flex: grow shrink`, and `flex-shrink` by name. - A row wider than its room measures its texts (and boxes without a width) again in the room the rest leave them, so a line wraps beside an icon. - calc() with + - * / and brackets over px, %, em, rem, vw, vh, plain numbers and var(); a width or height keeps its percentage, taken of the room it is given. Lengths lists (padding, margin) keep a calc()'s spaces. - `order` places a box's children without touching the tree. - width: 0 and height: 0 are 0: an unset size is UI_AUTO now, not 0. - A component root that is itself a component takes each user's class, style and id in turn (the outermost's id wins), and the rules of all their sheets are weighed by specificity together; a user's rule wins a tie. The parent's sheet used to override the child's whatever its specificity, and a middle component's sheet was lost. - The default sheet lays .ui-track out as a row, so a range's fill is as tall as its track and a checked box's knob goes right; a range's thumb is centred on the fill's end. - ui_boxes.ludic. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
25 lines
1.4 KiB
Text
25 lines
1.4 KiB
Text
# ui_boxes.ludic — ludic.ui's flex and sizes: a scroll box in a column shrinks to the room its
|
|
# siblings leave (flex-shrink) and scrolls what it cannot show; text in a row wraps in the room left
|
|
# after the icon beside it; width and height 0 are 0; calc() mixes a percentage with lengths; order
|
|
# rearranges a row; and a range's track is a row, its fill as tall as the track.
|
|
import "ludic.ui"
|
|
import "ui_boxes_parts/Boxes.ludic"
|
|
program UiBoxes {
|
|
numbers float
|
|
entry {
|
|
ui_backend(new UiBackend)
|
|
ui_show("Boxes", null, 0.0, 0.0, 400.0, 600.0)
|
|
let root: UiNode = ui_nodes("Boxes", null)
|
|
ui_place(root, 0.0, 0.0, 400.0, 600.0)
|
|
let page = root.children[0]
|
|
let list = page.children[0].children[1]
|
|
let line = page.children[1]
|
|
let text = line.children[1]
|
|
let zero = page.children[2]
|
|
let half = page.children[3]
|
|
let ord = page.children[4]
|
|
let track = page.children[5].children[0]
|
|
let fill = track.children[0]
|
|
print(`list {int(list.ch)} of {int(list.content_h)} | text at {int(text.x)} {int(text.cw)} wide, {len(text.lines)} lines, row {int(line.ch)} | zero {int(zero.cw)}x{int(zero.ch)} | half {int(half.cw)}x{int(half.ch)} pad {int(half.pt)} {int(half.pr)} | order {ord.children[0].text}{ord.children[1].text}{ord.children[2].text} at {int(ord.children[2].x)} | fill {int(fill.cw)}x{int(fill.ch)} of {int(track.cw)}x{int(track.ch)}`)
|
|
}
|
|
}
|