git.iko.soy/lynxjs-elm/compiler
on master help sign in
lynxjs-elm/compiler/packages/ui/src/Lynx.elm
104 lines 2.3 kB history raw
1module Lynx exposing
2 ( view, text, textContent, image, scrollView, list, input, textarea
3 , Attribute, Node
4 )
6{-| LynxJS native UI elements.
8# Elements
9@docs view, text, textContent, image, scrollView, list, input, textarea
11# Types
12@docs Attribute, Node
14-}
16import VirtualDom
19{-| Alias for `VirtualDom.Node`.
20-}
21type alias Node msg =
22 VirtualDom.Node msg
25{-| Alias for `VirtualDom.Attribute`.
26-}
27type alias Attribute msg =
28 VirtualDom.Attribute msg
31{-| A generic container element, equivalent to `<view>` in LynxJS.
32This is the primary layout building block.
34 view [ Lynx.Attributes.flexDirection Row ]
35 [ text [] [ textContent "Hello" ]
36 ]
37-}
38view : List (Attribute msg) -> List (Node msg) -> Node msg
39view =
40 VirtualDom.node "view"
43{-| A text container element, equivalent to `<text>` in LynxJS.
44Use this when you need to apply styles or attributes to text.
46 text [ Lynx.Attributes.fontSize 18 ]
47 [ textContent "Styled text" ]
48-}
49text : List (Attribute msg) -> List (Node msg) -> Node msg
50text =
51 VirtualDom.node "text"
54{-| Create a plain text node. In LynxJS, this is auto-wrapped in a `<text>`
55element by the kernel.
57 textContent "Hello World!"
58-}
59textContent : String -> Node msg
60textContent =
61 VirtualDom.text
64{-| An image element, equivalent to `<image>` in LynxJS.
66 image [ Lynx.Attributes.src "https://example.com/photo.jpg" ] []
67-}
68image : List (Attribute msg) -> List (Node msg) -> Node msg
69image =
70 VirtualDom.node "image"
73{-| A scrollable container, equivalent to `<scroll-view>` in LynxJS.
75 scrollView [ Lynx.Attributes.scrollDirection Vertical ]
76 [ view [] [ textContent "Item 1" ]
77 , view [] [ textContent "Item 2" ]
78 ]
79-}
80scrollView : List (Attribute msg) -> List (Node msg) -> Node msg
81scrollView =
82 VirtualDom.node "scroll-view"
85{-| A list element for efficient rendering of long lists.
86Equivalent to `<list>` in LynxJS.
87-}
88list : List (Attribute msg) -> List (Node msg) -> Node msg
89list =
90 VirtualDom.node "list"
93{-| A text input element.
94-}
95input : List (Attribute msg) -> List (Node msg) -> Node msg
96input =
97 VirtualDom.node "input"
100{-| A multi-line text input element.
101-}
102textarea : List (Attribute msg) -> List (Node msg) -> Node msg
103textarea =
104 VirtualDom.node "textarea"