An accordion is a group of stacked cards where you can toggle the visibility (slide up/down) of each card
type alias Model =
{ accordionState = Accordion.state }
init : (Model, Cmd Msg)
init =
( { accordionState = Accordion.initialState }, Cmd.none )
type Msg
= AccordionMsg Accordion.State
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
AccordionMsg state ->
( { model | accordionState = state }
, Cmd.none
)
view : Model -> Html Msg
view model =
Accordion.config AccordionMsg
|> Accordion.withAnimation
|> Accordion.cards
[ Accordion.card
{ id = "card1"
, options = []
, header =
Accordion.header [] <| Accordion.toggle [] [ text "Card 1" ]
, blocks =
[ Accordion.block []
[ Block.text [] [ text "Lorem ipsum etc" ] ]
]
}
, Accordion.card
{ id = "card2"
, options = []
, header =
Accordion.header [] <| Accordion.toggle [] [ text "Card 2" ]
, blocks =
[ Accordion.block []
[ Block.text [] [ text "Lorem ipsum etc" ] ]
]
}
]
|> Accordion.view model.accordionState
-- You need to do this wiring when you use animations !
subscriptions : Model -> Sub Msg
subscriptions model =
Accordion.subscriptions model.accordionState AccordionMsg
view : State -> Config msg -> Html.Styled.Html msg
Create an interactive accordion element
Accordion.config AccordionMsg
|> Accordion.withAnimation
|> Accordion.cards
[ cardOne model -- view function to create a card
, cardTwo model
]
|> Accordion.view model.accordionState
state
The current view stateconfig
The configuration for the display of the accordionconfig : (State -> msg) -> Config msg
Creates an initial/default view configuration for an accordion.
cards : List (Card msg) -> Config msg -> Config msg
Define the cards that your accordion should consist of
withAnimation : Config msg -> Config msg
Set option for using animations for sliding card contents up/down.
Note: You must remember to hook up the subscriptions
function
when using this option.
onlyOneOpen : Config msg -> Config msg
Set option for only allowing one (or zero) open cards at any one time.
isOpen : String -> State -> Basics.Bool
Check if given card is open/expanded (or when animating, on it's way to become open/expanded).
NOTE: If you give a non-existing id it will return False (:
Opaque type that defines the view configuration information of your accordion
config
functionwithAnimtion
function allows you to define that the contents of cards should animate up/downcards
function defines the List of cards to be displayedinitialState : State
Initial state for the accordion. Typically used from your main init
function
initialStateCardOpen : String -> State
Initial state with card that matches given id expanded.
Opaque representation of the view state for the accordion
card : { id : String, options : List (Bootstrap.Card.Option msg), blocks : List (CardBlock msg), header : Header msg } -> Card msg
Creates a card item for use in an accordion
id
Unique id for your cardoptions
List of card styling optionsheader
Card header containing a toggle to hide/show the details of a cardblocks
The main content elements of the cardblock : List (Bootstrap.Card.Block.Option msg) -> List (Bootstrap.Card.Block.Item msg) -> CardBlock msg
Create a block element for use in an accordion card.
Accordion.block []
[ Block.text [] [ text "Just some text" ] ]
blockOptions
List of block optionsblockItems
List of block itemslistGroup : List (Bootstrap.ListGroup.Item msg) -> CardBlock msg
Create a List Group element for use in an accordion.
List groups are block elements just like block
Accordion.listGroup
[ ListGroup.li [] [ text "Item 1" ]
, ListGroup.li [] [ text "Item 2" ]
]
items
List of List group itemsheader : List (Html.Styled.Attribute msg) -> Toggle msg -> Header msg
Create a header (div) for an accordion card. It must contain a toggle
element which will be responsible for display/hide the details of an individual card.
You may optionally prepend
or append
children to the header for further customization.
toggle : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Toggle msg
Creates a card toggle element used for toggling the display of the main content of your cards
attributes
List of attributeschildren
List of child elementsheaderH1 : List (Html.Styled.Attribute msg) -> Toggle msg -> Header msg
Create an accordion card header but rather than a div, using a h1 element
headerH2 : List (Html.Styled.Attribute msg) -> Toggle msg -> Header msg
Create an accordion card header but rather than a div, using a h2 element
headerH3 : List (Html.Styled.Attribute msg) -> Toggle msg -> Header msg
Create an accordion card header but rather than a div, using a h3 element
headerH4 : List (Html.Styled.Attribute msg) -> Toggle msg -> Header msg
Create an accordion card header but rather than a div, using a h4 element
headerH5 : List (Html.Styled.Attribute msg) -> Toggle msg -> Header msg
Create an accordion card header but rather than a div, using a h5 element
headerH6 : List (Html.Styled.Attribute msg) -> Toggle msg -> Header msg
Create an accordion card header but rather than a div, using a h6 element
appendHeader : List (Html.Styled.Html msg) -> Header msg -> Header msg
Add elements after the toggle element in a accordion card header. Order matters if you're using both prependHeader and appendHeader. Specifically, it should be toggle |> appendHeader |> prependHeader.
prependHeader : List (Html.Styled.Html msg) -> Header msg -> Header msg
Add elements before the toggle element in a accordion card header. Order matters if you're using both prependHeader and appendHeader. Specifically, it should be toggle |> appendHeader |> prependHeader.
Opaque representation of a card item
Bootstrap.Card.Internal.CardBlock msg
Opaque representation of a card block element
Opaque type representing the header for an accordion card
Opaque representation of toggle element for initiating slide up/down for a card
subscriptions : State -> (State -> msg) -> Platform.Sub.Sub msg
When using animations you must remember to call this function for your main subscriptions function
subscriptions : Model -> Sub Msg
subscriptions model =
Accordion.subscriptions model.accordionState AccordionMsg
state
The current view state of the accordiontoMsg
Message constructor function that is used to step the view state forward