NoRedInk/noredink-ui/25.2.0

NOTE: the latest version is 35.9.3

Nri.Ui.Tabs.V8

Changes from V7:

  • Uses an HTML-like API
  • Adds sticky positioning
  • Adds background color in the tab list (for use with sticky positioning)
  • Adds the ability to make the background of the active tab fade into the background of the panel below it

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 : Float -> Attribute id msg

Set the spacing between tabs in the tab list.

= Left
| Center
| Right

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

Set the alignment of the tab list.

pageBackgroundColor : 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:

  • you are setting up sticky headers, to prevent page content from showing through the background.

  • you are using tabs in a page that has non-white background, so the background of the active tab fades into the panel below it.

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

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

Configure how the top bar is sticky.

  • topOffset controls how far from the top of the viewport the bar will stick, in pixels. Content will be visible below this offset in the z-order. (Default value: 0)
  • topPadding controls how far from the top of the viewport the bar will be padded. Unlike topOffset, content will not be visible behind the padding. Be aware that this padding will add space in the DOM even when the bar is not sticky. (Default value: 0)
  • zIndex controls how high up the z-order the bar will float. (Default value: 0)
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.

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

Tabs

type Tab id msg
type TabAttribute id msg
{ id : id
, idString : String
}
-> List (TabAttribute id msg)
-> Tab id msg
tabString : String -> TabAttribute id msg
tabHtml : Html Never -> TabAttribute id msg
withTooltip : List (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 msg -> TabAttribute id msg
spaHref : String -> TabAttribute id msg

Modules