git.iko.soy/lynxjs-elm/compiler
on master help sign in
lynxjs-elm/compiler/packages/ui/README.md
267 lines 5.7 kB history raw
1# lynxjs-elm/ui
3LynxJS native UI elements for Elm. Provides typed constructors for native iOS/Android views, layout attributes, and event handlers.
5## Setup
7Add to your `elm.json`:
9```json
11 "dependencies": {
12 "direct": {
13 "lynxjs-elm/ui": "1.0.0"
14 }
15 }
17```
19## Modules
21- [`Lynx`](#lynx) — Native element constructors (view, text, image, etc.)
22- [`Lynx.Attributes`](#lynxattributes) — Styling, layout, and content attributes
23- [`Lynx.Events`](#lynxevents) — Tap, touch, and input event handlers
25---
27## Lynx
29```elm
30import Lynx
31```
33### Types
35```elm
36type alias Node msg = VirtualDom.Node msg
37type alias Attribute msg = VirtualDom.Attribute msg
38```
40### Elements
42```elm
43view : List (Attribute msg) -> List (Node msg) -> Node msg
44```
46Generic container (`<view>`). The primary layout building block.
48```elm
49text : List (Attribute msg) -> List (Node msg) -> Node msg
50```
52Text container (`<text>`). Use for styled text that can contain nested text nodes.
54```elm
55textContent : String -> Node msg
56```
58Plain text node. Auto-wrapped in a `<text>` element by the kernel.
60```elm
61image : List (Attribute msg) -> List (Node msg) -> Node msg
62```
64Image element (`<image>`). Set the source with `Lynx.Attributes.src`.
66```elm
67scrollView : List (Attribute msg) -> List (Node msg) -> Node msg
68```
70Scrollable container (`<scroll-view>`). Control direction with `Lynx.Attributes.scrollDirection`.
72```elm
73list : List (Attribute msg) -> List (Node msg) -> Node msg
74```
76List element (`<list>`) for efficient rendering of long lists.
78```elm
79input : List (Attribute msg) -> List (Node msg) -> Node msg
80```
82Single-line text input.
84```elm
85textarea : List (Attribute msg) -> List (Node msg) -> Node msg
86```
88Multi-line text input.
90### Example
92```elm
93import Lynx exposing (..)
94import Lynx.Attributes exposing (..)
95import Lynx.Events exposing (..)
97view []
98 [ text [ fontSize 24, color "white" ]
99 [ textContent "Hello, LynxJS!" ]
100 , image [ src "logo.png", width 100, height 100 ] []
101 ]
102```
104---
106## Lynx.Attributes
108```elm
109import Lynx.Attributes exposing (..)
110```
112### Layout
114```elm
115width : Int -> Attribute msg
116height : Int -> Attribute msg
117minWidth : Int -> Attribute msg
118minHeight : Int -> Attribute msg
119maxWidth : Int -> Attribute msg
120maxHeight : Int -> Attribute msg
121```
123All dimensions are in pixels.
125### Flexbox
127```elm
128display : String -> Attribute msg -- e.g. "flex", "none"
129flexDirection : String -> Attribute msg -- "row", "column", "row-reverse", "column-reverse"
130flexWrap : String -> Attribute msg -- "wrap", "nowrap"
131justifyContent : String -> Attribute msg -- "center", "flex-start", "flex-end", "space-between", "space-around"
132alignItems : String -> Attribute msg -- "center", "flex-start", "flex-end", "stretch"
133alignSelf : String -> Attribute msg
134flex : Int -> Attribute msg
135flexGrow : Int -> Attribute msg
136flexShrink : Int -> Attribute msg
137```
139### Spacing
141```elm
142padding : Int -> Attribute msg
143paddingTop : Int -> Attribute msg
144paddingRight : Int -> Attribute msg
145paddingBottom : Int -> Attribute msg
146paddingLeft : Int -> Attribute msg
147margin : Int -> Attribute msg
148marginTop : Int -> Attribute msg
149marginRight : Int -> Attribute msg
150marginBottom : Int -> Attribute msg
151marginLeft : Int -> Attribute msg
152```
154All values in pixels.
156### Positioning
158```elm
159position : String -> Attribute msg -- "relative", "absolute", "fixed"
160top : Int -> Attribute msg
161right : Int -> Attribute msg
162bottom : Int -> Attribute msg
163left : Int -> Attribute msg
164zIndex : Int -> Attribute msg
165```
167### Appearance
169```elm
170backgroundColor : String -> Attribute msg -- e.g. "#ff0000", "red"
171opacity : Float -> Attribute msg -- 0.0 to 1.0
172overflow : String -> Attribute msg -- "hidden", "visible", "scroll"
173```
175### Borders
177```elm
178borderWidth : Int -> Attribute msg
179borderColor : String -> Attribute msg
180borderRadius : Int -> Attribute msg
181```
183### Typography
185```elm
186fontSize : Int -> Attribute msg
187fontWeight : String -> Attribute msg -- "bold", "normal", "100"–"900"
188fontFamily : String -> Attribute msg
189color : String -> Attribute msg
190textAlign : String -> Attribute msg -- "center", "left", "right"
191lineHeight : Int -> Attribute msg
192textOverflow : String -> Attribute msg -- "ellipsis", "clip"
193```
195### Content
197```elm
198src : String -> Attribute msg -- image URL
199placeholder : String -> Attribute msg -- input placeholder text
200value : String -> Attribute msg -- input value
201scrollDirection : String -> Attribute msg -- "vertical", "horizontal"
202```
204### Identity
206```elm
207id : String -> Attribute msg
208class_ : String -> Attribute msg
209```
211---
213## Lynx.Events
215```elm
216import Lynx.Events exposing (..)
217```
219### Tap Events
221```elm
222onTap : msg -> Attribute msg
223```
225Fires when the element is tapped.
227```elm
228onLongpress : msg -> Attribute msg
229```
231Fires on a long press.
233### Touch Events
235```elm
236onTouchStart : msg -> Attribute msg
237onTouchMove : msg -> Attribute msg
238onTouchEnd : msg -> Attribute msg
239onTouchCancel : msg -> Attribute msg
240```
242### Input Events
244```elm
245onInput : (String -> msg) -> Attribute msg
246```
248Fires when an input's value changes. The callback receives the new value (extracted from `event.detail.value`).
250### Example
252```elm
253import Lynx exposing (..)
254import Lynx.Attributes exposing (..)
255import Lynx.Events exposing (..)
257view [ onTap Increment, backgroundColor "#4CAF50", padding 16 ]
258 [ text [ fontSize 20, color "white" ]
259 [ textContent "+1" ]
260 ]
261```
263---
265## License
267BSD-3-Clause