NoRedInk / noredink-ui / Nri.Ui.Accordion.V4

Changes from V3

Example

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


type HeaderLevel
    = H1
    | H2
    | H3
    | H4
    | H5
    | H6

Corresponds to h1, h2, h3 etc. Choose the correct header level given your page context.


type AccordionEntry msg
    = AccordionEntry (Entry msg) (List (AccordionEntry msg))


type alias Entry msg =
{ 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) 
}


type alias StyleOptions =
{ 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


type ExpansionDirection
    = Upwards
    | Downwards

Determines in which direction the accordion expands.

upwardCaret : Basics.Bool -> Accessibility.Styled.Html msg

Animated caret used for accordions that expand upwards.