NoRedInk / noredink-ui / Nri.Ui.Tabs.V8

Changes from V7:

Attributes


type Attribute id msg

Ways to adapt the appearance of the tabs to your application.

title : String -> Attribute id msg

Set a title in the tab list.

spacing : Basics.Float -> Attribute id msg

Set the spacing between tabs in the tab list.


type Alignment
    = Left
    | Center
    | Right

Determines whether tabs are centered or floating to the left or right.

alignment : Alignment -> Attribute id msg

Set the alignment of the tab list.

pageBackgroundColor : Css.Color -> Attribute id msg

Tell this tab list about the background color of the page it lievs on.

You may want to use this if, for example:

tabListSticky : Attribute id msg

Make the tab list sticky. You probably want to set an explicit background color along with this!


type alias TabListStickyConfig =
{ topOffset : Basics.Float
, topPadding : Basics.Float
, zIndex : Basics.Int 
}

Configure how the top bar is sticky.

tabListStickyCustom : TabListStickyConfig -> Attribute id msg

Make the tab list sticky, overriding the default behavior. You should probably set an explicit background color along with this.

view : { focusAndSelect : { select : id, focus : Maybe String } -> msg, selected : id } -> List (Attribute id msg) -> List (Tab id msg) -> Html.Styled.Html msg

Tabs


type Tab id msg


type TabAttribute id msg

build : { id : id, idString : String } -> List (TabAttribute id msg) -> Tab id msg

tabString : String -> TabAttribute id msg

tabHtml : Html.Styled.Html Basics.Never -> TabAttribute id msg

withTooltip : List (Nri.Ui.Tooltip.V3.Attribute msg) -> TabAttribute id msg

Tooltip defaults: [Tooltip.smallPadding, Tooltip.onBottom, Tooltip.fitToContent]

labelledBy : String -> TabAttribute id msg

Sets an overriding labelledBy on the tab for an external tooltip. This assumes an external tooltip is set and disables any internal tooltip configured.

describedBy : String -> TabAttribute id msg

Like labelledBy, but it describes the given element instead of labeling it.

This attribute can be used multiple times if more than one element describes this tab.

panelHtml : Html.Styled.Html msg -> TabAttribute id msg

spaHref : String -> TabAttribute id msg