git.iko.soy/typeable/elm-ui
on master help sign in
update docs
dabb8d5Matthew Griffith
src/Element.elm+34−24
compare with master
unifiedsplit
@@ -27,41 +27,43 @@ module Element exposing
27{-|
27{-|
28
28
29
29
30−## Basic Elements
30+# Basic Elements
31
31
32@docs Element, none, text, el
32@docs Element, none, text, el
33
33
34
34
35−## Rows and Columns
35+# Rows and Columns
36
36
37−Rows and columns are the most common layouts.
37+When we want more than one child on an element, we want to be _specific_ about how they will be layed out.
38+
39+So, the common ways to do that would be `row` and `column`.
38
40
39@docs row, wrappedRow, column
41@docs row, wrappedRow, column
40
42
41
43
42−## Text Layout
44+# Text Layout
43
45
44−Text needs it's own layout primitives.
46+Text layout needs some specific considerations.
45
47
46@docs paragraph, textColumn
48@docs paragraph, textColumn
47
49
48
50
49−## Data Table
51+# Data Table
50
52
51@docs Column, table, IndexedColumn, indexedTable
53@docs Column, table, IndexedColumn, indexedTable
52
54
53
55
54−## Size
56+# Size
55
57
56@docs Attribute, width, height, Length, px, shrink, fill, fillPortion, maximum, minimum
58@docs Attribute, width, height, Length, px, shrink, fill, fillPortion, maximum, minimum
57
59
58
60
59−## Debugging
61+# Debugging
60
62
61@docs explain
63@docs explain
62
64
63
65
64−## Padding and Spacing
66+# Padding and Spacing
65
67
66There's no concept of margin in `style-elements`, instead we have padding and spacing.
68There's no concept of margin in `style-elements`, instead we have padding and spacing.
67
69
@@ -79,12 +81,15 @@ Here's what we can expect:
79
81
80![Three boxes spaced 7 pixels apart. There's a 10 pixel distance from the edge of the parent to the boxes.](https://mdgriffith.gitbooks.io/style-elements/content/assets/spacing-400.png)
82![Three boxes spaced 7 pixels apart. There's a 10 pixel distance from the edge of the parent to the boxes.](https://mdgriffith.gitbooks.io/style-elements/content/assets/spacing-400.png)
81
83
84+**Note** `spacing` set on a `paragraph`, will set the pixel spacing between lines.
85+
86+
82@docs padding, paddingXY, paddingEach
87@docs padding, paddingXY, paddingEach
83
88
84@docs spacing, spacingXY, spaceEvenly
89@docs spacing, spacingXY, spaceEvenly
85
90
86
91
87−## Alignment
92+# Alignment
88
93
89Alignment can be used to align an `Element` within another `Element`.
94Alignment can be used to align an `Element` within another `Element`.
90
95
@@ -313,19 +318,18 @@ toRgb (Internal.Rgba r g b a) =
313 }
318 }
314
319
315
320
316−{-| The basic building block of your layout. Here we create a
321+{-| The basic building block of your layout.
317−
318− import Element
319
322
320− view =
323+ howdy : Element msg
324+ howdy =
321− Element.el [] (Element.text "Hello!")
325+ Element.el [] (Element.text "Howdy!")
322
326
323-}
327-}
324type alias Element msg =
328type alias Element msg =
325 Internal.Element msg
329 Internal.Element msg
326
330
327
331
328−{-| Standard attribute which cannot be a decoration.
332+{-| An attribute that can be attached to an `Element`
329-}
333-}
330type alias Attribute msg =
334type alias Attribute msg =
331 Internal.Attribute () msg
335 Internal.Attribute () msg
@@ -534,7 +538,7 @@ forceHover =
534 Internal.HoverOption Internal.ForceHover
538 Internal.HoverOption Internal.ForceHover
535
539
536
540
537−{-| Nothing to see here!
541+{-| When you want to render exactly nothing.
538-}
542-}
539none : Element msg
543none : Element msg
540none =
544none =
@@ -559,16 +563,15 @@ You can think of an `el` as a `div`, but it can only hae one child.
559
563
560If you want multiple children, you'll need to use something like `row` or `column`
564If you want multiple children, you'll need to use something like `row` or `column`
561
565
562− import Color exposing (blue, darkBlue)
566+ import Element exposing (Element, rgb)
563− import Element exposing (Element)
564 import Element.Background as Background
567 import Element.Background as Background
565 import Element.Border as Border
568 import Element.Border as Border
566
569
567 myElement : Element msg
570 myElement : Element msg
568 myElement =
571 myElement =
569 Element.el
572 Element.el
570− [ Background.color blue
573+ [ Background.color (rgb 0 0.5 0)
571− , Border.color darkBlue
574+ , Border.color (rgb 0 0.7 0)
572 ]
575 ]
573 (Element.text "You've made a stylish element!")
576 (Element.text "You've made a stylish element!")
574
577
@@ -585,8 +588,7 @@ el attrs child =
585 (Internal.Unkeyed [ child ])
588 (Internal.Unkeyed [ child ])
586
589
587
590
588−{-| If you want a row of elements, use `row`!
589−-}
591+{-| -}
590row : List (Attribute msg) -> List (Element msg) -> Element msg
592row : List (Attribute msg) -> List (Element msg) -> Element msg
591row attrs children =
593row attrs children =
592 Internal.element
594 Internal.element
@@ -618,7 +620,8 @@ column attrs children =
618 (Internal.Unkeyed children)
620 (Internal.Unkeyed children)
619
621
620
622
623+{-| Same as `row`, but will wrap if it takes up too much horizontal space.
621−{-| -}
624+-}
622wrappedRow : List (Attribute msg) -> List (Element msg) -> Element msg
625wrappedRow : List (Attribute msg) -> List (Element msg) -> Element msg
623wrappedRow attrs children =
626wrappedRow attrs children =
624 let
627 let
@@ -1004,6 +1007,8 @@ Which will look something like
1004
1007
1005![A paragraph where the first letter is twice the height of the others](https://mdgriffith.gitbooks.io/style-elements/content/assets/Screen%20Shot%202017-08-25%20at%209.41.52%20PM.png)
1008![A paragraph where the first letter is twice the height of the others](https://mdgriffith.gitbooks.io/style-elements/content/assets/Screen%20Shot%202017-08-25%20at%209.41.52%20PM.png)
1006
1009
1010+**Note** `spacing` on a paragraph will set the pixel spacing between lines.
1011+
1007-}
1012-}
1008paragraph : List (Attribute msg) -> List (Element msg) -> Element msg
1013paragraph : List (Attribute msg) -> List (Element msg) -> Element msg
1009paragraph attrs children =
1014paragraph attrs children =
@@ -1156,6 +1161,11 @@ newTabLink attrs { url, label } =
1156
1161
1157
1162
1158{-| A link to download a file.
1163{-| A link to download a file.
1164+
1165+**Note** If you're using `Browser.application`, then this won't be enough to actually trigger a file download due to how `Browser.Navigation` works.
1166+
1167+[Here's a description of what needs to happen](https://github.com/elm/html/issues/175).
1168+
1159-}
1169-}
1160download :
1170download :
1161 List (Attribute msg)
1171 List (Attribute msg)
src/Element/Font.elm+13−36
@@ -1,46 +1,21 @@
1−module Element.Font
1+module Element.Font exposing
2− exposing
2+ ( color, size
3− ( Font
3+ , family, Font, typeface, serif, sansSerif, monospace
4− , alignLeft
4+ , external
5− , alignRight
5+ , alignLeft, alignRight, center, justify, letterSpacing, wordSpacing
6− , bold
6+ , underline, strike, italic, unitalicized
7− , center
7+ , heavy, extraBold, bold, semiBold, medium, regular, light, extraLight, hairline
8− , color
9− , external
10− , extraBold
11− , extraLight
12− , family
13− , glow
14− , hairline
15− , heavy
16− , italic
17− , justify
18− , letterSpacing
19− , light
20− , medium
21− , monospace
22− , regular
23− , sansSerif
24− , semiBold
25− , serif
26− , shadow
8+ , glow, shadow
27− , size
28− , strike
29− , typeface
30− , underline
31− , unitalicized
32− , wordSpacing
33− )
9+ )
34
10
35{-|
11{-|
36
12
37− import Color exposing (blue)
38 import Element
13 import Element
39 import Element.Font as Font
14 import Element.Font as Font
40
15
41 view =
16 view =
42 Element.el
17 Element.el
43− [ Font.color blue
18+ [ Font.color (Element.rgb 0 0 1)
44 , Font.size 18
19 , Font.size 18
45 , Font.family
20 , Font.family
46 [ Font.typeface "Open Sans"
21 [ Font.typeface "Open Sans"
@@ -49,7 +24,9 @@ module Element.Font
49 ]
24 ]
50 (Element.text "Woohoo, I'm stylish text")
25 (Element.text "Woohoo, I'm stylish text")
51
26
52−**Note**: `Font.color`, `Font.size`, and `Font.family` are inherited, meaning you can set them at the top of your view and all subsequent nodes will have that value.
27+**Note:** `Font.color`, `Font.size`, and `Font.family` are inherited, meaning you can set them at the top of your view and all subsequent nodes will have that value.
28+
29+**Other Note:** If you're looking for something like `line-height`, it's handled by `Element.spacing` on a `paragraph`.
53
30
54@docs color, size
31@docs color, size
55
32
src/Element/Input.elm+10−3
@@ -40,7 +40,12 @@ module Element.Input
40
40
41## Text Input
41## Text Input
42
42
43+@docs text, Placeholder, placeholder,
44+
45+
46+We can also give a hint about what type of content our text field contains. This will allow things like autofill to work correctly.
47+
43−@docs text, Placeholder, placeholder, username, newPassword, currentPassword, email, search, spellChecked
48+@docs username, newPassword, currentPassword, email, search, spellChecked
44
49
45
50
46## Multiline Text
51## Multiline Text
@@ -144,7 +149,7 @@ The `onPress` handler will be fired either `onClick` or when the element is focu
144 import Element.Input as Input
149 import Element.Input as Input
145
150
146 Input.button []
151 Input.button []
147− { onPress = Just ClickMsg
152+ { onPress = ClickMsg
148 , label = text "My Button"
153 , label = text "My Button"
149 }
154 }
150
155
@@ -911,7 +916,9 @@ text =
911 }
916 }
912
917
913
918
919+{-| If spell checking is available, this input will be spellchecked.
920+
914−{-| -}
921+-}
915spellChecked :
922spellChecked :
916 List (Attribute msg)
923 List (Attribute msg)
917 ->
924 ->
src/Element/Region.elm+9−13
@@ -1,16 +1,12 @@
1−module Element.Region
1+module Element.Region exposing
2− exposing
2+ ( mainContent, navigation, heading, aside, footer
3− ( announce
4− , announceUrgently
5− , aside
6− , description
3+ , description
7− , footer
4+ , announce, announceUrgently
8− , heading
9− , mainContent
10− , navigation
11− )
5+ )
12−
6+
7+{-| This module is meant to make accessibility easy!
8+
13−{-| This module is meant to make accessibility easy! They're sign posts that accessibility software like screen readers can use to navigate your app.
9+These are sign posts that accessibility software like screen readers can use to navigate your app.
14
10
15All you have to do is add them to elements in your app where you see fit.
11All you have to do is add them to elements in your app where you see fit.
16
12