primait/pyxis-components/1.1.0

NOTE: the latest version is 9.0.3

Prima.Pyxis.Accordion.Accordion

Creates an Accordion component by using predefined Html syntax.

Configuration

type Config msg

Represents the static configuration of the component. Values passed in are no more modified by the setter.

type State msg

Represents the state of the component. Values passed in are susceptible to change.

Configuration Helpers

baseConfig : String -> (String -> Bool -> msg) -> Config msg

Returns the configuration for a Base accordion skin.

...


type alias Slug =
    String


type Msg =
    Toggled Slug Bool


...


myAccordionConfig : Accordion.Config
myAccordionConfig =
let
    slug =
        "my_accordion_slug"


    tagger =
        Toggled
in
    Accordion.baseConfig slug tagger


...
lightConfig : String -> (String -> Bool -> msg) -> Config msg

The same as baseConfig but with a Light skin.

darkConfig : String -> (String -> Bool -> msg) -> Config msg

The same as baseConfig but with a Dark skin.

state : Bool -> String -> List (Html msg) -> State msg

Returns the basic state of the component.

...


myAccordionState : Accordion.State
myAccordionState =
    let
        isOpen =
            False


        title =
            "My title"


        content =
            (List.singleton <<  text) "Lorem ipsum dolor sit amet."
    in
    Accordion.state isOpen title content


...

Helpers

open : State msg -> State msg

Opens the Accordion to reveal it's content.

updatedAccordionState =
    Accordion.open myAccordionState
close : State msg -> State msg

Closes the Accordion to hide it's content.

updatedAccordionState =
    Accordion.close myAccordionState

Render

render : State msg -> Config msg -> Html msg

Renders the Accordion component by receiving is State and Config.

Accordion.render myAccordionState myAccordionConfiguration