feat(ui): number and key fields, notes, anchored popovers, text-shadow, and pictures as painted
- <input type="number" min max step>: typed digits replace its value (a minus when min allows one, a point when step has a fraction), Enter or leaving the field commits them held between min and max, the left and right arrows step it. - <input type="key">: Enter or a click starts it listening and the next key is its value, Tab, the arrows and Enter included; Esc stops it listening, Backspace clears it, `shown` names the value, and ui_capturing() tells the host to leave its keys alone (through the frame that ended it). - note="..." under any control's label (.ui-labels > .ui-label + .ui-note); a range's (or number's) value with decimals, format="percent" and a unit. - A popover with `anchor="id"` (the nearest element of that id) or a bare `anchor` (the element before it) sits beside it by `placement` (right, left, bottom, top), its margin the gap, opens to the other side where it would leave the screen, and is kept on it. - A tooltip's title splits into lines at a newline or a written \n. - text-shadow, inherited, drawn sharp under the text. - ui_opacity(): the group opacity a native's draw is at. - border-image is drawn as painted with no background colour, tinted by one, and not at all when that colour is transparent (it drew a white nine-slice). - A picture file is drawn untinted, as a browser draws one; an atlas cell (prefix:name) still takes the color around it, and an <img> with its own color is tinted by it. - The render3d backend loads a picture again when its file changes or appears (a failed load was kept for ever), and at once after ui_image_reload(path); takes a path with a drive letter (C:/...) as a path rather than an atlas; and slices a nine-slice by its texture's own width and height. - ui_inputs.ludic and ui_look.ludic; LANGUAGE.md and the changeset say all of it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
parent
7d8f34de17
commit
9f59000f5b
39 changed files with 732 additions and 75 deletions
2
examples/library/ui_inputs_parts/Form.lss
Normal file
2
examples/library/ui_inputs_parts/Form.lss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
.page { width: 400px; gap: 4px }
|
||||
input { width: fill }
|
||||
9
examples/library/ui_inputs_parts/Form.ludic
Normal file
9
examples/library/ui_inputs_parts/Form.ludic
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
# Form.ludic - a number, a key binding, two ranges with their values formatted, a note under a label,
|
||||
# and an event called set
|
||||
component Form {
|
||||
state count: int = 5
|
||||
state bind: int = 32
|
||||
state vol: float = 0.5
|
||||
state said: int = 0
|
||||
on set(v: int) { said = v }
|
||||
}
|
||||
9
examples/library/ui_inputs_parts/Form.xml
Normal file
9
examples/library/ui_inputs_parts/Form.xml
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<div class="page">
|
||||
<input type="number" label="Count" note="How many to carry" min="{0}" max="{20}" value="{count}" on-change="set count = event.value"/>
|
||||
<input type="key" label="Jump" value="{bind}" shown="{bind == 32 ? 'Space bar' : ''}" on-change="set bind = event.value"/>
|
||||
<input type="range" label="Volume" min="{0}" max="{1}" step="{0.1}" value="{vol}" format="percent" on-change="set vol = event.value"/>
|
||||
<input type="range" label="Delay" min="{0}" max="{2}" step="{0.25}" value="{0.5}" decimals="{2}" unit=" s"/>
|
||||
<button on-click="set(9)">Nine</button>
|
||||
<Tag text="{7}"/>
|
||||
<p>{count} {bind} {vol} {said}</p>
|
||||
</div>
|
||||
4
examples/library/ui_inputs_parts/Tag.ludic
Normal file
4
examples/library/ui_inputs_parts/Tag.ludic
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
# Tag.ludic - a string prop, which a number given to it arrives in as text
|
||||
component Tag {
|
||||
prop text: string = "none"
|
||||
}
|
||||
1
examples/library/ui_inputs_parts/Tag.xml
Normal file
1
examples/library/ui_inputs_parts/Tag.xml
Normal file
|
|
@ -0,0 +1 @@
|
|||
<p>{text}!</p>
|
||||
Loading…
Add table
Add a link
Reference in a new issue