NoRedInk/noredink-ui/35.6.0

NOTE: the latest version is 35.9.3

Nri.Ui.Accordion.V4

Changes from V3

  • Enables accordion expansion either upwards or downwards
  • Added animated caret for upward accordions

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 = []
            }
        ]
{ entries : List (AccordionEntry msg)
, focus : String -> msg
}
-> Html msg
= H1
| H2
| H3
| H4
| H5
| H6

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

= AccordionEntry (Entry msg) (List (AccordionEntry msg))
type alias Entry msg =
{ caret : Bool -> Html msg
, content : () -> Html msg
, entryClass : String
, expansionDirection : ExpansionDirection
, headerContent : Html msg
, headerId : String
, headerLevel : HeaderLevel
, isExpanded : Bool
, toggle : Maybe (Bool -> msg)
}
type alias StyleOptions =
{ entryStyles : List Style
, entryExpandedStyles : List Style
, entryClosedStyles : List Style
, headerStyles : List Style
, headerExpandedStyles : List Style
, headerClosedStyles : List Style
, contentStyles : List Style
}
styleAccordion : StyleOptions -> Html msg
defaultCaret : Bool -> Html msg
= Upwards
| Downwards

Determines in which direction the accordion expands.

upwardCaret : Bool -> Html msg

Animated caret used for accordions that expand upwards.

Modules