Question

我一直在尝试几种方法，但无法弄清楚如何用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) ]
    ]

因为这应该非常简单，所以我显然在这里遗漏了一些东西。我怎样才能使这张桌子有条纹？

Answer 1

您的示例使用了Elm的HTML库中的HTML函数，但是使用适当的Bootstrap类型和函数可能会花费更多时间。例如，使用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，但您可能仍需要导入Bootstrap样式。该文档提供了一个包含样式表的示例，您可以在某些包装函数中进行此操作，例如：

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。

如何使用Elm-Bootstrap 4.1.0将表划分为条纹？

1 个答案: