当前位置 : 主页 > 网页制作 > Bootstarp >

初学者的Elm Bootstrap手风琴秀

来源:互联网 收集:自由互联 发布时间:2021-06-12
我正在接近Elm,我需要创建一个包含一些可折叠数据的页面. 由于我目前正在使用Bootstrap,因此Accordion组件似乎是最适合使用的组件. 这是我的相关虚拟代码: view : Model - Html Msgview model =
我正在接近Elm,我需要创建一个包含一些可折叠数据的页面.
由于我目前正在使用Bootstrap,因此Accordion组件似乎是最适合使用的组件.

这是我的相关虚拟代码:

view : Model -> Html Msg
view model =
    div []
        [ basicAccordion model.accordionState
            "Dummy1"
            (div []
                [ text "Dummy Title"
                , Button.button [ Button.secondary ] [ text "Hello World" ]
                ]
            )
            Nothing
        , structuredAccordion model.accordionState
            "Dummy2"
            ([ Card.titleH4 [] [ text "Another trial" ]
             , Card.text [] [ text "Bye" ]
             ]
            )
            (Just ("id_dummy2"))
        ]

basicAccordion : Accordion.State -> String -> Html Msg -> Maybe String -> Maybe Bool -> Html Msg
basicAccordion state title content id collapsed =
    let
        singleCard =
            Card.custom <| content
    in
        structuredAccordion state title [ singleCard ] id collapsed


structuredAccordion : Accordion.State -> String -> List (Card.BlockItem Msg) -> Maybe String -> Maybe Bool -> Html Msg
structuredAccordion state title content id collapsed =
    Accordion.config Msgs.AccordionMsg
        |> Accordion.withAnimation
        |> Accordion.cards
            [ Accordion.card
                { id = (Maybe.withDefault title id)
                , options = []
                , header =
                    Accordion.header [] <| Accordion.toggle [] [ text title ]
                , blocks =
                    [ Accordion.block [] content
                    ]
                }
            ]
        |> Accordion.view state

这是问题所在:

>我想将Accordion内容显示为初始页面状态
>我发现bootstrap手风琴有一个默认设置,但是它与Bootstrap.Accordion暴露的可见性无关.

对我而言,这是一个非常基本的功能,我很惊讶它不是卡配置的一部分…希望我是一个没有注意到的东西.
任何的想法?

P.S.:第一篇文章,是仁慈的:)

一点点更新,这几乎是一个解决方案.

好人rundis承诺new version.允许给一张卡最初扩展状态.
这可能是4.0软件包发布的一部分.

界面非常简单,因为您只需要添加到模型init:

model.AccordionState = Accordion.initialStateCardOpen myAccordionId

其中id是视图中设置的id,同时创建Accordion.

这并没有让我完全开心,因为我想在几张牌的清单中选择打开,但部分解决了这个问题.

网友评论