@@ -8,6 +8,8 @@ id x = x
9buttons : a -> { button : a -> String -> Element, events : Signal a }
9buttons : a -> { button : a -> String -> Element, events : Signal a }
11+-- Create a button with a given label. The result is an `Element` and
12+-- a signal of units. This signal triggers whenever the button is pressed.
11button : String -> (Element, Signal ())
13button : String -> (Element, Signal ())
12button txt =
14button txt =
13 let pool = N.buttons ()
15 let pool = N.buttons ()
@@ -16,6 +18,9 @@ button txt =
16customButtons : a -> { button : a -> Element -> Element -> Element -> Element,
18customButtons : a -> { button : a -> Element -> Element -> Element -> Element,
17 events : Signal a }
19 events : Signal a }
21+-- Create a button with custom states for up, hovering, and down
22+-- (given in that order). The result is an `Element` and
23+-- a signal of units. This signal triggers whenever the button is pressed.
19customButton : Element -> Element -> Element -> (Element, Signal ())
24customButton : Element -> Element -> Element -> (Element, Signal ())
20customButton up hover down =
25customButton up hover down =
21 let pool = N.customButtons ()
26 let pool = N.customButtons ()
@@ -23,6 +28,9 @@ customButton up hover down =
24checkboxes : a -> { box : (Bool -> a) -> Bool -> Element, events : Signal a }
29checkboxes : a -> { box : (Bool -> a) -> Bool -> Element, events : Signal a }
31+-- Create a checkbox with a given start state. Notice that the result is a *signal*
32+-- of elements. That is because a checkbox has state that updates based on user input.
33+-- The boolean signal represents the current state of the checkbox.
26checkbox : Bool -> (Signal Element, Signal Bool)
34checkbox : Bool -> (Signal Element, Signal Bool)
27checkbox b =
35checkbox b =
28 let cbs = N.checkboxes b
36 let cbs = N.checkboxes b
@@ -35,19 +43,24 @@ fields : a -> { field : (FieldState -> a) -> String -> FieldState -> Element,
36empty = { string="", start=0, end=0 }
44empty = { string="", start=0, end=0 }
46+-- Create a field with the given default text. The output is an element that
47+-- updates to match the user input and a signal of strings representing the
48+-- content of the field.
38field : String -> (Signal Element, Signal String)
49field : String -> (Signal Element, Signal String)
39field placeHolder =
50field placeHolder =
40 let tfs = N.fields empty
51 let tfs = N.fields empty
41 in (lift (tfs.field id placeHolder) tfs.events, lift .string tfs.events)
52 in (lift (tfs.field id placeHolder) tfs.events, lift .string tfs.events)
54+-- Same as `field` but the UI element blocks out each characters.
43password : String -> (Signal Element, Signal String)
55password : String -> (Signal Element, Signal String)
44password placeHolder =
56password placeHolder =
45 let tfs = N.passwords empty
57 let tfs = N.passwords empty
46 in (lift (tfs.field id placeHolder) tfs.events, lift .string tfs.events)
58 in (lift (tfs.field id placeHolder) tfs.events, lift .string tfs.events)
60+-- Same as `field` but it adds an annotation that this field is for email addresses.
61+-- This is helpful for auto-complete and for mobile users who may get a custom keyboard
62+-- with an `@` and `.com` button.
48email : String -> (Signal Element, Signal String)
63email : String -> (Signal Element, Signal String)
49email placeHolder =
64email placeHolder =
50 let tfs = N.emails empty
65 let tfs = N.emails empty
51 in (lift (tfs.field id placeHolder) tfs.events, lift .string tfs.events)
66 in (lift (tfs.field id placeHolder) tfs.events, lift .string tfs.events)