NoRedInk/noredink-ui/27.7.1

NOTE: the latest version is 35.9.3

Nri.Ui.Carousel.V2

Changes from V1:

  • added new carousel APIs (with tabbed controls/previous and next controls, and combined controls) using W3C guidelines
{ selected : id
, slides :
List
{ id : id
, idString : String
, name : String
, visibleLabelId : Maybe String
, slideView : Html msg
}
, previousButton :
{ name : String
, icon : Svg
, attributes : List (Attribute msg)
}
, nextButton :
{ name : String
, icon : Svg
, attributes : List (Attribute msg)
}
, name : String
, visibleLabelId : Maybe String
, role : Role
, announceAndSelect :
{ select : id
, announce : String
}
-> msg
}
-> { viewPreviousButton : Html msg
, viewNextButton : Html msg
, slides : Html msg
, containerAttributes : List (Attribute msg)
}

Builds a carousel with previous and next controls

Returns:

  • slides the container with the carousel contents
  • viewPreviousButton previous button
  • viewNextButton next button
  • containerAttributes attributes that should be used on the parent div of both the button and slides elements
{ selected : id
, slides :
List
{ id : id
, idString : String
, slideView : Html msg
, tabView : Html Never
, tabAttributes : List (Attribute msg)
}
, tabStyles : Bool -> List Style
, tabListStyles : List Style
, role : Role
, name : String
, visibleLabelId : Maybe String
, focusAndSelect :
{ select : id
, focus : Maybe String
}
-> msg
}
-> { tabs : Html msg
, slides : Html msg
, containerAttributes : List (Attribute msg)
}

Builds a carousel with tab buttons Returns:

  • tabs: tabs control buttons
  • slides container with the carousel contents
  • containerAttributes attributes that should be used on the parent div of both the button and slides elements
{ selected : id
, slides :
List
{ id : id
, idString : String
, name : String
, visibleLabelId : Maybe String
, slideView : Html msg
, tabView : Html Never
, tabAttributes : List (Attribute msg)
}
, tabStyles : Bool -> List Style
, tabListStyles : List Style
, previousButton :
{ name : String
, icon : Svg
, attributes : List (Attribute msg)
}
, nextButton :
{ name : String
, icon : Svg
, attributes : List (Attribute msg)
}
, role : Role
, name : String
, visibleLabelId : Maybe String
, select :
{ select : id
, announce : Maybe String
, focus : Maybe String
}
-> msg
}
-> { tabs : Html msg
, viewPreviousButton : Html msg
, viewNextButton : Html msg
, slides : Html msg
, containerAttributes : List (Attribute msg)
}

Builds a carousel with tab buttons Returns:

  • tabs: tabs control buttons
  • slides container with the carousel contents
  • viewPreviousButton previous button
  • viewNextButton next button
  • containerAttributes attributes that should be used on the parent div of both the button and slides elements
type Role
= Group
| Region

Role, which can be either Group or Region

  • Use Group when the contents of the slides are not intended to be included in a page summary or table of contents by assistive technologies.
  • Use Region when the contents the slides should be included in a page summary or table of contents.

Modules