Changes from V7:
data-nri-description='Nri-Ui__tabs'
attribute to the tabs containerWays 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.
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:
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.
tabListSticky : Attribute id msg
Make the tab list sticky. You probably want to set an explicit background color along with this!
{ topOffset : Basics.Float
, topPadding : Basics.Float
, zIndex : Basics.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.
view : { focusAndSelect : { select : id, focus : Maybe String } -> msg, selected : id } -> List (Attribute id msg) -> List (Tab id msg) -> Html.Styled.Html 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