Question

我正在构建我在Elm的第一个应用程序，并决定使用Style Elements包而不是CSS。

这是我正在尝试的布局。它是一个不滚动的单页应用程序。

这是一些代码

view : Model -> Html Msg
view model =
    layout Styles.stylesheet <|
        pageWrapper


pageWrapper : Element Styles variation Msg
column Page
    [ width (percent 100), height (percent 100) ]
    [ navMain
    , contentArea
    ]


navMain : Element Styles variation Msg
navMain =
    row Navigation
        [ spread, padding 10 ]
        [ el (Nav Logo) [ width (px 50)] (text "Logo")
        , row (Nav Link)
            [ padding 15, spacing 10]
            [ el (Nav Link) [] (text "About")
            , el (Nav Link) [] (text "Services")
            , el (Nav Link) [] (text "Team")
            , el (Nav Link) [] (text "Location")
            , el (Nav Link) [] (text "Contact")
            ]
    ]


contentArea : Element Styles variation Msg
contentArea =
    -- At this point I thought I would make a row with an el with the image 
       and a column containing the other two images. And other than creating heights with pixels I don't know how to extend the main content to the bottom of the page.

为了更好地了解如何控制布局，我可以看一下哪些好的示例应用程序？我已经浏览了几个，我觉得我只是遗漏了一些非常明显的东西，因为到目前为止SE已经很棒了！

Answer 1

这是一个非常基本的例子： https://ellie-app.com/k25rby75Da1/1

我已经离开了下面未定义的元素的高度，但你应该能够找到适合你需要的元素。我将ellie链接更新为我认为更接近您示例中高度的版本。

module Main exposing (main)

import Html
import Html.Attributes
import Color
import Style
import Style.Font as Font
import Style.Color as Color
import Element exposing (..)
import Element.Attributes exposing (..)


main =
    Html.beginnerProgram
        { model = model
        , update = update
        , view = view
        }

type alias Model =
  { navbar : String
  , leftcontent : String
  , rightcontent : { top : String, bottom : String }
  }

model : Model
model =
  { navbar = "This is the navbar"
  , leftcontent = "This is the left column content"
  , rightcontent =
    { top = "This is the right top content"
    , bottom = "This is the right bottom content"
    }
   }



update model msg = 
     model

type MyStyles = Navbar | Left | RightTop | RightBottom | None

stylesheet =
    Style.styleSheet
        [ Style.style Navbar [ Color.background Color.red ]
        , Style.style Left [ Color.background Color.blue ]
        , Style.style RightTop [Color.background Color.purple ]
        , Style.style RightBottom [Color.background Color.gray ]
        ]

view model =
 Element.viewport stylesheet <|
   (column None [] [
   row Navbar [] [ text model.navbar ]
   , wrappedRow None []
   [ column Left [ width (percent 50)] [ text model.leftcontent ]
   , wrappedColumn None [ width (percent 50)] 
     [ el RightTop [ width fill] (text model.rightcontent.top)
     , el RightBottom [ width fill ] (text model.rightcontent.bottom)
     ]
   ]])

样式元素和榆树的布局问题

1 个答案: