初学者的Elm Bootstrap手风琴秀
发布时间:2020-12-17 20:43:07 所属栏目:安全 来源:网络整理
导读:我正在接近Elm,我需要创建一个包含一些可折叠数据的页面. 由于我目前正在使用Bootstrap,因此Accordion组件似乎是最适合使用的组件. 这是我的相关虚拟代码: view : Model - Html Msgview model = div [] [ basicAccordion model.accordionState "Dummy1" (di
我正在接近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内容显示为初始页面状态 对我而言,这是一个非常基本的功能,我很惊讶它不是卡配置的一部分…希望我是一个没有注意到的东西. P.S.:第一篇文章,是仁慈的:) 解决方法
一点点更新,这几乎是一个解决方案.
好人rundis承诺new version.允许给一张卡最初扩展状态. 界面非常简单,因为您只需要添加到模型init: model.AccordionState = Accordion.initialStateCardOpen myAccordionId 其中id是视图中设置的id,同时创建Accordion. 这并没有让我完全开心,因为我想在几张牌的清单中选择打开,但部分解决了这个问题. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |