代码之家 › 专栏 › 技术社区 › Dave Chambers

如何使用elm bootstrap 4.1.0制作带有条纹的桌子?

elm

Dave Chambers · 技术社区 · 6 年前

我已经尝试了好几件事,但还没弄清楚怎么设计这个样式。 Elm 表与 Bootstrap 所以它是 条纹的 . 我想用 elm-bootstrap 并已安装 rundis/elm-bootstrap 4.1.0

Bootstrap.Table 当前未使用:

module Players.List exposing (..)

import Html exposing (..)
import Html.Attributes exposing (class)
import Msgs exposing (Msg)
import Models exposing (Player)
import RemoteData exposing (WebData)
import Bootstrap.Table as Table

view : WebData (List Player) -> Html Msg
view response =
div []
    [ nav
    , maybeList response
    ]


nav : Html Msg
nav =
div [ class "clearfix mb2 white bg-black" ]
    [ div [ class "left p2" ] [ text "Players" ] ]


maybeList : WebData (List Player) -> Html Msg
 maybeList response =
case response of
    RemoteData.NotAsked ->
        text ""

    RemoteData.Loading ->
        text "Loading..."

    RemoteData.Success players ->
        list players

    RemoteData.Failure error ->
        text (toString error)


list : List Player -> Html Msg
list players =
div [ class "col-md-4" ]
    [ table [ class "table table-striped" ]
        [ thead []
            [ tr []
                [ th [] [ text "Id" ]
                , th [] [ text "Initials" ]
                , th [] [ text "Time" ]
                , th [] [ text "Score" ]
                ]
            ]
        , tbody [] (List.map playerRow players)
        ]
    ]


playerRow : Player -> Html Msg
playerRow player =
tr []
    [ td [] [ text player.id ]
    , td [] [ text player.initials ]
    , td [] [ text (toString player.time) ]
    , td [] [ text (toString player.score) ]
    ]

因为这应该是非常简单的,我很明显这里遗漏了一些东西。这张桌子怎么做条纹?

1 回复 | 直到 6 年前

Chad Gilbert 6 年前

您的示例使用来自ELM的HTML库的HTML函数,但是您可能会有更好的时间使用适当的引导类型和函数。例如,使用 table options defined in the documentation ,您可以这样重写视图函数:

list : List Player -> Html msg
list players =
    Table.table
        { options = [ Table.striped ]
        , thead = Table.thead []
            [ Table.tr []
                [ Table.th [] [ text "Id" ]
                , Table.th [] [ text "Initials" ]
                , Table.th [] [ text "Time" ]
                , Table.th [] [ text "Score" ]
                ]
            ]
        , tbody = Table.tbody [] (List.map playerRow players)
        }

playerRow : Player -> Table.Row msg
playerRow player =
     Table.tr []
        [ Table.td [] [ text player.id ]
        , Table.td [] [ text player.initials ]
        , Table.td [] [ text (Debug.toString player.time) ]
        , Table.td [] [ text (Debug.toString player.score) ]
        ]

这将为您提供正确的HTML,但您可能仍然需要导入引导样式。文档给出了一个包含样式表的示例,您可以在一些包装函数中执行此操作,例如:

import Bootstrap.Grid as Grid
import Bootstrap.Table as Table
import Bootstrap.CDN as CDN

view : Model -> Html Msg
view model =
    Grid.container []
        [ CDN.stylesheet -- creates an inline style node with the Bootstrap CSS
        , Grid.row []
            [ Grid.col []
                [ list model.players ]
            ]
        ]

这里是一个 slimmed down Ellie example to play with .