我正在接近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
问题在于:
对我而言,这是一个非常基本的功能,我很惊讶它不是卡配置的一部分......希望我是那个没有注意到的东西。 有什么想法吗?
P.S。:第一篇文章,是仁慈的:)
答案 0 :(得分:2)
一点点更新,几乎是一种解决方案。
好人rundis犯了一个new version.,允许给一张卡片最初扩展状态。 这可能是4.0软件包发布的一部分。
界面非常简单,因为您只需要添加到模型init:
model.AccordionState = Accordion.initialStateCardOpen myAccordionId
其中id是视图中设置的id,同时创建Accordion。
这并不能让我完全开心,因为我想在几张卡的列表中进行选择,但部分解决了这个问题。