dabb8d5 · typeable/elm-ui

git.iko.soy/typeable/elm-ui

update docs

commitdabb8d5a9ac0019ce84d65bf7ecf56e1f7000eae authorMatthew Griffith <mdg.griffith@gmail.com> dateThu 30 Aug 2018, 18:39 (8 years ago) parent5800286

4 files changed+66−76

compare with master

unifiedsplit

src/Element.elm+34−24 src/Element/Font.elm+13−36 src/Element/Input.elm+10−3 src/Element/Region.elm+9−13

src/Element.elm+34−24

@@ -27,41 +27,43 @@ module Element exposing

2727{-|

2828

2929

30−## Basic Elements

30+# Basic Elements

3131

3232@docs Element, none, text, el

3333

3434

35−## Rows and Columns

35+# Rows and Columns

3636

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`.

3840

3941@docs row, wrappedRow, column

4042

4143

42−## Text Layout

44+# Text Layout

4345

44−Text needs it's own layout primitives.

46+Text layout needs some specific considerations.

4547

4648@docs paragraph, textColumn

4749

4850

49−## Data Table

51+# Data Table

5052

5153@docs Column, table, IndexedColumn, indexedTable

5254

5355

54−## Size

56+# Size

5557

5658@docs Attribute, width, height, Length, px, shrink, fill, fillPortion, maximum, minimum

5759

5860

59−## Debugging

61+# Debugging

6062

6163@docs explain

6264

6365

64−## Padding and Spacing

66+# Padding and Spacing

6567

6668There's no concept of margin in `style-elements`, instead we have padding and spacing.

6769

@@ -79,12 +81,15 @@ Here's what we can expect:

7981

8082![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)

8183

84+**Note** `spacing` set on a `paragraph`, will set the pixel spacing between lines.

85+

86+

8287@docs padding, paddingXY, paddingEach

8388

8489@docs spacing, spacingXY, spaceEvenly

8590

8691

87−## Alignment

92+# Alignment

8893

8994Alignment can be used to align an `Element` within another `Element`.

9095

@@ -313,19 +318,18 @@ toRgb (Internal.Rgba r g b a) =

313318 }

314319

315320

316−{-| The basic building block of your layout. Here we create a

317−

318− import Element

321+{-| The basic building block of your layout.

319322

320− view =

321− Element.el [] (Element.text "Hello!")

323+ howdy : Element msg

324+ howdy =

325+ Element.el [] (Element.text "Howdy!")

322326

323327-}

324328type alias Element msg =

325329 Internal.Element msg

326330

327331

328−{-| Standard attribute which cannot be a decoration.

332+{-| An attribute that can be attached to an `Element`

329333-}

330334type alias Attribute msg =

331335 Internal.Attribute () msg

@@ -534,7 +538,7 @@ forceHover =

534538 Internal.HoverOption Internal.ForceHover

535539

536540

537−{-| Nothing to see here!

541+{-| When you want to render exactly nothing.

538542-}

539543none : Element msg

540544none =

@@ -559,16 +563,15 @@ You can think of an `el` as a `div`, but it can only hae one child.

559563

560564If you want multiple children, you'll need to use something like `row` or `column`

561565

562− import Color exposing (blue, darkBlue)

563− import Element exposing (Element)

566+ import Element exposing (Element, rgb)

564567 import Element.Background as Background

565568 import Element.Border as Border

566569

567570 myElement : Element msg

568571 myElement =

569572 Element.el

570− [ Background.color blue

571− , Border.color darkBlue

573+ [ Background.color (rgb 0 0.5 0)

574+ , Border.color (rgb 0 0.7 0)

572575 ]

573576 (Element.text "You've made a stylish element!")

574577

@@ -585,8 +588,7 @@ el attrs child =

585588 (Internal.Unkeyed [ child ])

586589

587590

588−{-| If you want a row of elements, use `row`!

589−-}

591+{-| -}

590592row : List (Attribute msg) -> List (Element msg) -> Element msg

591593row attrs children =

592594 Internal.element

@@ -618,7 +620,8 @@ column attrs children =

618620 (Internal.Unkeyed children)

619621

620622

621−{-| -}

623+{-| Same as `row`, but will wrap if it takes up too much horizontal space.

624+-}

622625wrappedRow : List (Attribute msg) -> List (Element msg) -> Element msg

623626wrappedRow attrs children =

624627 let

@@ -1004,6 +1007,8 @@ Which will look something like

10041007

10051008![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)

10061009

1010+**Note** `spacing` on a paragraph will set the pixel spacing between lines.

1011+

10071012-}

10081013paragraph : List (Attribute msg) -> List (Element msg) -> Element msg

10091014paragraph attrs children =

@@ -1156,6 +1161,11 @@ newTabLink attrs { url, label } =

11561161

11571162

11581163{-| 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+

11591169-}

11601170download :

11611171 List (Attribute msg)

src/Element/Font.elm+13−36

@@ -1,46 +1,21 @@

1−module Element.Font

2− exposing

3− ( Font

4− , alignLeft

5− , alignRight

6− , bold

7− , center

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

27− , size

28− , strike

29− , typeface

30− , underline

31− , unitalicized

32− , wordSpacing

33− )

1+module Element.Font exposing

2+ ( color, size

3+ , family, Font, typeface, serif, sansSerif, monospace

4+ , external

5+ , alignLeft, alignRight, center, justify, letterSpacing, wordSpacing

6+ , underline, strike, italic, unitalicized

7+ , heavy, extraBold, bold, semiBold, medium, regular, light, extraLight, hairline

8+ , glow, shadow

9+ )

3410

3511{-|

3612

37− import Color exposing (blue)

3813 import Element

3914 import Element.Font as Font

4015

4116 view =

4217 Element.el

43− [ Font.color blue

18+ [ Font.color (Element.rgb 0 0 1)

4419 , Font.size 18

4520 , Font.family

4621 [ Font.typeface "Open Sans"

@@ -49,7 +24,9 @@ module Element.Font

4924 ]

5025 (Element.text "Woohoo, I'm stylish text")

5126

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`.

5330

5431@docs color, size

5532

src/Element/Input.elm+10−3

@@ -40,7 +40,12 @@ module Element.Input

4040

4141## Text Input

4242

43−@docs text, Placeholder, placeholder, username, newPassword, currentPassword, email, search, spellChecked

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+

48+@docs username, newPassword, currentPassword, email, search, spellChecked

4449

4550

4651## Multiline Text

@@ -144,7 +149,7 @@ The `onPress` handler will be fired either `onClick` or when the element is focu

144149 import Element.Input as Input

145150

146151 Input.button []

147− { onPress = Just ClickMsg

152+ { onPress = ClickMsg

148153 , label = text "My Button"

149154 }

150155

@@ -911,7 +916,9 @@ text =

911916 }

912917

913918

914−{-| -}

919+{-| If spell checking is available, this input will be spellchecked.

920+

921+-}

915922spellChecked :

916923 List (Attribute msg)

917924 ->

src/Element/Region.elm+9−13

@@ -1,16 +1,12 @@

1−module Element.Region

2− exposing

3− ( announce

4− , announceUrgently

5− , aside

6− , description

7− , footer

8− , heading

9− , mainContent

10− , navigation

11− )

12−

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.

1+module Element.Region exposing

2+ ( mainContent, navigation, heading, aside, footer

3+ , description

4+ , announce, announceUrgently

5+ )

7+{-| This module is meant to make accessibility easy!

9+These are sign posts that accessibility software like screen readers can use to navigate your app.

1410

1511All you have to do is add them to elements in your app where you see fit.

1612