关于 Style Elements 和 Elm 的布局问题

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 link 更新为一个我认为更接近您示例中的高度的版本。

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)
     ]
   ]])

关于 Style Elements 和 Elm 的布局问题

Layout questions with Style Elements and Elm

elm

elm-style-elements