NoRedInk/noredink-ui/24.9.0

NOTE: the latest version is 35.9.3

Nri.Ui.SideNav.V5

Changes from V4

  • removes primary and secondary
  • adds compactGroup

View

Config route msg
-> List (NavAttribute msg)
-> List (Entry route msg)
-> Html msg
type alias Config route msg =
{ isCurrentRoute : route -> Bool
, routeToString : route -> String
, onSkipNav : msg
}
collapsible : CollapsibleConfig msg -> NavAttribute msg

Entries

entry : String -> List (EntryAttribute route msg) -> Entry route msg
String
-> List (EntryAttribute route msg)
-> List (Entry route msg)
-> Entry route msg
html : List (Html msg) -> Entry route msg
String
-> List GroupAttribute
-> List (Entry route msg)
-> Entry route msg

Add a labelled "group" of entries, typically taking the form of plain links.

SideNav.compactGroup "Resources"
    []
    [ SideNav.entry "Docs" [ SideNav.linkExternal "www.docs.com" ]
    , SideNav.entry "Examples" [ SideNav.linkExternal "www.examples.com" ]
    , SideNav.entry "Google" [ SideNav.linkExternal "www.google.com" ]
    ]
type Entry route msg

Use entry to create a sidebar entry.

type Attribute entryOrGroup msg
type alias EntryAttribute route msg =
Attribute (EntrySpecificConfic route msg) msg
type alias GroupAttribute =
Attribute {} Never
icon : Svg -> Attribute entryOrGroup msg
rightIcon : Svg -> Attribute entryOrGroup msg
custom : List (Attribute msg) -> Attribute entryOrGroup msg

Use this helper to add custom attributes.

Do NOT use this helper to add css styles, as they may not be applied the way you want/expect if underlying styles change. Instead, please use the css helper.

css : List Style -> Attribute entryOrGroup msg
nriDescription : String -> Attribute entryOrGroup msg
testId : String -> Attribute entryOrGroup msg
id : String -> Attribute entryOrGroup msg

Behavior

onClick : msg -> EntryAttribute route msg
href : route -> EntryAttribute route msg
linkSpa : route -> EntryAttribute route msg

Use this link for routing within a single page app.

This will make a normal <a> tag, but change the Events.onClick behavior to avoid reloading the page.

See https://github.com/elm-lang/html/issues/110 for details on this implementation.

linkExternal : String -> EntryAttribute route msg
{ method : String
, url : route
}
-> EntryAttribute route msg
{ track : msg
, url : route
}
-> EntryAttribute route msg
{ track : msg
, url : String
}
-> EntryAttribute route msg

Change the state

premiumDisplay : PremiumDisplay -> msg -> EntryAttribute route msg

Modules