Как сделать полосатый стол с помощью elm-bootstrap 4.1.0? - PullRequest
Новая
       6

Как сделать полосатый стол с помощью elm-bootstrap 4.1.0?

0 голосов
/ 09 декабря 2018

Я пробовал несколько вещей и не могу понять, как стилизовать эту 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 Ответ

0 голосов
/ 09 декабря 2018

В вашем примере используются функции HTML из библиотеки HTML в Elm, но вам, вероятно, будет лучше использовать соответствующие типы и функции Bootstrap.Например, используя параметры таблицы , определенные в документации , вы можете переписать функции представления следующим образом: 

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

Вот пример Элли, уменьшенный до , для игры с .

...