view : Model -> Html Msg
view model =
div []
[ Accordion.view
{ entries =
[ AccordionEntry
{ caret = Accordion.updwardCaret
, content = \() -> text "Accordion Content"
, entryClass = "a-class-distinguishing-this-accordion-from-others-on-the-page"
, expansionDirection = Accordion.Upwards
, headerContent = text "Accordion Header"
, headerId = "a-unique-id-for-this-accordion-header-button"
, headerLevel = Accordion.H1
, isExpanded = model.isAccordionOpen
, toggle = Just ToggleAccordion
}
[]
]
, focus = Focus
}
, Accordion.styleAccordion
{ entryStyles = []
, entryExpandedStyles = []
, entryClosedStyles = []
, headerStyles = []
, headerExpandedStyles = []
, headerClosedStyles = []
, contentStyles = []
}
]
view : { entries : List (AccordionEntry msg), focus : String -> msg } -> Accessibility.Styled.Html msg
Corresponds to h1, h2, h3 etc. Choose the correct header level given your page context.
{ caret : Basics.Bool -> Accessibility.Styled.Html msg
, content : () -> Accessibility.Styled.Html msg
, entryClass : String
, expansionDirection : ExpansionDirection
, headerContent : Accessibility.Styled.Html msg
, headerId : String
, headerLevel : HeaderLevel
, isExpanded : Basics.Bool
, toggle : Maybe (Basics.Bool -> msg)
}
{ entryStyles : List Css.Style
, entryExpandedStyles : List Css.Style
, entryClosedStyles : List Css.Style
, headerStyles : List Css.Style
, headerExpandedStyles : List Css.Style
, headerClosedStyles : List Css.Style
, contentStyles : List Css.Style
}
styleAccordion : StyleOptions -> Accessibility.Styled.Html msg
defaultCaret : Basics.Bool -> Accessibility.Styled.Html msg
Determines in which direction the accordion expands.
upwardCaret : Basics.Bool -> Accessibility.Styled.Html msg
Animated caret used for accordions that expand upwards.